Latest web development tutorials

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

بواسطة لأعلى / أسفل أزرار الأسهم وتجهيز أساسي، وقيمة المدخلات المحسنة النص وظائف الإدخال.

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

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

محور دوار الافتراضية. 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋转器（Spinner） - 默认功能</title>
  <link rel="stylesheet" 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="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    var spinner = $( "#spinner" ).spinner();
 
    $( "#disable" ).click(function() {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    });
    $( "#destroy" ).click(function() {
      if ( spinner.data( "ui-spinner" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    });
    $( "#getvalue" ).click(function() {
      alert( spinner.spinner( "value" ) );
    });
    $( "#setvalue" ).click(function() {
      spinner.spinner( "value", 5 );
    });
 
    $( "button" ).button();
  });
  </script>
</head>
<body>
 
<p>
  <label for="spinner">选择一个值：</label>
  <input id="spinner" name="value">
</p>
 
<p>
  <button id="disable">切换禁用/启用</button>
  <button id="destroy">切换部件</button>
</p>
 
<p>
  <button id="getvalue">获取值</button>
  <button id="setvalue">设置值为 5</button>
</p>
 
 
</body>
</html>

عملة

هذا المثال هو شكل هبة، مع عدد من الخيارات العملة والدوار. 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋转器（Spinner） - 货币</title>
  <link rel="stylesheet" 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="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#currency" ).change(function() {
      $( "#spinner" ).spinner( "option", "culture", $( this ).val() );
    });
 
    $( "#spinner" ).spinner({
      min: 5,
      max: 2500,
      step: 25,
      start: 1000,
      numberFormat: "C"
    });
  });
  </script>
</head>
<body>
 
<p>
  <label for="currency">要捐款的货币</label>
  <select id="currency" name="currency">
    <option value="en-US">US $</option>
    <option value="de-DE">EUR €</option>
    <option value="ja-JP">YEN ¥</option>
  </select>
</p>
<p>
  <label for="spinner">要捐款的数量：</label>
  <input id="spinner" name="spinner" value="5">
</p>
</body>
</html>

عشري

هذا المثال هو محور دوار عشري. الزيادات من 0.01. كود التعامل مع التغيرات الثقافية وقراءة القيمة الحالية لمحدد عند تغيير الثقافة، فإنه سيتم إعادة تعيين قيمة استنادا إلى نمط من ثقافة جديدة. 

<! DOCTYPE HTML>
<HTML>
<رئيس>
  <محارف ميتا = "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 = "/ ثابت / شبيبة / jqueryui / موارد / العروض / الخارجية / jquery.mousewheel.js"> </ script>
  <سيناريو SRC = "/ ثابت / شبيبة / jqueryui / موارد / العروض / الخارجية / globalize.js"> </ script>
  <سيناريو SRC = "/ / ثابت شبيبة / jqueryui / موارد / العروض / خارجي / globalize.culture.de-DE.js"> </ script>
  <سيناريو SRC = "/ / ثابت شبيبة / jqueryui / موارد / العروض / خارجي / globalize.culture.ja-JP.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#spinner"). الدوار ({
      الخطوة: 0.01،
      numberFormat: "ن"
    })؛
 
    $ ( "#culture") .change (وظيفة () {
      فار الحالية = $ ( "#spinner"). الدوار ( "قيمة")؛
      Globalize.culture ($ (هذا) .val ())؛
      $ ( "#spinner"). الدوار ( "القيمة"، التيار)؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "الدوار"> العشرية محور دوار: </ التسمية>
  <إدخال معرف = "الدوار" اسم = "الدوار" قيمة = "5.06">
</ P>
<P>
  <تسمية ل= "الثقافة"> حدد تنسيقا للثقافة: </ التسمية>
  <تحديد هوية = "الثقافة">
    <قيمة الخيار = "EN-EN" اختيار = "مختارة"> الإنجليزية </ خيار>
    <الخيار قيمة = "دي دي"> الألمانية </ خيار>
    <قيمة الخيار = "جا-JP"> اليابانية </ خيار>
  </ تحديد>
</ P>
</ الجسم>
</ HTML>

خريطة

خرائط جوجل التكامل، وذلك باستخدام الدوار لتغيير خطوط الطول والعرض. 

<! DOCTYPE HTML>
<HTML>
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم الدوار (الدوار) - خريطة </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "http://maps.google.com/maps/api/js؟sensor=false"> </ script>
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "/ ثابت / شبيبة / jqueryui / موارد / العروض / الخارجية / jquery.mousewheel.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    latlong وظيفة () {
      العودة جديدة google.maps.LatLng ($ ( "خطوط الطول #") فال ()، $ ( "# للغاز الطبيعي المسال") فال () ..)؛
    }
    موقف وظيفة () {
      map.setCenter (latlong ())؛
    }
    $ ( "#lat، #lng"). الدوار ({
      الخطوة: 0،001،
      تغيير: موقف،
      وقف: موقف
    })؛
 
    فار خريطة = google.maps.Map الجديدة ($ ( "# الخريطة") [0]، {
      التكبير: 8،
      مركز: latlong ()،
      mapTypeId: google.maps.MapTypeId.ROADMAP
    })؛
  })؛
  </ script>
  <نمط>
  #map {
    العرض: 500px؛
    الطول: 500px؛
  }
  </ النمط>
</ رئيس>
<body>
 
<تسمية ل= "خطوط الطول"> العرض </ التسمية>
<إدخال معرف = "خطوط الطول" اسم = قيمة "خطوط الطول" = "44.797">
<BR>
<تسمية ل= "للغاز الطبيعي المسال"> خط الطول </ التسمية>
<إدخال معرف = "للغاز الطبيعي المسال" اسم = "للغاز الطبيعي المسال" قيمة = "- 93،278">
 
<شعبة معرف = "الخريطة"> </ div>
</ الجسم>
</ HTML>

فيض

حدود المدورة الفائض من -10 إلى 10. بقيمة 10 أو أكثر، تجاوز إلى -10، والعكس بالعكس. 

<! DOCTYPE HTML>
<HTML>
<رئيس>
  <محارف ميتا = "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 = "/ ثابت / شبيبة / jqueryui / موارد / العروض / الخارجية / jquery.mousewheel.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#spinner"). الدوار ({
      تدور: وظيفة (الحدث، واجهة المستخدم) {
        إذا (ui.value> 10) {
          $ (هذا). الدوار ( "قيمة"، -10)؛
          عودة كاذبة.
        } آخر إذا (ui.value <-10) {
          $ (هذا). الدوار ( "قيمة"، 10)؛
          عودة كاذبة.
        }
      }
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "الدوار"> تحديد قيمة: </ التسمية>
  <إدخال معرف = "الدوار" اسم = "قيمة">
</ P>
</ الجسم>
</ HTML>

وقت

فهي تمتد من أجزاء المدورة المخصصة. استخدام العولمة (العولمة) المكونات في تحليل ودمغ وقت الإخراج مع خطوة مخصصة وخيارات الصفحة. أعلى / أسفل المؤشر لدقائق أعلى / أسفل، صفحة لأعلى / أسفل لساعات الزيادات / التناقص. 

<! DOCTYPE HTML>
<HTML>
<رئيس>
  <محارف ميتا = "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 = "/ ثابت / شبيبة / jqueryui / موارد / العروض / الخارجية / jquery.mousewheel.js"> </ script>
  <سيناريو SRC = "/ ثابت / شبيبة / jqueryui / موارد / العروض / الخارجية / globalize.js"> </ script>
  <سيناريو SRC = "/ / ثابت شبيبة / jqueryui / موارد / العروض / خارجي / globalize.culture.de-DE.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ .widget ( "Ui.timespinner"، $ .ui.spinner، {
    الخيارات: {
      // الخطوة الثانية: 60 * 1000،
      // الصفحة H: 60
    }،
 
    _parse: وظيفة (القيمة) {
      إذا (القيمة تشير typeof === "السلسلة") {
        لديه طابع زمني // إذا (عدد (القيمة) == القيمة) {
          عودة عدد (القيمة)؛
        }
        العودة + Globalize.parseDate (القيمة)؛
      }
      العودة القيمة؛
    }،
 
    _format: وظيفة (القيمة) {
      العودة Globalize.format (جديد تاريخ (قيمة)، "تي")؛
    }
  })؛
 
  $ (وظيفة () {
    $ ( "#spinner") .timespinner ()؛
 
    $ ( "#culture") .change (وظيفة () {
      فار الحالية = $ ( "#spinner") .timespinner ( "قيمة")؛
      Globalize.culture ($ (هذا) .val ())؛
      $ ( "#spinner") .timespinner ( "القيمة"، التيار)؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P>
  <تسمية ل= "الدوار"> الوقت المدورة: </ التسمية>
  <إدخال معرف = "الدوار" اسم = "الدوار" قيمة = "8:30">
</ P>
<P>
  <تسمية ل= "الثقافة"> حدد تنسيقا للثقافة: </ التسمية>
  <تحديد هوية = "الثقافة">
    <قيمة الخيار = "EN-EN" اختيار = "مختارة"> الإنجليزية </ خيار>
    <الخيار قيمة = "دي دي"> الألمانية </ خيار>
  </ تحديد>
</ P>
</ الجسم>
</ HTML>