1. Home
  2. ตัวอย่างเช่น jQuery UI - โต้ตอบ (Dialog)

บทช่วยสอน ตัวอย่างเช่น jQuery UI - โต้ตอบ (Dialog) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ฟังก์ชั่นเริ่มต้น,นิเมชั่น,โหมดพื้นฐาน,ยืนยันคำกริยา,แบบฟอร์มคำกริยา,ข้อความ Modal,

ตัวอย่างเช่น jQuery UI - โต้ตอบ (Dialog)

เปิดเนื้อหาในการซ้อนทับแบบโต้ตอบ

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

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

หน้าต่างข้อความพื้นฐานอยู่ในตำแหน่งที่อยู่ในโซนการรับชมในชั้นฝาครอบผ่าน IFRAME และหน้าเนื้อหาแยกออกจากกัน (เช่นเลือกองค์ประกอบ) มันประกอบด้วยแถบชื่อเรื่องและองค์ประกอบพื้นที่เนื้อหาและสามารถเคลื่อนย้ายปรับขนาดเริ่มต้นด้วยไอคอน 'X' เพื่อปิด 

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การโต้ตอบ (Dialog) - ฟังก์ชั่นเริ่มต้น </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "#dialog") .dialog ();
  });
  </ script>
</ head>
<body>
 
<div id = "โต้ตอบ" title = "โต้ตอบพื้นฐาน">
  <p> นี่คือการเริ่มต้นกล่องโต้ตอบสำหรับการแสดงข้อมูล หน้าต่างที่สามารถเคลื่อนย้ายปรับขนาดเริ่มต้นด้วยไอคอน 'X' เพื่อปิด </ p>
</ div>
 
 
</ body>
</ html>

นิเมชั่น

คุณสามารถระบุลักษณะพิเศษ / ซ่อนแสดงคุณสมบัติการเคลื่อนไหวเพื่อแสดงกล่องโต้ตอบ คุณต้องดูไฟล์ที่แยกต่างหากสำหรับผลที่คุณต้องการที่จะใช้เทคนิคพิเศษ 

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การโต้ตอบ (Dialog) - อะนิเมะ </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "#dialog") .dialog ({
      AutoOpen: เท็จ
      แสดง: {
        ผลกระทบ: "ตาบอด"
        ระยะเวลา: 1000
      }
      ซ่อน: {
        ผลกระทบ: "ระเบิด"
        ระยะเวลา: 1000
      }
    });
 
    $ ( "#opener") จำนวนคลิก (ฟังก์ชั่น () {
      $ ( "#dialog") .dialog ( "เปิด");
    });
  });
  </ script>
</ head>
<body>
 
<div id = "โต้ตอบ" title = "โต้ตอบขั้นพื้นฐาน">
  <p> นี่คือการแสดงภาพเคลื่อนไหวของกล่องโต้ตอบสำหรับการแสดงข้อมูล หน้าต่างที่สามารถเคลื่อนย้ายปรับขนาดเริ่มต้นด้วยไอคอน 'X' เพื่อปิด </ p>
</ div>
 
<ปุ่ม id = "เปิด"> โต้ตอบเปิด </ ปุ่ม>
 
 
</ body>
</ html>

โหมดพื้นฐาน

คำกริยาโต้ตอบส่วนที่เหลือของหน้าเพื่อป้องกันไม่ให้ผู้ใช้ภายนอกของกล่องโต้ตอบการโต้ตอบจนปิดกล่องโต้ตอบ 

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การโต้ตอบ (Dialog) - กิริยาพื้นฐาน </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "# โต้ตอบกิริยา") .dialog ({
      ความสูง: 140,
      กิริยา: จริง
    });
  });
  </ script>
</ head>
<body>
 
<div id = "โต้ตอบกิริยา" title = "ไดอะล็อกคำกริยาพื้นฐาน">
  <p> เพิ่มกิริยาหน้าจอซ้อนทับให้ดูโดดเด่นมากขึ้นโต้ตอบเพราะมันหรี่ให้เนื้อหาอื่น ๆ บนหน้าเว็บ </ p>
</ div>
 
<p> SED หรือเส้นผ่าศูนย์กลาง ID Libero <a href=""> rutrum convallis </a>. แบบพกพา aliquet ราศีสิงห์หรือ Magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, Arcu Felis ultricies วัด, Amet นั่ง auctor Elit อยู่ Lectus. </ p>
 
 
</ body>
</ html>

ยืนยันคำกริยา

ยืนยันการดำเนินการทำลายก็อาจจะเป็นความรู้สึกที่เป็นไปได้ การตั้งค่า modal ตัวเลือกที่จะเป็นจริงและ buttons เพื่อกำหนดตัวเลือกการประถมศึกษาและมัธยมศึกษากระทำของผู้ใช้ 

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การโต้ตอบ (Dialog) - การยืนยันกิริยา </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "# โต้ตอบยืนยัน") .dialog ({
      ปรับขนาด: เท็จ
      ความสูง: 140,
      กิริยา: จริง
      ปุ่ม: {
        "ลบรายการทั้งหมด": ฟังก์ชั่น () {
          $ (นี้) .dialog ( "ใกล้");
        }
        ยกเลิก: ฟังก์ชั่น () {
          $ (นี้) .dialog ( "ใกล้");
        }
      }
    });
  });
  </ script>
</ head>
<body>
 
<div id = "โต้ตอบยืนยัน" title = "ถังขยะ">
  <p> <ระดับช่วง = "UI-ไอคอน UI-ไอคอนแจ้งเตือน" style = "ลอย: ด้านซ้าย; margin: 0 20px 7px 0;"> </ span> รายการเหล่านี้จะถูกลบอย่างถาวรและไม่สามารถกู้คืน คุณแน่ใจหรือไม่? </ p>
</ div>
 
<p> SED หรือเส้นผ่าศูนย์กลาง ID Libero <a href=""> rutrum convallis </a>. แบบพกพา aliquet ราศีสิงห์หรือ Magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, Arcu Felis ultricies วัด, Amet นั่ง auctor Elit อยู่ Lectus. </ p>
 
 
</ body>
</ html>

แบบฟอร์มคำกริยา

Modal กล่องโต้ตอบเพื่อขอให้ผู้ใช้ป้อนข้อมูลในกระบวนการหลายขั้นตอน ฝังตัวอยู่ในรูปแบบแท็กพื้นที่เนื้อหาตั้ง modal ตัวเลือกที่จะเป็นจริงและ buttons เพื่อกำหนดตัวเลือกการประถมศึกษาและมัธยมศึกษากระทำของผู้ใช้ 

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การโต้ตอบ (Dialog) - แบบฟอร์ม Modal </ 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>
    ร่างกาย {font-size: 62.5%;}
    ป้ายใส่ {display: บล็อก;}
    input.text {margin ล่าง: 12px; ความกว้าง: 95%; padding: .4em;}
    fieldset {padding: 0; ชายแดน: 0; ขอบด้านบน: 25 พิกเซล;}
    h1 {font-size: 1.2em; margin: .6em 0;}
    div # ผู้ใช้มี {ความกว้าง: 350px; margin: 20px 0;}
    div # ผู้ใช้มีตาราง {margin: 1em 0; border-ล่มสลาย: การล่มสลายความกว้าง: 100%;}
    div # ผู้ใช้ประกอบด้วย td ตาราง div # ผู้ใช้มีตาราง TH {ชายแดน: #eee 1px ของแข็ง padding: .6em 10px; text-align: ซ้าย;}
    .ui โต้ตอบ .ui รัฐข้อผิดพลาด {padding: .3em;}
    .validateTips {ชายแดน: 1px ของแข็งโปร่งใส; padding: 0.3em;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    ชื่อ var = $ ( "#name")
      อีเมล = $ ( "#email")
      รหัสผ่าน = $ ( "#password")
      allFields = $ ([]) .add (ชื่อ) .add (อีเมล) .add (รหัสผ่าน)
      เคล็ดลับ = $ ( ".validateTips");
 
    updateTips ฟังก์ชั่น (T) {
      เคล็ดลับ
        .Text (T)
        .addClass ( "UI-รัฐไฮไลท์");
      setTimeout (ฟังก์ชั่น () {
        tips.removeClass ( "UI-รัฐเน้น" 1500);
      } 500);
    }
 
    ฟังก์ชั่น checkLength (O, N, นาที, สูงสุด) {
      ถ้า (o.val (). ความยาว> Max || o.val (). ความยาว <นาที) {
        o.addClass ( "UI-รัฐผิดพลาด");
        updateTips ( "" + N + "ต้องอยู่ภายใต้" +
          นาที + "ระหว่าง." "และ" แม็กซ์ + +);
        กลับเท็จ;
      } else {
        กลับจริง;
      }
    }
 
    ฟังก์ชั่น checkRegexp (O, regexp, n) {
      ถ้า (! (regexp.test (o.val ()))) {
        o.addClass ( "UI-รัฐผิดพลาด");
        updateTips (n);
        กลับเท็จ;
      } else {
        กลับจริง;
      }
    }
 
    $ ( "# โต้ตอบแบบ") .dialog ({
      AutoOpen: เท็จ
      ความสูง: 300
      ความกว้าง: 350
      กิริยา: จริง
      ปุ่ม: {
        "สร้างบัญชี": ฟังก์ชั่น () {
          var bValid = true;
          allFields.removeClass ( "UI-รัฐผิดพลาด");
 
          bValid = bValid && checkLength (ชื่อ "ชื่อ", 3, 16);
          bValid = bValid && checkLength (อีเมล์, "อีเมล", 6, 80);
          bValid = bValid && checkLength (รหัสผ่าน "รหัสผ่าน", 5, 16);
 
          bValid = bValid && checkRegexp (ชื่อ / ^ [az] ([0-9a-z _]) + $ / i "ชื่อผู้ใช้ต้อง az, 0-9, ใต้และจะต้องเริ่มต้นด้วยตัวอักษร.");
          // จาก jquery.validate.js (โดย Joern) สนับสนุนโดยสกอตต์อนซาเลซ: http://projects.scottsplayground.com/email_address_validation/
          bValid = bValid && checkRegexp (อีเมล / ^ ((([az] | \ D | [# \ $% & '\ * \ + \ - \ / = \ \ ^ _ `{\ |} ~ !?] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([az] | \ D | [# \ $% & '\ * \ + \ - \ / = \ \!? ^ _` {\ |} ~] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) +) *) | ((\ x22) ((((\ x20 | \ x09) * ( \ x0d \ X0A)) (\ x20? | \ x09) +) (([\ x01- \ x08 \ x0b \ x0c \ x0e- \ x1f \ x7f]? | \ X21 | [\ x23- \ x5b] | [ \ x5d- \ x7e] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (\\ ([\ x01- \ x09 \ x0b \ x0c \ x0d- \ x7f] | [\ u00A0 - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF])))) * (((\ x20 | \ x09) * (\ x0d \ X0A)) (\ x20 | \ x09) +) (\ x22? ))) @ ((([az] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([az] | \ D | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ D | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] | \ D | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([az]. | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([az] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ D | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] |th [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \ $ / i "เช่น UI @ jquery.com ");
          bValid = bValid && checkRegexp (รหัสผ่าน / ^ ([0-9a-za-Z]) + $ / "ฟิลด์รหัสผ่านที่ได้รับอนุญาตเท่านั้น: AZ 0-9");
 
          ถ้า (bValid) {
            $ ( "เนื่องจากจำนวน tbody") .append ( "<tr>" +
              "<td>" + name.val () + "</ td>" +
              "<td>" + email.val () + "</ td>" +
              "<td>" + password.val () + "</ td>" +
            "</ tr>");
            $ (นี้) .dialog ( "ใกล้");
          }
        }
        ยกเลิก: ฟังก์ชั่น () {
          $ (นี้) .dialog ( "ใกล้");
        }
      }
      ใกล้: ฟังก์ชั่น () {
        allFields.val ( "") .removeClass ( "UI-รัฐผิดพลาด");
      }
    });
 
    $ ( "# สร้างผู้ใช้")
      .button ()
      จำนวนคลิก (ฟังก์ชั่น () {
        $ ( "# โต้ตอบแบบ") .dialog ( "เปิด");
      });
  });
  </ script>
</ head>
<body>
 
<div id = "โต้ตอบแบบ" title = "สร้างผู้ใช้ใหม่">
  <p class = "validateTips"> ทุกเขตข้อมูลฟอร์มจะต้อง </ p>
 
  <form>
  <fieldset>
    <label สำหรับ = "ชื่อ"> ชื่อ </ label>
    <ประเภทขาเข้า = "text" name = "ชื่อ" id = "ชื่อ" class = "text UI-Widget เนื้อหา UI-มุมทั้งหมด">
    <label สำหรับ = "อีเมล"> กล่องจดหมาย </ label>
    <ประเภทขาเข้า = "text" name = "อีเมล" id = "อีเมล" value = "" class = "text UI-Widget เนื้อหา UI-มุมทั้งหมด">
    <label สำหรับ = "รหัสผ่าน"> รหัสผ่าน </ label>
    <ประเภทขาเข้า = "รหัสผ่าน" name = "รหัสผ่าน" id = "รหัสผ่าน" value = "" class = "text UI-Widget เนื้อหา UI-มุมทั้งหมด">
  </ fieldset>
  </ form>
</ div>
 
 
<div id = "ผู้ใช้มี" class = "UI-Widget">
  <h1> ใช้ที่มีอยู่: </ h1>
  <table id = "ผู้ใช้" class = "UI-Widget UI-Widget เนื้อหา">
    <thead>
      <ระดับ Tr = "UI-Widget หัว">
        <Th> ชื่อ </ TH>
        <Th> กล่องจดหมาย </ TH>
        <Th> รหัสผ่าน </ TH>
      </ tr>
    </ thead>
    <tbody>
      <tr>
        <td> จอห์นโด </ td>
        <td> john.doe@example.com </ td>
        <td> johndoe1 </ td>
      </ tr>
    </ tbody>
  </ table>
</ div>
<ปุ่ม id = "สร้างผู้ใช้"> สร้างผู้ใช้ใหม่ </ ปุ่ม>
 
 
</ body>
</ html>

ข้อความ Modal

Modal กล่องโต้ตอบเพื่อยืนยันข้อมูลและการกระทำก่อนที่จะดำเนินการต่อไปที่จะดำเนินการ การตั้งค่า modal ตัวเลือกที่จะเป็นจริงและ buttons เพื่อระบุตัวเลือกการดำเนินการหลัก (OK) 

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การโต้ตอบ (Dialog) - ข้อความกิริยา </ 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>
  $ (ฟังก์ชั่น () {
    $ ( "# โต้ตอบข้อความ") .dialog ({
      กิริยา: จริง
      ปุ่ม: {
        ตกลง: ฟังก์ชั่น () {
          $ (นี้) .dialog ( "ใกล้");
        }
      }
    });
  });
  </ script>
</ head>
<body>
 
<div id = "โต้ตอบข้อความ" title = "ดาวน์โหลดเสร็จ">
  <p>
    <ระดับ Span = "UI-ไอคอน UI-ไอคอนวงกลมตรวจสอบ" style = "ลอย: ด้านซ้าย; margin: 0 50px 7px 0;"> </ span>
    ไฟล์ของคุณได้รับการดาวน์โหลดประสบความสำเร็จไปยังโฟลเดอร์
  </ p>
  <p>
    ปัจจุบันใช้พื้นที่จัดเก็บ <b> 36% </ b>
  </ p>
</ div>
 
<p> SED หรือเส้นผ่าศูนย์กลาง ID Libero <a href=""> rutrum convallis </a>. แบบพกพา aliquet ราศีสิงห์หรือ Magna. Phasellus rhoncus faucibus ante. Etiam Bibendum, enim faucibus aliquet rhoncus, Arcu Felis ultricies วัด, Amet นั่ง auctor Elit อยู่ Lectus. </ p>
 
 
</ body>
</ html>

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

Contact US

ตัวอย่างเช่น jQuery UI - โต้ตอบ (Dialog)
10/30