Latest web development tutorials

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

استخدام الماوس لتحديد عنصر واحد أو مجموعة من العناصر.

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

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

تمكين وظائف اختيار أو على مجموعة من العناصر على عنصر DOM. حدد الإدخال عن طريق سحب الماوس. اضغط باستمرار على مفتاح Ctrl لتحديد عدة إدخالات غير متجاورة. 

<! 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">
 
  <نمط>
  #feedback {FONT-SIZE: 1.4em؛}
  #selectable-اختيار .ui {خلفية: # FECA40؛}
  #selectable مختارة .ui {خلفية: # F39814؛ اللون: أبيض؛}
  #selectable {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ العرض: 60٪؛}
  #selectable لى {هامش: 3PX؛ الحشو: 0.4em؛ حجم الخط: 1.4em؛ الطول: 18px؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#selectable") .selectable ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<را معرف = "اختيار">
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 1 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 2 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 3 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 4 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 5 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 6 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 7 </ لى>
</ رأ>
 
 
</ الجسم>
</ HTML>

يتم عرضها على شكل شبكة

دعونا يظهر دخول للاختيار على شكل شبكة، بحيث تستخدم CSS مع نفس الأبعاد وعرض العائمة. 

<! 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">
 
  <نمط>
  #feedback {FONT-SIZE: 1.4em؛}
  #selectable-اختيار .ui {خلفية: # FECA40؛}
  #selectable مختارة .ui {خلفية: # F39814؛ اللون: أبيض؛}
  #selectable {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ العرض: 450px؛}
  #selectable لى {هامش: 3PX؛ الحشو: 1PX، تعويم: غادر؛ العرض: 100px؛ الطول: 80px؛ حجم الخط: 4em؛ مواءمة النصوص: مركز؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#selectable") .selectable ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<را معرف = "اختيار">
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 1 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 2 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 3 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 4 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 5 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 6 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 7 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 8 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 9 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 10 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 11 </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة الافتراضي"> 12 </ لى>
</ رأ>
 
 
</ الجسم>
</ HTML>

التسلسل

كتابة دالة الذي stop عند حدثا الزناد لجمع قيمة المؤشر العناصر المحددة. يتم عرض هذه القيم عن ردود الفعل، أو في شكل سلسلة من نقل البيانات. 

<! 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">
 
  <نمط>
  #feedback {FONT-SIZE: 1.4em؛}
  #selectable-اختيار .ui {خلفية: # FECA40؛}
  #selectable مختارة .ui {خلفية: # F39814؛ اللون: أبيض؛}
  #selectable {قائمة النمط من نوع: لا شيء؛ هامش: 0؛ الحشو: 0؛ العرض: 60٪؛}
  #selectable لى {هامش: 3PX؛ الحشو: 0.4em؛ حجم الخط: 1.4em؛ الطول: 18px؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#selectable") .selectable ({
      وقف: وظيفة () {
        نتيجة فار = $ ( "# حدد-نتيجة") .empty ()؛
        $ ( "المحددة .ui"، هذا). كل (وظيفة () {
          مؤشر فار = $ ( "لي #selectable") .index (هذا)؛
          result.append ( "#" + (مؤشر + 1))؛
        })؛
      }
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P معرف = "ردود الفعل">
<سبان> لقد المختارة: </ SPAN> في <span id = "حدد-نتيجة"> لا </ SPAN>.
</ P>
 
<را معرف = "اختيار">
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 1 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 2 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 3 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 4 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 5 </ لى>
  <لى الطبقة = "واجهة المستخدم القطعة المحتوى"> البند 6 </ لى>
</ رأ>
 
 
</ الجسم>
</ HTML>