أمثلة واجهة المستخدم مسج - الجزء حافظة (القطعة مصنع)

وظيفة الافتراضي

يظهر عرض بسيط لاستخدام المكتبات العنصر (jquery.ui.widget.js) لإنشاء العرف الحاجيات.

ثلاث كتل في طريقة مختلفة لتهيئة. انقر لتغيير لون الخلفية الخاصة بهم. عرض شفرة المصدر وتعليقات لفهم كيف يعمل.

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مكتبة مسج واجهة القطعة (القطعة مصنع) - وظيفة الافتراضي </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  .custom-تلوين {
    FONT-SIZE: 20px؛
    موقع: نسبي.
    العرض: 75px؛
    الطول: 75px؛
  }
  .custom-تلوين-المغير {
    FONT-SIZE: 10px؛
    الموقف: مطلقة؛
    الحق: 0؛
    أسفل: 0؛
  }
  </ النمط>
  <script>
  $ (وظيفة () {
    // تعريفات الأعضاء، حيث "العرف" مساحة "تلوين" هو اسم عضو $ .widget ( "custom.colorize"، {
      // الخيارات الافتراضية: {
        الأحمر: 255،
        الأخضر: 0،
        الأزرق: 0،
 
        // تغير الاستدعاء: باطل،
        عشوائي: باطل
      }،
 
      // منشئ _create: وظيفة () {
        this.element
          // إضافة موضوع الدرجة
          .addClass ( "العرف تلوين")
          // منع انقر نقرا مزدوجا فوق لتحديد .disableSelection النص ()؛
 
        this.changer = $ ( "<زر>"، {
          النص: "التغيير"
          "الدرجة الاولى": "العرف-تلوين-المغير"
        })
        .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 عشوائي ( "عشوائي"): وظيفة (الحدث) {
        الألوان فار = {
          الأحمر: 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 ( "العرف تلوين")
          .enableSelection ()
          . المغلق ( "لون الخلفية"، "الشفاف")؛
      }،
 
      // _setOptions بواسطة تجزئة كل تغير مع خيارات لاستدعاء // عندما تكون الخيارات المتغيرة دائما تجديد _setOptions: وظيفة () {
        // _super و_superApply
        this._superApply (الحجج)؛
        this._refresh ()؛
      }،
 
      // _setOption _setOption لكل فرد لتغيير تدعو الخيارات: وظيفة (الرئيسية، قيمة) {
        قيم // اللون لمنع باطلة إذا (/red|green|blue/.test(key) && (قيمة <0 || قيمة> 255)) {
          العودة؛
        }
        this._super (مفتاح، القيمة).
      }
    })؛
 
    // تهيئة الخيارات الافتراضية $ ( "# بلدي WIDGET1") .colorize ()؛
 
    // بواسطة خيارين مخصص لتهيئة $ ( "# بلدي WIDGET2") .colorize ({
      الأحمر: 60،
      الأزرق: 60
    })؛
 
    // الخضراء من حيث القيمة محددة ذاتيا ويسمح فقط لون أخضر رد عشوائي كافية لتهيئة $ ( "# بلدي widget3") .colorize ({
      الأخضر: 128،
      العشوائية: وظيفة (الحدث، واجهة المستخدم) {
        العودة ui.green> 128.
      }
    })؛
 
    // انقر فوق تبديل تمكين / تعطيل
    $ ( "# تعطيل"). انقر (وظيفة () {
      // محددات مخصصة لكل القطعة للعثور على جميع الحالات // جميع حالات التحول معا، لذلك يمكننا أن نبدأ من أول ولاية معرفة ما اذا كان ($ ( ": العرف تلوين") .colorize ( "الخيار"، "معطل")) {
        $ ( ": مخصص تلوين") .colorize ( "تمكين")؛
      } {شيء آخر
        $ ( ": مخصص تلوين") .colorize ( "تعطيل")؛
      }
    })؛
 
    // بعد التهيئة، انقر فوق إعدادات خيار $ ( "#black"). انقر (وظيفة () {
      $ ( ": مخصص تلوين") .colorize ( "خيار"، {
        الأحمر: 0،
        الأخضر: 0،
        الأزرق: 0
      })؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<div>
  <شعبة معرف = "بلدي WIDGET1"> تغير لون </ div>
  <شعبة معرف = "بلدي WIDGET2"> تغير لون </ div>
  <شعبة معرف = "بلدي widget3"> تغير لون </ div>
  <زر معرف = "تعطيل"> تبديل خيار تعطيل </ زر>
  <زر معرف = "الأسود"> إلى Black </ زر>
</ div>
 
 
</ الجسم>
</ HTML>

عرض تجريبي