jQuery UI เช่น - ปุ่ม (ปุ่ม)

ก่อนหน้านี้: ตัวอย่างเช่น jQuery UI - โดยอัตโนมัติ (การเติมข้อความอัตโนมัติ)

ถัดไป: jQuery UI เช่น - เลือกวันที่ (datepicker)

ด้วยความโฉบเหมาะสมการใช้งาน (เลื่อน) และเปิดใช้งาน (Active) รูปแบบที่สามารถแกนปุ่มเพื่อเพิ่มองค์ประกอบของแบบฟอร์มมาตรฐาน (เช่นปุ่ม, กล่องใส่สมอ) ฟังก์ชั่น

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

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

ตัวอย่างของเครื่องหมายที่สามารถใช้สำหรับปุ่ม: องค์ประกอบของปุ่มประเภทขององค์ประกอบการป้อนข้อมูลและการส่งสมอ

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI ปุ่ม (ปุ่ม) - ฟังก์ชั่นเริ่มต้น </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "ป้อน [ประเภท = ส่ง], A, ปุ่ม")
      .button ()
      จำนวนคลิก (ฟังก์ชั่น (event) {
        event.preventDefault ();
      });
  });
  </ script>
</ head>
<body>
 
<ปุ่ม> องค์ประกอบของปุ่ม </ ปุ่ม>
 
<ประเภทขาเข้า = "ส่ง" value = "ส่งปุ่ม">
 
<a href="#"> สมอ </a>
 
 
</ body>
</ html>

ช่องทำเครื่องหมาย

โดยวิธีการของกล่องปุ่มตรวจสอบเป็นรูปแบบปุ่มสลับ องค์ประกอบที่เกี่ยวข้องกับป้ายกล่องเป็นข้อความที่ปุ่ม

ในกรณีนี้โดยเรียกร้องให้ประชาชนภาชนะ .buttonset() ที่แสดงให้เห็นรูปแบบการแสดงผลสามปุ่มกล่อง

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> ปุ่ม jQuery UI (ปุ่ม) - ช่องทำเครื่องหมาย </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "#check") .button ();
    $ ( "#format") .buttonset ();
  });
  </ script>
  <style>
  #format {ขอบด้านบน: 2em;}
  </ style>
</ head>
<body>
 
<ประเภทขาเข้า = "ช่องทำเครื่องหมาย" id = "ตรวจสอบ"> <ฉลาก = "ตรวจสอบ"> สวิทช์ </ label>
 
<div id = "รูปแบบ">
  <ประเภทขาเข้า = "ช่องทำเครื่องหมาย" id = "CHECK1"> <ฉลาก = "CHECK1"> B </ label>
  <ประเภทขาเข้า = "ช่องทำเครื่องหมาย" id = "check2"> <ฉลาก = "check2"> ผม </ label>
  <ประเภทขาเข้า = "ช่องทำเครื่องหมาย" id = "check3"> <ฉลาก = "check3"> U </ label>
</ div>
 
 
</ body>
</ html>

ไอคอน

บางคนที่มีชุดต่างๆของข้อความและไอคอนปุ่ม

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI ปุ่ม (ปุ่ม) - ไอคอน </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "ปุ่ม: ครั้งแรก") .button ({
      ไอคอน: {
        หลัก: "UI-ไอคอนล็อค"
      }
      ข้อความ: เท็จ
    }). ถัดไป (). ปุ่ม ({
      ไอคอน: {
        หลัก: "UI-ไอคอนล็อค"
      }
    }). ถัดไป (). ปุ่ม ({
      ไอคอน: {
        หลัก: "UI-ไอคอนเกียร์"
        รอง: "UI-ไอคอนสามเหลี่ยม-1-S"
      }
    }). ถัดไป (). ปุ่ม ({
      ไอคอน: {
        หลัก: "UI-ไอคอนเกียร์"
        รอง: "UI-ไอคอนสามเหลี่ยม-1-S"
      }
      ข้อความ: เท็จ
    });
  });
  </ script>
</ head>
<body>
 
<ปุ่ม> ปุ่มไอคอนที่มีเพียง </ ปุ่ม>
<ปุ่ม> ปุ่มไอคอนบนซ้าย </ ปุ่ม>
<> ปุ่มปุ่มที่มีสองไอคอน </ ปุ่ม>
<> ปุ่มสองปุ่มที่มีไอคอนข้อความได้โดยไม่ต้อง </ ปุ่ม>
 
 
</ body>
</ html>

วิทยุ

สามปุ่มเข้าปุ่ม

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> ปุ่ม UI jQuery (ปุ่ม) - วิทยุ </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "#radio") .buttonset ();
  });
  </ script>
</ head>
<body>
 
<form>
  <div id = "วิทยุ">
    <ประเภทขาเข้า = "วิทยุ" id = "Radio1" ชื่อ = "วิทยุ"> <ฉลาก = "Radio1"> เลือก 1 </ label>
    <ประเภทขาเข้า = "วิทยุ" id = "radio2" ชื่อ = "วิทยุ" การตรวจสอบ = "การตรวจสอบ"> <ฉลาก = "radio2"> เลือก 2 </ label>
    <ประเภทขาเข้า = "วิทยุ" id = "radio3" ชื่อ = "วิทยุ"> <ฉลาก = "radio3"> เลือก 3 </ label>
  </ div>
</ form>
 
 
</ body>
</ html>

ปุ่มสปลิต

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI ปุ่ม (ปุ่ม) - ปุ่ม Split </ 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>
    .ui เมนู {position: absolute; กว้าง: 100px;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#rerun")
      .button ()
      จำนวนคลิก (ฟังก์ชั่น () {
        แจ้งเตือน ( "วิ่งการดำเนินการที่ผ่านมา");
      })
      .next ()
        .button ({
          ข้อความ: เท็จ
          ไอคอน: {
            หลัก: "UI-ไอคอนสามเหลี่ยม-1-S"
          }
        })
        จำนวนคลิก (ฟังก์ชั่น () {
          เมนู var = $ (นี้) .parent. () ติด. () การแสดง (). ตำแหน่ง ({
            ฉัน: "บนซ้าย"
            ที่: "ด้านล่างซ้าย"
            ของนี้
          });
          $ (เอกสาร) .one ( "คลิก" ฟังก์ชั่น () {
            menu.hide ();
          });
          กลับเท็จ;
        })
        .parent ()
          .buttonset ()
          .next ()
            .hide ()
            .menu ();
  });
  </ script>
</ head>
<body>
 
<div>
  <div>
    <ปุ่ม id = "วิ่ง"> เรียกการกระทำที่ผ่านมา </ ปุ่ม>
    <ปุ่ม id = "เลือก"> เลือกการดำเนินการ </ ปุ่ม>
  </ div>
  <ul>
    <li> <a href="#"> เปิด ... </a> </ li>
    <li> <a href="#"> บันทึก </a> </ li>
    <li> <a href="#"> ลบ </a> </ li>
  </ ul>
</ div>
 
 
</ body>
</ html>

แถบเครื่องมือ

แถบเครื่องมือเครื่องเล่นมัลติมีเดีย ดูตามเครื่องหมาย: องค์ประกอบปุ่มบางปุ่ม Shuffle เป็นช่องทำเครื่องหมายสำหรับประเภทของการป้อนข้อมูลที่เป็นตัวเลือกซ้ำสามประเภทของการป้อนข้อมูลวิทยุ

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> ปุ่ม UI jQuery (ปุ่ม) - แถบเครื่องมือ </ 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>
  #toolbar {
    padding: 4px;
    จอแสดงผล: อินไลน์บล็อก
  }
  / * สนับสนุน: IE7 * /
  * + #toolbar Html {
    จอแสดงผล: อินไลน์;
  }
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#beginning") .button ({
      ข้อความ: เท็จ
      ไอคอน: {
        หลัก: "UI-ไอคอนแสวงหาจุดเริ่มต้น"
      }
    });
    $ ( "#rewind") .button ({
      ข้อความ: เท็จ
      ไอคอน: {
        หลัก: "UI-ไอคอนแสวงหาย้อนกลับ"
      }
    });
    $ ( "#play") .button ({
      ข้อความ: เท็จ
      ไอคอน: {
        หลัก: "UI-ไอคอนการเล่น"
      }
    })
    จำนวนคลิก (ฟังก์ชั่น () {
      ตัวเลือก var;
      ถ้า ($ (นี้) .Text () === "เล่น") {
        ตัวเลือก = {
          ป้าย "หยุด"
          ไอคอน: {
            หลัก: "UI-ไอคอนหยุด"
          }
        };
      } else {
        ตัวเลือก = {
          ป้ายชื่อ: "เล่น"
          ไอคอน: {
            หลัก: "UI-ไอคอนการเล่น"
          }
        };
      }
      $ (นี้) .button ( "ตัวเลือก" ตัวเลือก);
    });
    $ ( "#STOP") .button ({
      ข้อความ: เท็จ
      ไอคอน: {
        หลัก: "UI-ไอคอนหยุด"
      }
    })
    จำนวนคลิก (ฟังก์ชั่น () {
      $ ( "#play") .button ( "ตัวเลือก" {
        ป้ายชื่อ: "เล่น"
        ไอคอน: {
          หลัก: "UI-ไอคอนการเล่น"
        }
      });
    });
    $ ( "#forward") .button ({
      ข้อความ: เท็จ
      ไอคอน: {
        หลัก: "UI-ไอคอนแสวงหาต่อไป"
      }
    });
    $ ( "#END") .button ({
      ข้อความ: เท็จ
      ไอคอน: {
        หลัก: "UI-ไอคอนแสวงหาจบ"
      }
    });
    $ ( "#shuffle") .button ();
    $ ( "#repeat") .buttonset ();
  });
  </ script>
</ head>
<body>
 
<div id = "แถบเครื่องมือ" class = "UI-Widget หัว UI-มุมทั้งหมด">
  <ปุ่ม id = "จุดเริ่มต้น"> เริ่มต้น </ ปุ่ม>
  <ปุ่ม id = "ย้อนกลับ"> ย้อนกลับ </ ปุ่ม>
  <ปุ่ม id = "เล่น"> เล่น </ ปุ่ม>
  <ปุ่ม id = "หยุด"> หยุด </ ปุ่ม>
  <ปุ่ม id = "ไปข้างหน้า"> ข้างหน้าอย่างรวดเร็ว </ ปุ่ม>
  <ปุ่ม id = "จบ"> สิ้น </ ปุ่ม>
 
  <ประเภทขาเข้า = "ช่องทำเครื่องหมาย" id = "สลับ"> <ฉลาก = "สลับ"> สุ่ม </ label>
 
  <span id = "ทำซ้ำ">
    <ประเภทขาเข้า = "วิทยุ" id = "repeat0" name = "ซ้ำ" การตรวจสอบ = "การตรวจสอบ"> <ฉลาก = "repeat0"> ไม่ซ้ำ </ label>
    <ประเภทขาเข้า = "วิทยุ" id = "repeat1" ชื่อ = "ทำซ้ำ"> <ฉลาก = "repeat1"> เมื่อ </ label>
    <ประเภทขาเข้า = "วิทยุ" id = "repeatall" ชื่อ = "ทำซ้ำ"> <ฉลาก = "repeatall"> ทั้งหมด </ label>
  </ span>
</ div>
 
 
</ body>
</ html>

ก่อนหน้านี้: ตัวอย่างเช่น jQuery UI - โดยอัตโนมัติ (การเติมข้อความอัตโนมัติ)

ถัดไป: jQuery UI เช่น - เลือกวันที่ (datepicker)

jQuery UI หลักสูตร

jQuery UI กระทู้

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

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