เวอร์ชันภาษาอังกฤษ: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
พฤติกรรมใน Atlas กำหนดพฤติกรรมเมื่อมีการทริกเกอร์เหตุการณ์ของการควบคุม ลักษณะการทำงานสามารถเห็นได้ว่าเป็นเหตุการณ์ DHTML ที่ห่อหุ้มไว้ เช่น การคลิกและการวางเมาส์เหนือ พฤติกรรมยังสามารถเป็นองค์ประกอบที่สามารถแนบไปกับการควบคุมไคลเอนต์ Atlas เพื่อให้มีฟังก์ชันขั้นสูงและสมบูรณ์ยิ่งขึ้นของการควบคุมไคลเอนต์ Atlas เช่น การลากและวางที่ซับซ้อน การเติมให้สมบูรณ์อัตโนมัติ และฟังก์ชันลอยตัวและฟังก์ชันอื่น ๆ พฤติกรรมจะถูกกำหนดไว้ในคอลเลกชันพฤติกรรมของตัวควบคุม Atlas
จากเอกสาร Atlas และไฟล์ต้นฉบับ เราสามารถทราบได้ว่า Atlas มีพฤติกรรมในตัวดังต่อไปนี้:
พฤติกรรมการคลิก: ให้การประมวลผลของการคลิกเมาส์
พฤติกรรมแบบลอยตัว: ให้เอฟเฟกต์การลากและวาง
พฤติกรรมโฮเวอร์: ให้การประมวลผลเหตุการณ์ DHTML บนเมาส์โอเวอร์ ออนเมาส์เอาท์ ออนโฟกัส และออนเบลอ
ส่วนประกอบป๊อปอัป: มีฟังก์ชันป๊อปอัปและสามารถใช้เพื่อนำคำแนะนำเครื่องมือขั้นสูงไปใช้
ลักษณะการเติมข้อความอัตโนมัติ: มีฟังก์ชันการเติมข้อความอัตโนมัติ นี่เป็นหนึ่งในคุณสมบัติที่ใช้กันทั่วไปในการสาธิต Atlas ลักษณะการทำงานนี้ยังต้องมีตัวจัดการฝั่งเซิร์ฟเวอร์ด้วย
Click Behavior ใช้เพื่อจัดการกับเหตุการณ์ onclick ของ DHTML ซึ่งมีประโยชน์มาก แต่ฟังก์ชันที่มีให้นั้นค่อนข้างเรียบง่าย ในบางโปรแกรมที่ซับซ้อน เราอาจจำเป็นต้องแยกฟังก์ชันของปุ่มซ้ายและขวาออกจากกัน เช่น ปุ่มซ้ายจะใช้ในการเลือก และปุ่มขวาจะใช้เพื่อเปิดเมนูทางลัด แม้ว่าเราจะใส่ if-else ไว้ในตัวจัดการพฤติกรรมการคลิกได้ แต่วิธีนี้ไม่ใช่วิธี Atlas ที่ดี ดังนั้น วันนี้เราจะเขียนพฤติกรรมการคลิกที่มีประสิทธิภาพยิ่งขึ้นที่เรียกว่า ExtendedClickBehavior ซึ่งสามารถแยกปุ่มซ้ายและขวาออกจากกันภายในพฤติกรรมและทริกเกอร์เหตุการณ์ที่แตกต่างกันสองเหตุการณ์ ด้วยการเขียน ExtendedClickBehavior นี้ คุณจะเข้าใจกระบวนการทั่วไปในการสร้างพฤติกรรมที่กำหนดเองใน Atlas ได้ด้วย
โดยทั่วไป มีห้าขั้นตอนในการสร้างลักษณะการทำงานแบบกำหนดเอง:
สืบทอดจากคลาสพื้นฐาน Sys.UI.Behavior
กำหนดเหตุการณ์ของคุณเองเพื่อสรุปเหตุการณ์ใน DHTML เหตุการณ์เหล่านี้จะถูกนำมาใช้เพื่อแสดงการควบคุม Atlas อื่นๆ แทนที่เหตุการณ์ DHTML ดั้งเดิมที่ยังไม่มีการแก้ไข
ระบุตัวจัดการสำหรับเหตุการณ์ของคุณใน Constructor ของ Behavior และถอดตัวจัดการเหตุการณ์ในตัวทำลาย
ปล่อยเหตุการณ์ที่สอดคล้องกันในฟังก์ชันตัวจัดการ ในตัวอย่างของ ExtendedClickBehavior เราปล่อยเหตุการณ์ที่แตกต่างกันตามปุ่มเมาส์ที่แตกต่างกัน
เพิ่มคำอธิบายของเหตุการณ์ที่คุณกำหนดไว้ในเมธอด getDescriptor()
ด้านล่างนี้คือโค้ด JavaScript สำหรับ ExtendedClickBehavior ห้าขั้นตอนข้างต้นถูกทำเครื่องหมายเป็นความคิดเห็นภายในโค้ด บันทึกโค้ดด้านล่างเป็น ExtendedClickBehavior.js
Sys.UI.ExtensedClickBehavior = ฟังก์ชั่น () {
Sys.UI.ExtensedClickBehavior.initializeBase (นี้);
var _clickHandler;
// ขั้นตอนที่ 2
this.click = this.createEvent();
this.leftClick = this.createEvent();
this.rightClick = this.createEvent();
this.dispose = ฟังก์ชั่น () {
// ขั้นตอนที่ 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExtensedClickBehavior.callBaseMethod (นี่คือ 'ทิ้ง');
}
this.initialize = ฟังก์ชั่น() {
Sys.UI.ExtensedClickBehavior.callBaseMethod (นี่คือ 'เริ่มต้น');
// ขั้นตอนที่ 3
_clickHandler = Function.createDelegate (นี่คือ clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
-
this.getDescriptor = ฟังก์ชั่น () {
var td = Sys.UI.ExtensedClickBehavior.callBaseMethod (นี่คือ 'getDescriptor');
// ขั้นตอนที่ 5
td.addEvent('คลิก', จริง);
td.addEvent('leftClick', จริง);
td.addEvent('rightClick', จริง);
กลับ td;
-
// ขั้นตอนที่ 4
ฟังก์ชัน clickHandler() {
this.click.inurge (นี่คือ Sys.EventArgs.Empty);
ถ้า (window.event.button == 1)
-
this.leftClick.inurge (นี่, Sys.EventArgs.Empty);
-
อย่างอื่นถ้า (window.event.button == 2)
-
this.rightClick.inurge (นี่, Sys.EventArgs.Empty);
-
-
-
// ขั้นตอนที่ 1
Sys.UI.ExtensedClickBehavior.registerSealedClass ('Sys.UI.ExtensedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('สคริปต์', 'extendClickBehavior', Sys.UI.ExtensendClickBehavior);
มาทดสอบ ExtendedClickBehavior นี้บนเพจกัน เพิ่ม <div> ในหน้าสำหรับการคลิก และป้ายกำกับเพื่อแสดงข้อมูลการคลิก ด้านล่างนี้คือคำจำกัดความ HTML จากไฟล์ ASPX อย่าลืมเพิ่มการอ้างอิงไปยังไฟล์ ExtendedClickBehavior.js ใน ScriptManager
<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="เซิร์ฟเวอร์">
<สคริปต์>
<atlas:ScriptReference Path="ExtensedClickBehavior.js" />
</สคริปต์>
</atlas:ScriptManager>
<div>
<div id="myButton" style="border: 1px solid black; width: 20em; white-space:normal">คลิกที่ฉัน (ซ้ายและขวา)!</div> <br />
<span id="myLabel">ไม่ถูกคลิก</span>
</div>
ด้านล่างนี้คือคำจำกัดความของสคริปต์ Atlas โปรดสังเกตว่าเราใช้ setProperty Action ของ Atlas (สำหรับ Atlas Action โปรดดูบทความถัดไป) เพื่อตั้งค่าข้อความของป้ายกำกับหลังจากการคลิกแต่ละครั้ง
<เพจ xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<ส่วนประกอบ>
<label id="myButton">
<พฤติกรรม>
<ขยายคลิกพฤติกรรม>
<คลิก>
<setProperty target="myLabel" property="text" value="clicked" />
</คลิก>
<คลิกซ้าย>
<setProperty target="myLabel" property="text" value="คลิกซ้าย" />
</คลิกซ้าย>
<คลิกขวา>
<setProperty target="myLabel" property="text" value="คลิกขวา" />
</คลิกขวา>
</ขยายคลิกพฤติกรรม>
</พฤติกรรม>
</ฉลาก>
<label id="myLabel" />
</ส่วนประกอบ>
</หน้า>