مسج واجهة المستخدم سبيل المثال - المتزلج (المنزلق)

السابق: مسج واجهة المستخدم سبيل المثال - شريط التقدم (Progressbar)

التالي: مسج واجهة المستخدم سبيل المثال - الدوار (الدوار)

اسحب مقبض لتحديد قيمة.

لمزيد من التفاصيل عن عضو المنزلق، راجع وثائق API عضوا شريط التمرير (المتزلج على القطعة) .

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

المنزلق الأساسي هو أفقي، ولها مقبض واحد، يمكن نقلها مع الماوس أو مفاتيح الأسهم.

<! 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">
  <script>
  $ (وظيفة () {
    $ ( "#slider") .slider ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "المنزلق"> </ div>
 
 
</ الجسم>
</ HTML>

اللون المنتقى

مزيج من ثلاثة المتزلجون لخلق لون RGB بسيط منقار.

<! 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">
  <نمط>
  #red، #green، أزرق # {
    تطفو: اليسار،
    واضحة: اليسار.
    العرض: 300px؛
    هامش: 15px؛
  }
  #swatch {
    العرض: 120px؛
    الطول: 100px؛
    هامش قمة: 18px؛
    هامش اليسار: 350px؛
    خلفية صورة: لا شيء؛
  }
  #red .ui المنزلق المدى {خلفية: # ef2929؛}
  #red .ui المنزلق مقبض {الحدود اللون: # ef2929؛}
  #green .ui المنزلق المدى {خلفية: # 8ae234؛}
  #green .ui المنزلق مقبض {الحدود اللون: # 8ae234؛}
  أزرق # .ui المنزلق المدى {خلفية: # 729fcf؛}
  أزرق # .ui المنزلق مقبض {الحدود اللون: # 729fcf؛}
  </ النمط>
  <script>
  وظيفة hexFromRGB (ص، ز، ب) {
    عرافة فار = [
      r.toString (16)،
      g.toString (16)،
      b.toString (16)
    ].
    $. كل (عرافة، وظيفة (رقم، فال) {
      إذا (val.length === 1) {
        عرافة [NR] = "0" + فال.
      }
    })؛
    العودة hex.join ( "") .toUpperCase ()؛
  }
  refreshSwatch وظيفة () {
    فار الأحمر = $ ( "#red") .slider ( "قيمة")،
      الأخضر = $ ( "#green") .slider ( "قيمة")،
      الزرقاء = $ ( "أزرق #") .slider ( "قيمة")،
      عرافة = hexFromRGB (الأحمر والأخضر والأزرق)؛
    $ ( "#swatch"). المغلق ( "خلفية لون"، "#" + عرافة)؛
  }
  $ (وظيفة () {
    $ ( "#red، #green، أزرق #") .slider ({
      التوجه: "الأفقي"،
      مجموعة: "دقيقة"،
      الأقصى: 255،
      القيمة: 127،
      الشريحة: refreshSwatch،
      التغيير: refreshSwatch
    })؛
    $ ( "#red") .slider ( "القيمة"، 255)؛
    $ ( "#green") .slider ( "القيمة"، 140)؛
    $ ( "أزرق #") .slider ( "القيمة"، 60)؛
  })؛
  </ script>
</ رئيس>
<الطبقة الجسم = "واجهة المستخدم القطعة المحتوى" على غرار = "الحدود: 0؛">
 
<P الطبقة = "الافتراضية واجهة المستخدم للدولة، واجهة المستخدم الزاوية عن واجهة المستخدم المساعد-clearfix" على غرار = "الحشو: 4PX؛">
  <سبان الطبقة = "واجهة المستخدم، واجهة المستخدم رمز أيقونة قلم رصاص" على غرار = "تعويم: غادر؛ هامش: -2px 5px 0 0؛"> </ SPAN>
  بسيط لون منقار </ P>
 
<شعبة معرف = "الأحمر"> </ div>
<شعبة معرف = "الأخضر"> </ div>
<شعبة معرف = "الأزرق"> </ div>
 
<شعبة معرف = "حامل" الطبقة = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع"> </ div>
 
 
</ الجسم>
</ HTML>

إن تعددية المتزلجون

مزيج من المتزلجون الأفقي والرأسي، مع كل خيار خاص بها، لخلق واجهة مشغل الموسيقى.

<! 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">
  <نمط>
  #eq فترة {
    الطول: 120px؛ تعويم: غادر؛ هامش: 15px
  }
  </ النمط>
  <script>
  $ (وظيفة () {
    // تعيين حجم ماجستير $ ( "#master") .slider ({
      القيمة: 60،
      التوجه: "الأفقي"،
      مجموعة: "دقيقة"،
      تحريك: صحيح
    })؛
    // تعيين الرسم التعادل $ ( "#eq> فترة"). كل (وظيفة () {
      // يقرأ القيمة الأولية من العلامة وإزالة قيمة فار = parseInt ($ (هذا) .text ()، 10)؛
      $ (هذا) .empty (). المتزلج ({
        القيمة: قيمة،
        مجموعة: "دقيقة"،
        تحريك: صحيح،
        الاتجاه: "عمودي"
      })؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P الطبقة = "الافتراضية واجهة المستخدم للدولة، واجهة المستخدم الزاوية عن واجهة المستخدم المساعد-clearfix" على غرار = "الحشو: 4PX؛">
  <الطبقة سبان = "واجهة المستخدم، واجهة المستخدم رمز أيقونة ذات حجم على" النمط = "تعويم: غادر؛ هامش: -2px 5px 0 0؛"> </ SPAN>
  سيد حجم </ P>
 
<شعبة معرف = "سيد" على غرار = "العرض: 260px؛ الهامش: 15px؛"> </ div>
 
<P الطبقة = "عن واجهة المستخدم الزاوية الافتراضية واجهة المستخدم للدولة" على غرار = "الحشو: 4PX، هامش قمة: 4em؛">
  <الطبقة سبان = "واجهة المستخدم، واجهة المستخدم رمز أيقونة إشارة" على غرار = "تعويم: غادر؛ هامش: -2px 5px 0 0؛"> </ SPAN>
  المعادل </ P>
 
<شعبة معرف = "مكافئ">
  <سبان> 88 </ SPAN>
  <سبان> 77 </ SPAN>
  <سبان> 55 </ SPAN>
  <سبان> 33 </ SPAN>
  <سبان> 40 </ SPAN>
  <سبان> 45 </ SPAN>
  <سبان> 70 </ SPAN>
</ div>
 
 
</ الجسم>
</ HTML>

مجموعة المتزلج

إعداد range الخيار هو الصحيح، للحصول على مجموعة من القيم مع اثنين من مقابض السحب. بين مقبض التحكم بلون خلفية مختلفة ملء تشير إلى قيمة الفاصلة اختيارية.

<! 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">
  <script>
  $ (وظيفة () {
    $ ( "# المتزلج المدى") .slider ({
      المدى: صحيح،
      الحد الأدنى: 0،
      الأقصى: 500،
      القيم: [75، 300]،
      الشرائح: وظيفة (الحدث، واجهة المستخدم) {
        $ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1])؛
      }
    })؛
    $ ( "#amount") .val ( "$" + $ ( "# المتزلج المدى") .slider ( "القيم"، 0) +
      "- $" + $ ( "# المتزلج المدى") .slider ( "القيم"، 1))؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "كمية"> السعر المدى: </ التسمية>
  <إدخال نوع = "نص" معرف = "كمية" على غرار = "الحدود: 0؛ اللون: # f6931f؛ الخط الوزن: جريئة؛">
</ P>
 
<شعبة معرف = "المنزلق المدى"> </ div>
 
 
</ الجسم>
</ HTML>

مع أقصى مدى ثابت

تحديد نطاق الحد الأقصى لشريط التمرير، يمكن للمستخدم تحديد الحد الأدنى. وضع range خيار "ماكس".

<! 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">
  <script>
  $ (وظيفة () {
    $ ( "# المتزلج المدى-ماكس") .slider ({
      مجموعة: "الحد الأقصى"،
      الحد الأدنى: 1،
      الحد الأقصى: 10،
      القيمة: 2،
      الشرائح: وظيفة (الحدث، واجهة المستخدم) {
        $ ( "#amount") .val (Ui.value)؛
      }
    })؛
    $ ( "#amount") .val ($ ( "# المتزلج المدى-ماكس") .slider ( "قيمة"))؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "كمية"> الحد الأدنى من عدد الغرف: </ التسمية>
  <إدخال نوع = "نص" معرف = "كمية" على غرار = "الحدود: 0؛ اللون: # f6931f؛ الخط الوزن: جريئة؛">
</ P>
<شعبة معرف = "المنزلق المدى ماكس"> </ div>
 
 
</ الجسم>
</ HTML>

مجموعة مع الحد الأدنى ثابت

الحد الأدنى ثابت نطاق التمرير، يمكن للمستخدم تحديد الحد الأقصى. إعداد range خيار "دقيقة".

<! 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">
  <script>
  $ (وظيفة () {
    $ ( "# المتزلج المدى مين") .slider ({
      مجموعة: "دقيقة"،
      القيمة: 37،
      الحد الأدنى: 1،
      الأقصى: 700،
      الشرائح: وظيفة (الحدث، واجهة المستخدم) {
        $ ( "#amount") .val ( "$" + Ui.value)؛
      }
    })؛
    $ ( "#amount") .val ( "$" + $ ( "# المتزلج المدى مين") .slider ( "قيمة"))؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "كمية"> السعر الأقصى: </ التسمية>
  <إدخال نوع = "نص" معرف = "كمية" على غرار = "الحدود: 0؛ اللون: # f6931f؛ الخط الوزن: جريئة؛">
</ P>
 
<شعبة معرف = "المنزلق المدى مين"> </ div>
 
 
</ الجسم>
</ HTML>

ملزمة لتحديد المنزلق

كيفية ربط شريط التمرير لتحديد عنصر موجود. اختيار تبقى مرئية لإظهار التغييرات. عند تغيير التحديد، تحديث شريط التمرير.

<! 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">
  <script>
  $ (وظيفة () {
    فار تحديد = $ ( "#minbeds")؛
    فار المنزلق = $ ( "<div معرف =" المنزلق "> </ div>") .insertAfter (اختيار) .slider ({
      الحد الأدنى: 1،
      الأقصى: 6،
      مجموعة: "دقيقة"،
      القيمة: حدد [0] .selectedIndex + 1،
      الشرائح: وظيفة (الحدث، واجهة المستخدم) {
        اختر [0] .selectedIndex = ui.value - 1؛
      }
    })؛
    $ ( "#minbeds") .change (وظيفة () {
      slider.slider ( "قيمة"، this.selectedIndex + 1)؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<نموذج معرف = "التحفظ">
  <تسمية ل= "minbeds"> الحد الأدنى لعدد الأسرة </ التسمية>
  <اختر اسم = "minbeds" معرف = "minbeds">
    <خيارات> 1 </ خيار>
    <خيارات> 2 </ خيار>
    <خيارات> 3 </ خيار>
    <خيارات> 4 </ خيار>
    <خيارات> 5 </ خيار>
    <خيارات> 6 </ خيار>
  </ تحديد>
</ النموذج>
 
 
</ الجسم>
</ HTML>

التمرير التمرير

استخدم شريط التمرير لتشغيل تحديد محتوى الصفحة. في هذه الحالة، وأنها قادرة على الحصول على قيمة شريط التمرير.

<! 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">
  <نمط>
  .scroll-الجزء {فيض: السيارات، العرض: 99٪؛ تعويم: غادر؛}
  .scroll المحتوى {عرض: 2440px؛ تعويم: غادر؛}
  .scroll محتوى البند {العرض: 100px؛ الطول: 100px؛ تعويم: غادر؛ هامش: 10px؛ حجم الخط: 3em؛ خط الطول: 96px؛ مواءمة النصوص: مركز؛}
  .scroll بار التفاف {اضحة: غادر؛ الحشو: 0 4PX 0 2px؛ الهامش: 0 -1px -1px -1px؛}
  .scroll بار التفاف .ui المنزلق {خلفية: لا شيء؛ الحدود: 0؛ الطول: 2em؛ الهامش: 0 السيارات؛}
  .scroll بار التفاف .ui مقبض المساعد الوالد {الموقف: النسبية؛ عرض: 100٪؛ الطول: 100٪؛ الهامش: 0 السيارات؛}
  .scroll بار التفاف .ui المنزلق مقبض {العلوي: .2em، الطول: 1.5em؛}
  .scroll بار التفاف .ui المنزلق مقبض .ui-رمز {هامش: السيارات -8px 0؛ الموقف: النسبية، أعلى: 50٪؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    // انتقل لوحة جزء فار scrollPane = $ ( ".scroll-جزء")،
      scrollContent = $ ( ".scroll المحتوى")؛
 
    // إنشاء المنزلق فار التمرير = $ ( ".scroll بار") .slider ({
      الشرائح: وظيفة (الحدث، واجهة المستخدم) {
        إذا (scrollContent.width ()> scrollPane.width ()) {
          scrollContent.css ( "اليسار الهامش"، Math.round (
            ui.value / 100 * (scrollPane.width () - scrollContent.width ())
          ) + "مقصف")؛
        } {شيء آخر
          scrollContent.css ( "اليسار الهامش"، 0)؛
        }
      }
    })؛
 
    // إلحاق رمز لمعالجة فار handleHelper = scrollbar.find ( ".ui المنزلق مقبض")
    .mousedown (وظيفة () {
      scrollbar.width (handleHelper.width ())؛
    })
    .mouseup (وظيفة () {
      scrollbar.width ( "100٪")؛
    })
    .append ( "<تمتد الطبقة =" واجهة المستخدم، واجهة المستخدم رمز أيقونة منقط-الرأسي قبضة '> </ SPAN> ")
    .wrap ( "<div الطبقة =" واجهة المستخدم مقبض المساعد الوالد "> </ div>") .parent ()؛
 
    // منذ مقبض التمرير التمرير، تغيير لإخفاء جزء تجاوز scrollPane.css ( "تجاوز"، "مخفي")؛
 
    // وفقا لتعريف بعد التمرير من قبل نسبة من حجم شريط التمرير وsizeScrollbar وظيفة مقبض () {
      فار الباقي = scrollContent.width () - scrollPane.width ()؛
      فار نسبة = الباقي / scrollContent.width ()؛
      فار handleSize = scrollPane.width () - (نسبة * scrollPane.width ())؛
      scrollbar.find ( ".ui المنزلق مقبض"). المغلق ({
        عرض: handleSize،
        "اليسار الهامش": -handleSize / 2
      })؛
      handleHelper.width ( "") .width (scrollbar.width () - handleSize)؛
    }
 
    // القائم على المحتوى موقف التمرير، إعادة تعيين قيمة resetValue وظيفة شريط التمرير () {
      فار الباقي = scrollPane.width () - scrollContent.width ()؛
      فار leftVal = scrollContent.css ( "اليسار الهامش") === "لصناعة السيارات" 0 ؟:
        parseInt (scrollContent.css ( "اليسار الهامش"))؛
      نسبة فار = Math.round (leftVal / تبقى * 100)؛
      scrollbar.slider ( "قيمة"، والنسبة المئوية)؛
    }
 
    // إذا المنزلق هو 100٪، وزيادة النافذة، وreflowContent عرض وظيفة () {
        فار تبين = scrollContent.width () + parseInt ( "اليسار الهامش" scrollContent.css ()، 10)؛
        الفجوة فار = scrollPane.width () - تظهر.
        إذا (فجوة> 0) {
          scrollContent.css ( "الهامش الأيسر"، parseInt (scrollContent.css ( "هامش اليسار")، 10) + الفجوة)؛
        }
    }
 
    // تغير مقبض عند موضع الإطار التكبير $ (إطار) .resize (وظيفة () {
      resetValue ()؛
      sizeScrollbar ()؛
      reflowContent ()؛
    })؛
    // تهيئة حجم شريط التمرير setTimeout (sizeScrollbar، 10)؛ // السفاري مهلة})؛
  </ script>
</ رئيس>
<body>
 
<div الطبقة = "التمرير-الجزء-واجهة المستخدم واجهة المستخدم التطبيق المصغر تطبيق مصغر-رأس واجهة المستخدم الزاوية للجميع">
  <div الطبقة = "التمرير المحتوى">
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 1 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 2 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 3 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 4 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 5 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 6 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 7 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 8 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 9 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 10 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 11 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 12 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 13 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 14 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 15 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 16 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 17 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 18 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 19 </ div>
    <div الطبقة = "التمرير المحتوى البند اجهة المستخدم القطعة-رأس"> 20 </ div>
  </ div>
  <div الطبقة = "شريط التمرير التفاف واجهة المستخدم القطعة-المحتوى واجهة المستخدم أسفل الزاوية">
    <div الطبقة = "شريط التمرير"> </ div>
  </ div>
</ div>
 
 
</ الجسم>
</ HTML>

محاذاة زيادة

بواسطة step تعيين الخيار إلى منزلق صحيح لتعيين قيمة الزيادة هي عادة المقسوم أقصى المنزلق. الزيادة الافتراضية هي 1.

<! 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">
  <script>
  $ (وظيفة () {
    $ ( "#slider") .slider ({
      القيمة: 100،
      الحد الأدنى: 0،
      الأقصى: 500،
      الخطوة: 50،
      الشرائح: وظيفة (الحدث، واجهة المستخدم) {
        $ ( "#amount") .val ( "$" + Ui.value)؛
      }
    })؛
    $ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "القيمة"))؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "كمية"> مبلغ التبرع (50 $ الزيادات): </ التسمية>
  <إدخال نوع = "نص" معرف = "كمية" على غرار = "الحدود: 0؛ اللون: # f6931f؛ الخط الوزن: جريئة؛">
</ P>
 
<شعبة معرف = "المنزلق"> </ div>
 
 
</ الجسم>
</ HTML>

مجموعة العمودي المنزلق

تغيير نطاق اتجاه عمودي على شريط التمرير. بواسطة .height() تعيين قيمة الارتفاع، أو تعيين ارتفاع كتبها CSS، وتحديد orientation الخيارات ل"عمودي".

<! 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">
  <script>
  $ (وظيفة () {
    $ ( "# المتزلج المدى") .slider ({
      التوجه: "العمودي"،
      المدى: صحيح،
      القيم: [17، 67]،
      الشرائح: وظيفة (الحدث، واجهة المستخدم) {
        $ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1])؛
      }
    })؛
    $ ( "#amount") .val ( "$" + $ ( "# المتزلج المدى") .slider ( "القيم"، 0) +
      "- $" + $ ( "# المتزلج المدى") .slider ( "القيم"، 1))؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "كمية"> أهداف المبيعات (بالملايين): </ التسمية>
  <إدخال نوع = "نص" معرف = "كمية" على غرار = "الحدود: 0؛ اللون: # f6931f؛ الخط الوزن: جريئة؛">
</ P>
 
<شعبة معرف = "المنزلق المدى" على غرار = "الارتفاع: 250px؛"> </ div>
 
 
</ الجسم>
</ HTML>

التمرير العمودي

تغيير اتجاه التمرير رأسيا. بواسطة .height() تعيين قيمة الارتفاع، أو تعيين ارتفاع كتبها CSS، وتحديد orientation الخيارات ل"عمودي".

<! 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">
  <script>
  $ (وظيفة () {
    $ ( "# المتزلج العمودي") .slider ({
      التوجه: "العمودي"،
      مجموعة: "دقيقة"،
      الحد الأدنى: 0،
      الأقصى: 100،
      القيمة: 60،
      الشرائح: وظيفة (الحدث، واجهة المستخدم) {
        $ ( "#amount") .val (Ui.value)؛
      }
    })؛
    $ ( "#amount") .val ($ ( "# المتزلج العمودي") .slider ( "قيمة"))؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "كمية"> المجلد: </ التسمية>
  <إدخال نوع = "نص" معرف = "كمية" على غرار = "الحدود: 0؛ اللون: # f6931f؛ الخط الوزن: جريئة؛">
</ P>
 
<شعبة معرف = "شريط التمرير العمودي" على غرار = "الارتفاع: 200px؛"> </ div>
 
 
</ الجسم>
</ HTML>