jQuery UI ตัวอย่าง - ส่วนที่แกลลอรี่ (โรงงาน Widget)

ก่อนหน้านี้: ตัวอย่างเช่น jQuery UI - สถานที่ตั้ง (ตำแหน่ง)

ใช้เครื่องมือ jQuery UI กับทุกสิ่งที่เป็นนามธรรมเดียวกันเพื่อสร้างปลั๊กอิน jQuery stateful

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับเครื่องมือที่ห้องสมุด (โรงงาน Widget) ให้ตรวจสอบเอกสาร API ห้องสมุดองค์ประกอบ (โรงงาน Widget)

ฟังก์ชั่นเริ่มต้น

การสาธิตแสดงให้เห็นว่าง่ายต่อการใช้ห้องสมุดส่วนประกอบ (jquery.ui.widget.js) เพื่อสร้างเครื่องมือที่กำหนดเอง

สามช่วงตึกในทางที่แตกต่างกันในการเริ่มต้น คลิ๊กเพื่อเปลี่ยนสีพื้นหลังของพวกเขา ดูรหัสแหล่งที่มาและความคิดเห็นเพื่อเข้าใจวิธีการทำงาน

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Widget ห้องสมุด (โรงงาน Widget) - ฟังก์ชั่นเริ่มต้น </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  กำหนดเอง-Colorize {
    font-size: 20px;
    ตำแหน่ง: ญาติ;
    ความกว้าง: 75px;
    ความสูง: 75px;
  }
  กำหนดเอง-Colorize เปลี่ยน {
    font-size: 10px;
    position: absolute;
    ขวา: 0;
    ด้านล่าง: 0;
  }
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    // คำจำกัดความของสมาชิกในประเด็น "กำหนดเอง" namespace "สีสัน" เป็นชื่อของสมาชิก $ .widget ( "custom.colorize" ที่ {
      // ตัวเลือกเริ่มต้น: {
        สีแดง: 255
        สีเขียว: 0
        สีน้ำเงิน: 0
 
        // การเปลี่ยนแปลงโทรกลับ: โมฆะ
        สุ่ม: null
      }
 
      // _create สร้าง: ฟังก์ชั่น () {
        this.element
          // เพิ่มหัวข้อของชั้น
          .addClass ( "กำหนดเอง Colorize")
          // ป้องกันการดับเบิลคลิกเพื่อเลือก .disableSelection ข้อความ ();
 
        this.changer = $ ( "<> ปุ่ม" {
          ข้อความ: "การเปลี่ยนแปลง"
          "ชั้น": "กำหนดเอง Colorize เปลี่ยน"
        })
        .appendTo (this.element)
        .button ();
 
        // ผูกคลิกปุ่มเปลี่ยนเหตุการณ์ที่จะใช้วิธีการสุ่ม this._on (this.changer {
          // เมื่อเครื่องมือที่ถูกปิดใช้งาน _on ไม่ได้เรียกว่าสุ่ม
          คลิกที่: "สุ่ม"
        });
        this._refresh ();
      }
 
      () ฟังก์ชัน {: // โทร _refresh เมื่อคุณสร้างแล้วเปลี่ยนแปลงตัวเลือก
        this.element.css ( "พื้นหลังสี", "RGB (" +
          this.options.red + "" +
          this.options.green + "" +
          this.options.blue + ")"
        );
 
        // เรียก this._trigger โทรกลับ / เหตุการณ์ ( "การเปลี่ยนแปลง");
      }
 
      // เปลี่ยนสีเป็นค่าสุ่ม // วิธีการสาธารณะสามารถเรียกได้โดยตรงผ่านทาง .colorize สุ่ม ( "สุ่ม"): ฟังก์ชั่น (event) {
        สี var = {
          สีแดง: Math.Floor (Math.random () * 256)
          สีเขียว: Math.Floor (Math.random () * 256)
          สีน้ำเงิน: Math.Floor (Math.random () * 256)
        };
 
        // เรียกเหตุการณ์ตรวจสอบว่าถ้ายกเลิก (this._trigger ( "สุ่ม" เหตุการณ์สี)! == เท็จ) {
          this.option (สี);
        }
      }
 
      // เหตุการณ์ลบอัตโนมัติผูกพันตาม _on ที่นี่ // รีเซ็ตการปรับเปลี่ยนอื่น ๆ _destroy: ฟังก์ชั่น () {
        // นำองค์ประกอบที่สร้าง this.changer.remove ();
 
        this.element
          .removeClass ( "กำหนดเอง Colorize")
          .enableSelection ()
          .css ( "พื้นหลังสี", "โปร่งใส");
      }
 
      // _setOptions โดยกัญชาทั้งหมดมีการเปลี่ยนแปลงที่มีตัวเลือกที่จะเรียก // เมื่อตัวเลือกการเปลี่ยนแปลงมักจะรีเฟรช _setOptions: ฟังก์ชั่น () {
        // _super และ _superApply
        this._superApply (อาร์กิวเมนต์);
        this._refresh ();
      }
 
      // _setOption _setOption สำหรับแต่ละบุคคลที่จะเปลี่ยนแปลงตัวเลือกโทรติดต่อ: ฟังก์ชั่น (ที่สำคัญค่า) {
        ค่า // สีเพื่อป้องกันการที่ไม่ถูกต้องถ้า (/red|green|blue/.test(key) && (value <0 || ค่า> 255)) {
          กลับ;
        }
        this._super (คีย์ค่า);
      }
    });
 
    // เตรียมใช้ตัวเลือกเริ่มต้น $ ( "# My-WIDGET1") .colorize ();
 
    // สองตัวเลือกที่กำหนดเองในการเริ่มต้น $ ( "# My-WIDGET2") .colorize ({
      สีแดง: 60,
      สีฟ้า: 60
    });
 
    // สีเขียวโดยค่าที่กำหนดเองและมีเพียงช่วยให้เพียงพอสีเขียวเรียกกลับแบบสุ่มในการเริ่มต้น $ ( "# My-widget3") .colorize ({
      สีเขียว: 128
      สุ่ม: ฟังก์ชั่น (เหตุการณ์ UI) {
        กลับ ui.green> 128;
      }
    });
 
    // คลิกสลับการเปิด / ปิด
    $ ( "#disable") จำนวนคลิก (ฟังก์ชั่น () {
      // เตอร์กำหนดเองสำหรับแต่ละเครื่องมือที่จะพบทุกกรณี // ทุกกรณีของการสลับกันเพื่อให้เราสามารถเริ่มต้นจากการเป็นรัฐแรกเพื่อตรวจสอบว่า ($ ( ": ที่กำหนดเอง Colorize") .colorize ( "ตัวเลือก", "คนพิการ")) {
        $ ( ": กำหนดเอง Colorize") .colorize ( "เปิดใช้งาน");
      } else {
        $ ( ": กำหนดเอง Colorize") .colorize ( "ปิด");
      }
    });
 
    // หลังจากการเริ่มต้นให้คลิกที่การตั้งค่าตัวเลือก $ ( "#black") จำนวนคลิก (ฟังก์ชั่น () {
      $ ( ": กำหนดเอง Colorize") .colorize ( "ตัวเลือก" {
        สีแดง: 0
        สีเขียว: 0
        สีฟ้า: 0
      });
    });
  });
  </ script>
</ head>
<body>
 
<div>
  <div id = "My-WIDGET1"> เปลี่ยนสี </ div>
  <div id = "My-WIDGET2"> เปลี่ยนสี </ div>
  <div id = "My-widget3"> เปลี่ยนสี </ div>
  <ปุ่ม id = "ปิด"> สลับตัวเลือกปิดการใช้งาน </ ปุ่ม>
  <ปุ่ม id = "สีดำ"> สีดำ </ ปุ่ม>
</ div>
 
 
</ body>
</ html>

ก่อนหน้านี้: ตัวอย่างเช่น jQuery UI - สถานที่ตั้ง (ตำแหน่ง)

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง

jQuery UI ตัวอย่าง - ส่วนที่แกลลอรี่ (โรงงาน Widget)

ฟังก์ชั่นเริ่มต้น