Latest web development tutorials

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

مع تحوم المناسب الاستخدام (تحوم) وتفعيل (النشطة) أساليب يمكن تحت عنوان الزر لتعزيز عناصر النموذج القياسية (مثل الأزرار، وصناديق الدخل، ومذيع) وظيفة.

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

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

أمثلة من علامات يمكن استخدام أزرار: عنصر زر، وهو نوع من العناصر والمدخلات وتقديم إضافة مرساة. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "الإدخال [نوع = تقديم]، لذلك زر")
      .button ()
      . انقر (وظيفة (الحدث) {
        event.preventDefault ()؛
      })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<زر> العنصر على زر </ زر>
 
<نوع الإدخال = "تقدم" قيمة = "إرسال زر">
 
<a href="#"> مرساة </A>
 
 
</ الجسم>
</ HTML>

مربع

عن طريق خانة الاختيار زر هو نمط زر تبديل. عناصر التسمية المقترنة مع مربع كما نص الزر.

في هذه الحالة عن طريق الاتصال على حاوية الجمهور .buttonset() ، كما هو موضح ثلاثة عرض أنماط زر مربع. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "# تحقق") .button ()؛
    $ ( "#format") .buttonset ()؛
  })؛
  </ script>
  <نمط>
  #format {هامش قمة: 2em؛}
  </ النمط>
</ رئيس>
<body>
 
<نوع الإدخال = "مربع" معرف = "تحقق"> <تسمية = "تحقق"> مفتاح </ التسمية>
 
<شعبة معرف = "الشكل">
  <نوع الإدخال = "مربع" معرف = "check1"> <تسمية = "check1"> ب </ التسمية>
  <نوع الإدخال = "مربع" معرف = "check2"> <تسمية = "check2"> أنا </ التسمية>
  <نوع الإدخال = "مربع" معرف = "check3"> <تسمية = "check3"> U </ التسمية>
</ div>
 
 
</ الجسم>
</ HTML>

رمز

مع بعض توليفات مختلفة من أزرار النص ورمز 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "زر: أولا") .button ({
      الرموز: {
        المرحلة الابتدائية: "مؤمن واجهة المستخدم رمز"
      }،
      النص: كاذبة
    }). التالي (). زر ({
      الرموز: {
        المرحلة الابتدائية: "مؤمن واجهة المستخدم رمز"
      }
    }). التالي (). زر ({
      الرموز: {
        المرحلة الابتدائية: "واجهة المستخدم، رمز والعتاد"،
        الثانوي: "واجهة المستخدم-رمز-مثلث-1-ق"
      }
    }). التالي (). زر ({
      الرموز: {
        المرحلة الابتدائية: "واجهة المستخدم، رمز والعتاد"،
        الثانوي: "واجهة المستخدم-رمز-مثلث-1-ق"
      }،
      النص: كاذبة
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<زر> زر رمز مع </ زر> فقط
<زر> زر أيقونة على اليسار </ زر>
<زر> زر مع اثنين من الرموز </ زر>
<زر> مع اثنين من الأزرار مع رمز النص بدون </ زر>
 
 
</ الجسم>
</ HTML>

راديو

ثلاثة أزرار في زر. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#radio") .buttonset ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<النموذج>
  <شعبة معرف = "الراديو">
    <نوع الإدخال = "الراديو" معرف = "Radio1 ل" اسم = "الراديو"> <تسمية = "Radio1 ل"> اختر 1 </ التسمية>
    <نوع الإدخال = "الراديو" معرف = "radio2" اسم = "الراديو" فحص = "فحص"> <تسمية = "radio2"> اختيار ما بين 2 </ التسمية>
    <نوع الإدخال = "الراديو" معرف = "radio3" اسم = "الراديو"> <تسمية = "radio3"> اختر 3 </ التسمية>
  </ div>
</ النموذج>
 
 
</ الجسم>
</ HTML>

زر الانقسام 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
    .ui-القائمة {الموقف: مطلقة؛ العرض: 100px؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#rerun")
      .button ()
      . انقر (وظيفة () {
        تنبيه ( "تشغيل الإجراء الأخير")؛
      })
      .next ()
        .button ({
          النص: كاذبة،
          الرموز: {
            المرحلة الابتدائية: "واجهة المستخدم-رمز-مثلث-1-ق"
          }
        })
        . انقر (وظيفة () {
          القائمة فار = $ (هذا) .parent (). المقبل (). عرض (). موقف ({
            بلدي: "اليسار العلوي"،
            على العنوان التالي: "ترك القاع"،
            من: هذا
          })؛
          $ (الوثيقة). واحد ( "فوق"، وظيفة () {
            menu.hide ()؛
          })؛
          عودة كاذبة.
        })
        .parent ()
          .buttonset ()
          .next ()
            .hide ()
            .menu ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<div>
  <div>
    <زر معرف = "اعادة"> تشغيل الإجراء الأخير </ زر>
    <زر معرف = "حدد"> تحديد إجراء </ زر>
  </ div>
  <UL>
    <لي> <a href="#"> مفتوح ... </A> </ لى>
    <لي> <a href="#"> حفظ </A> </ لى>
    <لي> <a href="#"> حذف </A> </ لى>
  </ UL>
</ div>
 
 
</ الجسم>
</ HTML>

شريط الأدوات

شريط أدوات لاعب الوسائط المتعددة. علامات تبدو المستندة: بعض العناصر زر، زر المراوغة هو مربع لنوع من المدخلات، وكرر الخيارات هي ثلاثة أنواع من المدخلات الراديو. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "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 = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  #toolbar {
    الحشو: 4PX.
    عرض: مضمنة كتلة.
  }
  / * الدعم: IE7 * /
  * + الاكواد #toolbar {
    عرض: مضمن.
  }
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#beginning") .button ({
      النص: كاذبة،
      الرموز: {
        المرحلة الابتدائية: "واجهة المستخدم رمز الفأر بدء"
      }
    })؛
    $ ( "#rewind") .button ({
      النص: كاذبة،
      الرموز: {
        المرحلة الابتدائية: "واجهة المستخدم أيقونة تسعى السابق"
      }
    })؛
    $ ( "#play") .button ({
      النص: كاذبة،
      الرموز: {
        المرحلة الابتدائية: "واجهة المستخدم-رمز-مسرحية"
      }
    })
    . انقر (وظيفة () {
      خيارات فار.
      إذا ($ (هذا) .text () === "اللعب") {
        خيارات = {
          التسمية: "وقفة"،
          الرموز: {
            المرحلة الابتدائية: "واجهة المستخدم رمز وقفة"
          }
        }؛
      } {شيء آخر
        خيارات = {
          التسمية: "اللعب"،
          الرموز: {
            المرحلة الابتدائية: "واجهة المستخدم-رمز-مسرحية"
          }
        }؛
      }
      $ (هذا) .button ( "خيار"، والخيارات)؛
    })؛
    $ ( "STOP #") .button ({
      النص: كاذبة،
      الرموز: {
        المرحلة الابتدائية: "واجهة المستخدم أيقونة توقف"
      }
    })
    . انقر (وظيفة () {
      $ ( "#play") .button ( "الخيار"، {
        التسمية: "اللعب"،
        الرموز: {
          المرحلة الابتدائية: "واجهة المستخدم-رمز-مسرحية"
        }
      })؛
    })؛
    $ ( "#forward") .button ({
      النص: كاذبة،
      الرموز: {
        المرحلة الابتدائية: "واجهة المستخدم أيقونة تسعى المقبل"
      }
    })؛
    $ ( "#END") .button ({
      النص: كاذبة،
      الرموز: {
        المرحلة الابتدائية: "واجهة المستخدم أيقونة تسعى في نهاية"
      }
    })؛
    $ ( "#shuffle") .button ()؛
    $ ( "#repeat") .buttonset ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "شريط الأدوات" الطبقة = "واجهة المستخدم القطعة-رأس واجهة المستخدم الزاوية للجميع">
  <زر معرف = "بداية"> بداية </ زر>
  <زر معرف = "الترجيع"> الترجيع </ زر>
  <زر معرف = "اللعب"> لعب </ زر>
  <زر معرف = "وقف"> إيقاف </ زر>
  <زر معرف = "إلى الأمام"> بسرعة إلى الأمام </ زر>
  <زر معرف = "نهاية"> نهاية </ زر>
 
  <نوع الإدخال = "مربع" معرف = "خلط"> <تسمية = "خلط"> المراوغة </ التسمية>
 
  في <span id = "تكرار">
    <نوع الإدخال = "الراديو" معرف = "repeat0" اسم = "يكرر" فحص = "فحص"> <تسمية = "repeat0"> لا كرر </ التسمية>
    <نوع الإدخال = "الراديو" معرف = "repeat1" اسم = "تكرار"> <تسمية = "repeat1"> مرة واحدة </ التسمية>
    <نوع الإدخال = "الراديو" معرف = "repeatall" اسم = "تكرار"> <تسمية = "repeatall"> الكل </ التسمية>
  </ SPAN>
</ div>
 
 
</ الجسم>
</ HTML>