1. Home
  2. jQuery UI เช่น - Rotator (ปินเนอร์)

บทช่วยสอน jQuery UI เช่น - Rotator (ปินเนอร์) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ฟังก์ชั่นเริ่มต้น,เงินตรา,ทศนิยม,แผนที่,ล้น,เวลา,

jQuery UI เช่น - Rotator (ปินเนอร์)

โดยการขึ้น / ลงปุ่มลูกศรและการประมวลผลที่สำคัญค่าการป้อนข้อมูลที่เพิ่มฟังก์ชั่นการป้อนข้อความ

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับสมาชิกในปินเนอร์ให้ดูที่เอกสาร API สมาชิก Rotator (ปั่น Widget)

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

Rotator เริ่มต้น 

<!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>

เงินตรา

ตัวอย่างนี้เป็นรูปแบบการบริจาคมีจำนวนของตัวเลือกสกุลเงินและ Rotator 

<!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>

ทศนิยม

ตัวอย่างนี้เป็น Rotator ทศนิยม การเพิ่มขึ้นของ 0.01 รหัสการรับมือกับการเปลี่ยนแปลงทางวัฒนธรรมที่จะอ่านค่าปัจจุบันของตัวเลือกเมื่อมีการเปลี่ยนแปลงวัฒนธรรมก็จะรีเซ็ตค่าตามรูปแบบของวัฒนธรรมใหม่ 

<! Doctype html>
<html>
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Rotator (ปินเนอร์) - สิบ </ 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 = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / jquery.mousewheel.js"> </ script>
  <script src = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.js"> </ script>
  <script src = "/ / คง JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.culture.de-DE.js"> </ script>
  <script src = "/ / คง JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.culture.ja-JP.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">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#spinner") .spinner ({
      ขั้นตอนนี้: 0.01,
      NumberFormat: "N"
    });
 
    $ ( "#culture") .change (ฟังก์ชั่น () {
      var ปัจจุบัน = $ ( "#spinner") .spinner ( "คุ้มค่า");
      Globalize.culture ($ (นี้) .val ());
      $ ( "#spinner") .spinner ( "Value" ปัจจุบัน);
    });
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "ปั่น"> ทศนิยม Rotator: </ label>
  <input id = "ปั่น" ชื่อ = "ปั่น" value = "5.06">
</ p>
<p>
  <label สำหรับ = "วัฒนธรรม"> เลือกรูปแบบสำหรับวัฒนธรรม: </ label>
  <เลือก id = "วัฒนธรรม">
    <value option = "en-EN" เลือก = "เลือก"> ภาษาอังกฤษ </ option>
    <value option = "de-DE"> เยอรมัน </ option>
    <value option = "ja-JP"> ญี่ปุ่น </ option>
  </ เลือก>
</ p>
</ body>
</ html>

แผนที่

รวม Google Maps โดยใช้เครื่องปั่นด้ายเพื่อเปลี่ยนละติจูดและลองจิจูด 

<! Doctype html>
<html>
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Rotator (ปินเนอร์) - แผนที่ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "http://maps.google.com/maps/api/js?sensor=false"> </ script>
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / jquery.mousewheel.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">
  <script>
  $ (ฟังก์ชั่น () {
    ฟังก์ชั่น LatLong () {
      กลับมาใหม่ google.maps.LatLng ($ ( "# ลาดพร้าว") Val (), $ ( "# LNG") Val () th );
    }
    ตำแหน่งที่ฟังก์ชั่น () {
      map.setCenter (LatLong ());
    }
    $ ( "#lat, #lng") .spinner ({
      ขั้นตอนที่: 001,
      เปลี่ยน: ตำแหน่ง
      หยุด: ตำแหน่ง
    });
 
    แผนที่ var = google.maps.Map ใหม่ ($ ( "# แผนที่") [0], {
      ซูม: 8
      Center: LatLong ()
      MapTypeId: google.maps.MapTypeId.ROADMAP
    });
  });
  </ script>
  <style>
  #map {
    ความกว้าง: 500px;
    ความสูง: 500px;
  }
  </ style>
</ head>
<body>
 
<label สำหรับ = "ลาดพร้าว"> รุ้ง </ label>
<input id = "ลาดพร้าว" ชื่อ = "ลาดพร้าว" value = "44.797">
ฟรี
<label สำหรับ = "LNG"> ลองจิจูด </ label>
<input id = "LNG" ชื่อ = "LNG" value = "- 93.278">
 
<div id = "แผนที่"> </ div>
</ body>
</ html>

ล้น

ข้อ จำกัด Rotator ล้นจาก -10 ถึง 10 สำหรับค่า 10 หรือมากกว่าล้นถึง -10 และในทางกลับกัน 

<! Doctype html>
<html>
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Rotator (ปินเนอร์) - ล้น </ 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 = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / jquery.mousewheel.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">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#spinner") .spinner ({
      สปิน: ฟังก์ชั่น (เหตุการณ์ UI) {
        ถ้า (ui.value> 10) {
          $ (นี้) .spinner ( "ค่า", -10);
          กลับเท็จ;
        } else if (ui.value <-10) {
          $ (นี้) .spinner ( "ค่า", 10);
          กลับเท็จ;
        }
      }
    });
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "ปั่น"> เลือกค่า: </ label>
  <input id = "ปั่น" name = "ค่า">
</ p>
</ body>
</ html>

เวลา

มันยื่นออกมาจากชิ้นส่วนที่กำหนดเอง Rotator ใช้โลกาภิวัตน์ (Globalization) plug-in ที่จะแยกและการประทับเวลาเอาท์พุทด้วยขั้นตอนที่กำหนดเองและตัวเลือกหน้า ขึ้น / ลงเคอร์เซอร์นาทีขึ้น / ลง, หน้าขึ้น / ลงสำหรับการเพิ่มขึ้นชั่วโมง / ลดลง 

<! Doctype html>
<html>
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Rotator (ปินเนอร์) - เวลา </ 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 = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / jquery.mousewheel.js"> </ script>
  <script src = "/ คงที่ / JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.js"> </ script>
  <script src = "/ / คง JS / jQueryUI / ทรัพยากร / สาธิต / ภายนอก / globalize.culture.de-DE.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">
  <script>
  $ .widget ( "Ui.timespinner", $ .ui.spinner {
    ตัวเลือก: {
      // ขั้นที่สอง: 60 * 1000
      // หน้า H: 60
    }
 
    _parse: ฟังก์ชั่น (ค่า) {
      ถ้า (ค่า typeof === "สตริง") {
        มีการประทับเวลา // ถ้า (จำนวน (ค่า) == ค่า) {
          กลับจำนวน (ค่า);
        }
        กลับ + Globalize.parseDate (คุ้มค่า);
      }
      ค่าตอบแทน;
    }
 
    _format: ฟังก์ชั่น (ค่า) {
      กลับ Globalize.format (วันที่ใหม่ (คุ้มค่า), "T");
    }
  });
 
  $ (ฟังก์ชั่น () {
    $ ( "#spinner") .timespinner ();
 
    $ ( "#culture") .change (ฟังก์ชั่น () {
      var ปัจจุบัน = $ ( "#spinner") .timespinner ( "คุ้มค่า");
      Globalize.culture ($ (นี้) .val ());
      $ ( "#spinner") .timespinner ( "Value" ปัจจุบัน);
    });
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "ปั่น"> เวลา Rotator: </ label>
  <input id = "ปั่น" ชื่อ = "ปั่น" value = "08:30">
</ p>
<p>
  <label สำหรับ = "วัฒนธรรม"> เลือกรูปแบบสำหรับวัฒนธรรม: </ label>
  <เลือก id = "วัฒนธรรม">
    <value option = "en-EN" เลือก = "เลือก"> ภาษาอังกฤษ </ option>
    <value option = "de-DE"> เยอรมัน </ option>
  </ เลือก>
</ p>
</ body>
</ html>

บทแนะนำยอดนิยม

Contact US

jQuery UI เช่น - Rotator (ปินเนอร์)
10/30