ตัวอย่างเช่น jQuery UI - Slider (Slider) คืออะไร และใช้งานอย่างไร?

Q: ตัวอย่างเช่น jQuery UI - Slider (Slider) คืออะไร และใช้งานอย่างไร?

ลากจับเพื่อเลือกค่า

jQuery UI หลักสูตร
jQuery UI กระทู้
jQuery UI ห้องสมุดองค์ประกอบ
jQuery UI คู่มืออ้างอิง
jQuery UI ตัวอย่าง

บทช่วยสอน ตัวอย่างเช่น jQuery UI - Slider (Slider) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ฟังก์ชั่นเริ่มต้น,ตัวเลือกสี,ใหญ่ของเลื่อน,ช่วง Slider,กับช่วงสูงสุดคงที่,ช่วงที่มีขั้นต่ำคงที่,ที่ถูกผูกไว้เพื่อเลือกเลื่อน,เลื่อนแถบเลื่อน,ตําแหน่งเพิ่มขึ้น,ช่วงแนวตั้งเลื่อน,เลื่อนแนวตั้ง,

ตัวอย่างเช่น jQuery UI - Slider (Slider)

ก่อนหน้านี้: jQuery UI เช่น - ความคืบหน้าบาร์ (ProgressBar)

ถัดไป: ตัวอย่างเช่น jQuery UI - Rotator (ปินเนอร์)

ลากจับเพื่อเลือกค่า

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

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

เลื่อนพื้นฐานคือแนวนอนและมีที่จับเดียวสามารถย้ายด้วยปุ่มเมาส์หรือลูกศร

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - ฟังก์ชั่นเริ่มต้น </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#slider") .slider ();
  });
  </ script>
</ head>
<body>
 
<div id = "เลื่อน"> </ div>
 
 
</ body>
</ html>

ตัวเลือกสี

การรวมกันของสามเลื่อนการสร้างตัวเลือกสี RGB ที่เรียบง่าย

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - เลือกสี </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #red, #green, #blue {
    ลอย: ด้านซ้าย;
    ความชัดเจน: ซ้าย;
    width: 300px;
    margin: 15px;
  }
  #swatch {
    ความกว้าง: 120px;
    ความสูง: 100px;
    ขอบด้านบน: 18px;
    ขอบซ้าย: 350px;
    background-image: none;
  }
  #red .ui เลื่อนช่วง {พื้นหลัง: # ef2929;}
  #red .ui เลื่อนจับ {border-color: # ef2929;}
  #green .ui เลื่อนช่วง {พื้นหลัง: # 8ae234;}
  #green .ui เลื่อนจับ {border-color: # 8ae234;}
  #blue .ui เลื่อนช่วง {พื้นหลัง: # 729fcf;}
  #blue .ui เลื่อนจับ {border-color: # 729fcf;}
  </ style>
  <script>
  ฟังก์ชั่น hexFromRGB (R, G, B) {
    var hex = [
      r.toString (16)
      g.toString (16)
      b.toString (16)
    ];
    $ .each (Hex, ฟังก์ชั่น (NR, Val) {
      ถ้า (val.length === 1) {
        ฐานสิบหก [NR] = "0" + วาล;
      }
    });
    กลับ hex.join ( "") .toUpperCase ();
  }
  ฟังก์ชั่น refreshSwatch () {
    var สีแดง = $ ( "#red") .slider ( "คุ้มค่า")
      สีเขียว = $ ( "#green") .slider ( "คุ้มค่า")
      สีฟ้า = $ ( "#blue") .slider ( "คุ้มค่า")
      ซวย = hexFromRGB (สีแดง, สีเขียว, สีฟ้า);
    $ ( "#swatch") .css ( "background-color", "#" + Hex);
  }
  $ (ฟังก์ชั่น () {
    $ ( "#red, #green, #blue") .slider ({
      ปฐมนิเทศ: "แนวนอน"
      ช่วง "นาที"
      Max: 255
      มูลค่า 127,
      Slide: refreshSwatch,
      การเปลี่ยนแปลง: refreshSwatch
    });
    $ ( "#red") .slider ( "Value", 255);
    $ ( "#green") .slider ( "Value", 140);
    $ ( "#blue") .slider ( "Value", 60);
  });
  </ script>
</ head>
<ระดับร่างกาย = "UI-Widget เนื้อหา" style = "border: 0;">
 
<p class = "UI-รัฐเริ่มต้น UI-มุมทุก UI-ผู้ช่วย clearfix" style = "padding: 4px;">
  <span class = "UI-ไอคอน UI-ไอคอนดินสอ" style = "ลอย: ด้านซ้าย; margin: 5px -2px 0 0;"> </ span>
  เลือกสีอย่างง่าย </ p>
 
<div id = "สีแดง"> </ div>
<div id = "สีเขียว"> </ div>
<div id = "สีฟ้า"> </ div>
 
<div id = "สวอตช์" class = "UI-Widget เนื้อหา UI-มุมทั้งหมด"> </ div>
 
 
</ body>
</ html>

ใหญ่ของเลื่อน

การรวมกันของแถบเลื่อนแนวนอนและแนวแต่ละคนมีตัวเลือกของตัวเองเพื่อสร้างเครื่องเล่นเพลง UI

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - เลื่อน </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  ช่วง #eq {
    ความสูง: 120px; ลอย: ด้านซ้าย; margin: 15px
  }
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    // การตั้งค่าระดับเสียงโท $ ( "#master") .slider ({
      คุ้มค่า: 60,
      ปฐมนิเทศ: "แนวนอน"
      ช่วง "นาที"
      ภาพเคลื่อนไหว: จริง
    });
    // ตั้งควอไลเซอร์กราฟิก $ ( "#eq> ช่วง") .each (ฟังก์ชั่น () {
      // อ่านค่าเริ่มต้นจากแท็กและลบ var value = parseInt ($ (นี้) .Text (), 10);
      $ (นี้) .empty (). Slider ({
        มูลค่าค่า
        ช่วง "นาที"
        ภาพเคลื่อนไหว: จริง
        ปฐมนิเทศ: "แนวตั้ง"
      });
    });
  });
  </ script>
</ head>
<body>
 
<p class = "UI-รัฐเริ่มต้น UI-มุมทุก UI-ผู้ช่วย clearfix" style = "padding: 4px;">
  <ระดับ Span = "UI-ไอคอน UI-ไอคอนปริมาณที่" style = "ลอย: ด้านซ้าย; margin: 5px -2px 0 0;"> </ span>
  ระดับเสียงหลัก </ p>
 
<div id = "ต้นแบบ" style = "width: 260px; margin: 15px;"> </ div>
 
<p class = "UI-รัฐเริ่มต้น UI-มุมทุกคน" style = "padding: 4px; ขอบด้านบน: 4em;">
  <ระดับ Span = "UI-ไอคอน UI-ไอคอนสัญญาณ" style = "ลอย: ด้านซ้าย; margin: 5px -2px 0 0;"> </ span>
  กราฟฟิคควอไลเซอร์ </ p>
 
<div id = "EQ">
  <span> 88 </ span>
  <span> 77 </ span>
  <span> 55 </ span>
  <span> 33 </ span>
  <span> 40 </ span>
  <span> 45 </ span>
  <span> 70 </ span>
</ div>
 
 
</ body>
</ html>

ช่วง Slider

การตั้งค่า range ตัวเลือกที่เป็นความจริงที่จะได้รับช่วงของค่าที่มีสองลากจับ ระหว่างการจัดการการควบคุมที่มีสีพื้นหลังที่แตกต่างกันกรอกข้อมูลเพื่อระบุค่าของช่วงเป็นตัวเลือก

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - ช่วงเลื่อน </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "# Slider ช่วง") .slider ({
      ช่วง: จริง
      นาที: 0
      Max: 500
      ค่า: [75, 300]
      Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
        $ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
      }
    });
    $ ( "#amount") .val ( "$" + $ ( "# Slider ช่วง") .slider ( "ค่า", 0) +
      "- $" + $ ( "# Slider ช่วง") .slider ( "ค่า", 1));
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "จำนวน"> ช่วงราคา: </ label>
  <ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
 
<div id = "เลื่อนช่วง"> </ div>
 
 
</ body>
</ html>

กับช่วงสูงสุดคงที่

ซ่อมช่วงสูงสุดของการเลื่อนผู้ใช้สามารถเลือกขั้นต่ำ การตั้งค่า range ตัวเลือกที่จะ "แม็กซ์"

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - ช่วงที่มีสูงสุดคงที่ </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "# Slider ช่วง-Max") .slider ({
      ช่วง: "แม็กซ์"
      นาที: 1
      แม็กซ์: 10
      มูลค่า: 2,
      Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
        $ ( "#amount") .val (Ui.value);
      }
    });
    $ ( "#amount") .val ($ ( "# Slider ช่วง-Max") .slider ( "ค่า"));
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "จำนวน"> จำนวนขั้นต่ำของห้องพัก: </ label>
  <ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
<div id = "เลื่อนช่วง-Max"> </ div>
 
 
</ body>
</ html>

ช่วงที่มีขั้นต่ำคงที่

ขั้นต่ำคงที่เลื่อนช่วงผู้ใช้สามารถเลือกสูงสุด การตั้งค่า range ตัวเลือก "นาที"

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - ช่วงขั้นต่ำคงที่ </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "# Slider ช่วงนาที") .slider ({
      ช่วง "นาที"
      คุ้มค่า: 37,
      นาที: 1
      Max: 700
      Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
        $ ( "#amount") .val ( "$" + Ui.value);
      }
    });
    $ ( "#amount") .val ( "$" + $ ( "# Slider ช่วงนาที") .slider ( "ค่า"));
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "จำนวน"> ราคาสูงสุด: </ label>
  <ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
 
<div id = "เลื่อนช่วงนาที"> </ div>
 
 
</ body>
</ html>

ที่ถูกผูกไว้เพื่อเลือกเลื่อน

วิธีการผูกเลื่อนเพื่อเลือกองค์ประกอบที่มีอยู่ เลือกยังคงมองเห็นเพื่อแสดงการเปลี่ยนแปลง เมื่อมีการเปลี่ยนแปลงการเลือกอัปเดตตัวเลื่อน

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - ถูกผูกไว้เพื่อเลือกเลื่อน </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (ฟังก์ชั่น () {
    var เลือก = $ ( "#minbeds");
    var เลื่อน = $ ( "<div id = 'เลื่อน'> </ div>") .insertAfter (เลือก) .slider ({
      นาที: 1
      Max: 6
      ช่วง "นาที"
      คุ้มค่า: เลือก [0] .selectedIndex + 1,
      Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
        เลือก [0] .selectedIndex = ui.value - 1;
      }
    });
    $ ( "#minbeds") .change (ฟังก์ชั่น () {
      slider.slider ( "คุ้มค่า" this.selectedIndex + 1);
    });
  });
  </ script>
</ head>
<body>
 
<form id = "จองห้องพัก">
  <label สำหรับ = "minbeds"> จำนวนขั้นต่ำของเตียง </ label>
  <select name = "minbeds" id = "minbeds">
    <option> 1 </ option>
    <option> 2 </ option>
    <option> 3 </ option>
    <option> 4 </ option>
    <option> 5 </ option>
    <option> 6 </ option>
  </ เลือก>
</ form>
 
 
</ body>
</ html>

เลื่อนแถบเลื่อน

ใช้แถบเลื่อนเพื่อดำเนินการค้นหาเนื้อหาของหน้าเว็บ ในกรณีนี้มันสามารถที่จะได้รับค่าของแถบเลื่อนที่

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - เลื่อนแถบเลื่อน </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  .scroll บานหน้าต่าง {ล้น: อัตโนมัติความกว้าง: 99%; ลอย: ด้านซ้าย;}
  .scroll เนื้อหา {กว้าง: 2440px; ลอย: ด้านซ้าย;}
  .scroll เนื้อหารายการ {กว้าง: 100px; ความสูง: 100px; ลอย: ด้านซ้าย; margin: 10px; font-size: 3em; line-height: 96 พิกเซล; text-align: ศูนย์;}
  .scroll บาร์ห่อ {ชัดเจนซ้าย; padding: 0 0 4px 2px; margin: 0 -1px -1px -1px;}
  .scroll บาร์ห่อ .ui เลื่อน {พื้นหลัง: none; ชายแดน: 0; ความสูง: 2em; margin: 0 อัตโนมัติ;}
  .scroll บาร์ห่อ .ui จับผู้ช่วยผู้ปกครอง {ตำแหน่ง: ญาติความกว้าง: 100%; ความสูง: 100%; margin: 0 อัตโนมัติ;}
  .scroll บาร์ห่อ .ui เลื่อนจับ {ด้านบน: .2em; ความสูง: 1.5em;}
  .scroll บาร์ห่อ .ui เลื่อนจับ .ui ไอคอน {margin: -8px อัตโนมัติ 0; ตำแหน่ง: ญาติ; ด้านบน: 50%;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    // เลื่อนแผงส่วน var scrollPane = $ ( ".scroll บาน")
      scrollContent = $ ( ".scroll เนื้อหา");
 
    // สร้างเลื่อนแถบเลื่อน var = $ ( ".scroll บาร์") .slider ({
      Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
        ถ้า (scrollContent.width ()> scrollPane.width ()) {
          scrollContent.css ( "ขอบซ้าย", Math.Round (
            ui.value / 100 * (scrollPane.width () - scrollContent.width ())
          ) + "Px");
        } else {
          scrollContent.css ( "ขอบซ้าย", 0);
        }
      }
    });
 
    // ผนวกไอคอนในการประมวลผล var handleHelper = scrollbar.find ( ".ui เลื่อนจัดการ")
    .mousedown (ฟังก์ชั่น () {
      scrollbar.width (handleHelper.width ());
    })
    .mouseup (ฟังก์ชั่น () {
      scrollbar.width ( "100%");
    })
    .append ( "<ระดับช่วง = 'UI-ไอคอน UI-ไอคอนจับจุดแนวตั้ง"> </ span> ")
    .wrap ( "<div ชั้น = 'UI-จับผู้ช่วยผู้ปกครอง"> </ div> ") .parent ();
 
    // ตั้งแต่เลื่อนจับเลื่อนเปลี่ยนไปซ่อนส่วนล้น scrollPane.css ( "ล้น", "ซ่อน");
 
    // ตามระยะทางเลื่อนจะถูกกำหนดโดยอัตราส่วนของขนาดของแถบเลื่อนและฟังก์ชั่น sizeScrollbar ด้ามจับ () {
      var เหลือ = scrollContent.width () - scrollPane.width ();
      สัดส่วน var = ที่เหลือ / scrollContent.width ();
      var handleSize = scrollPane.width () - (สัดส่วน * scrollPane.width ());
      scrollbar.find ( ".ui เลื่อนจัดการ") .css ({
        ความกว้าง: handleSize,
        "ขอบซ้าย": -handleSize / 2
      });
      handleHelper.width ( "") ความกว้าง (scrollbar.width () - handleSize);
    }
 
    // ตามเนื้อหาเลื่อนตำแหน่งรีเซ็ตค่าของฟังก์ชั่น resetValue แถบเลื่อน () {
      var เหลือ = scrollPane.width () - scrollContent.width ();
      var leftVal = scrollContent.css ( "ขอบซ้าย") === "อัตโนมัติ" 0 ?:
        parseInt (scrollContent.css ( "ขอบซ้าย"));
      ร้อยละ var = Math.Round (leftVal / ที่เหลือ * 100);
      scrollbar.slider ( "ค่า" ร้อยละ);
    }
 
    // ถ้าเลื่อนเป็น 100% และเพิ่มขึ้นหน้าต่างที่ reflowContent ฟังก์ชั่นการแสดงผล () {
        var แสดง = scrollContent.width () + parseInt (scrollContent.css ( "ขอบซ้าย"), 10);
        ช่องว่าง var = scrollPane.width () - แสดง;
        (ถ้ามีช่องว่าง> 0) {
          scrollContent.css ( "ขอบซ้าย", parseInt (scrollContent.css ( "ขอบซ้าย"), 10) + ช่องว่าง);
        }
    }
 
    // การเปลี่ยนแปลงจับเมื่อตำแหน่งหน้าต่างซูม $ (หน้าต่าง) .resize (ฟังก์ชั่น () {
      resetValue ();
      sizeScrollbar ();
      reflowContent ();
    });
    // เริ่มต้นขนาดเลื่อน setTimeout (sizeScrollbar, 10); // ซาฟารีหมดเวลา});
  </ script>
</ head>
<body>
 
<div class = "เลื่อนบานหน้าต่าง UI-Widget UI-Widget หัว UI-มุมทั้งหมด">
  <div class = "เลื่อนเนื้อหา">
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 1 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 2 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 3 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 4 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 5 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 6 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 7 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 8 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 9 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 10 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 11 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 12 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 13 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 14 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 15 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 16 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 17 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 18 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 19 </ div>
    <div class = "เลื่อนเนื้อหารายการ UI-Widget หัว"> 20 </ div>
  </ div>
  <div class = "แถบเลื่อนห่อ UI-Widget เนื้อหา UI-มุมด้านล่าง">
    <div class = "แถบเลื่อน"> </ div>
  </ div>
</ div>
 
 
</ body>
</ html>

ตําแหน่งเพิ่มขึ้น

โดย step ตั้งค่าตัวเลือกเลื่อนจำนวนเต็มในการตั้งค่าที่เพิ่มขึ้นจะเป็นตัวเลื่อนหารสูงสุด การเพิ่มขึ้นของค่าเริ่มต้นคือ 1

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - ชิดเพิ่มขึ้น </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#slider") .slider ({
      มูลค่า: 100
      นาที: 0
      Max: 500
      ขั้นตอนที่: 50
      Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
        $ ( "#amount") .val ( "$" + Ui.value);
      }
    });
    $ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "Value"));
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "จำนวน"> บริจาคจำนวนเงิน ($ 50 เพิ่มขึ้นทีละ): </ label>
  <ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
 
<div id = "เลื่อน"> </ div>
 
 
</ body>
</ html>

ช่วงแนวตั้งเลื่อน

เปลี่ยนขอบเขตของทิศทางที่ตั้งฉากกับตัวเลื่อน โดย .height() กำหนดค่าความสูงหรือตั้งค่าความสูงโดย CSS และตั้ง orientation ตัวเลือกของ "แนวตั้ง"

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - เลื่อนช่วงแนวตั้ง </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "# Slider ช่วง") .slider ({
      ปฐมนิเทศ: "แนวตั้ง"
      ช่วง: จริง
      ค่า: [17, 67]
      Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
        $ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
      }
    });
    $ ( "#amount") .val ( "$" + $ ( "# Slider ช่วง") .slider ( "ค่า", 0) +
      "- $" + $ ( "# Slider ช่วง") .slider ( "ค่า", 1));
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "จำนวน"> เป้าหมายการขาย (ล้าน): </ label>
  <ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
 
<div id = "เลื่อนช่วง" style = "height: 250px;"> </ div>
 
 
</ body>
</ html>

เลื่อนแนวตั้ง

เปลี่ยนทิศทางของการเลื่อนที่เป็นแนวตั้ง โดย .height() กำหนดค่าความสูงหรือตั้งค่าความสูงโดย CSS และตั้ง orientation ตัวเลือกของ "แนวตั้ง"

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI Slider (Slider) - เลื่อนแนวตั้ง </ 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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "# เลื่อนแนวตั้ง") .slider ({
      ปฐมนิเทศ: "แนวตั้ง"
      ช่วง "นาที"
      นาที: 0
      Max: 100
      คุ้มค่า: 60,
      Slide: ฟังก์ชั่น (เหตุการณ์ UI) {
        $ ( "#amount") .val (Ui.value);
      }
    });
    $ ( "#amount") .val ($ ( "# เลื่อนแนวตั้ง") .slider ( "ค่า"));
  });
  </ script>
</ head>
<body>
 
<p>
  <label สำหรับ = "จำนวน"> ปริมาตร: </ label>
  <ประเภทขาเข้า = "text" id = "จำนวน" style = "border: 0; color: # f6931f; font-weight: หนา;">
</ p>
 
<div id = "เลื่อนแนวตั้ง" style = "height: 200px;"> </ div>
 
 
</ body>
</ html>

ก่อนหน้านี้: jQuery UI เช่น - ความคืบหน้าบาร์ (ProgressBar)

ถัดไป: ตัวอย่างเช่น jQuery UI - Rotator (ปินเนอร์)

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง