آموزش jQuery Mobile - دکمه رادیویی (Radiobox)

دکمه رادیویی (Radiobox):

دکمه‌های رادیویی (Radio buttons) زمانی استفاده می‌شوند که از بین گزینه‌های مختلف، فقط یک گزینه باید انتخاب شود. آن‌ها همچنین با استفاده از تگ <input> ایجاد می‌شوند، اما ویژگی (Attribute) type به radio تنظیم می‌شود.

جدول زیر نوع دکمه رادیویی را به طور دقیق‌تر نشان می‌دهد.

ردیف	نوع و توضیحات
۱	نشانه‌گذاری پایه(Basic markup) با استفاده از المان <input> با ویژگی type = "radio" و یک برچسب مربوطه، دکمه‌های رادیویی ایجاد می‌شوند.
۲	اندازه کوچک(Mini size) در المان fieldset ، ویژگی data-mini = "true" را برای ایجاد نسخه کوچک اضافه کنید.
۳	گروه عمودی(Vertical group) به طور پیش فرض، دکمه‌های رادیویی عمودی تنظیم شده‌اند.
۴	گروه افقی(Horizontal group) برای تنظیم دکمه‌های رادیویی به صورت افقی، ویژگی data-type = "horizontal" را به المان fieldset اضافه کنید.
۵	موقعیت آیکون(Icon position) موقعیت دکمه آیکون رادیو را با استفاده از ویژگی data-iconpos = "right" برای المان fieldset تنظیم کنید.
۶	تم(Theme) تم به دکمه‌های رادیویی با استفاده از ویژگی data-theme تنظیم می‌شود.
۷	غیرفعال(Disabled) برای غیرفعال کردن دکمه‌های رادیویی، ویژگی disabled = "disabled" را در المان input تنظیم کنید.
۸	بهبودیافته(Enhanced) با استفاده از ویژگی data-enhanced = "true"، دکمه رادیویی بهبود یافته و افزایش کیفیت می‌یابد.

1-نشانه‌گذاری پایه(Basic markup):

دکمه های رادیویی را می توان با استفاده از عنصر <input> با ویژگی type = "radio" و یک برچسب مربوطه ایجاد کرد. عنصر ورودی را با ویژگی for تنظیم کنید تا با شناسه برچسب مطابقت داشته باشد تا از نظر معنایی مرتبط شوند.

مثال زیر استفاده از دکمه رادیویی پایه را در جی کوئری موبایل نشان می دهد

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Basic Radio Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "radio" id = "radio1" name = "radio-choice-0" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

2-اندازه کوچک(Mini size):

در عنصر فیلدست، ویژگی data-mini = "true" را برای ایجاد یک نسخه کوچک اضافه کنید. در نوار ابزار و فضاهای تنگ برای نسخه فشرده تر مفید است.

مثال زیر استفاده از دکمه رادیویی اندازه کوچک را در jQuery Mobile نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Mini Size Example</h2>
         <fieldset data-role = "controlgroup" data-mini = "true">
            <input type = "radio" id = "radio1" name = "radio-choice-0" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

3-گروه عمودی(Vertical group):

چندین دکمه رادیویی با تنظیم ویژگی data-role = "controlgroup" در مجموعه فیلدها در گروه ادغام می شوند. به طور خودکار، چارچوب گوشه ها را در گوشه پایین و بالا گرد می کند و تمام حاشیه ها را حذف می کند. به طور پیش فرض، رادیو به صورت عمودی تنظیم می شود.

مثال زیر استفاده از دکمه رادیویی را به صورت عمودی در jQuery Mobile نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Vertical Group Example</h2>
         <fieldset data-role = "controlgroup">
            <input type = "radio" id = "radio1" name = "radio-choice-0" checked = "checked" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

4-گروه افقی(Horizontal group):

رادیو را به صورت افقی با قرار دادن data-type = "horizontal" در مجموعه فیلدها تنظیم کنید.

مثال زیر استفاده از دکمه رادیویی را به صورت افقی در jQuery Mobile نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Horizontal Group Example</h2>
         <fieldset data-role = "controlgroup" data-type = "horizontal">
            <input type = "radio" id = "radio1" name = "radio-choice-0" checked = "checked" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

5-موقعیت آیکون(Icon position):

موقعیت دکمه آیکون رادیویی را می توان با استفاده از data-iconpos = ویژگی "راست" به مجموعه فیلدها در سمت راست تنظیم کرد. به طور پیش فرض، نماد رادیو در سمت چپ تنظیم شده است.

مثال زیر استفاده از موقعیت نماد دکمه رادیویی را در jQuery Mobile نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Icon Position Example</h2>
         <fieldset data-role = "controlgroup" data-iconpos = "right">
            <input type = "radio" id = "radio1" name = "radio-choice-0" checked = "checked" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

6-تم(Theme):

تم روی دکمه رادیویی با استفاده از ویژگی data-theme در مجموعه فیلد یا ورودی رادیویی خاص تنظیم می شود.

مثال زیر استفاده از تم رادیویی را در jQuery Mobile نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Theme Example</h2>
         <fieldset data-role = "controlgroup" data-theme = "b">
            <input type = "radio" id = "radio1" name = "radio-choice-0" checked = "checked" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

7-غیرفعال(Disabled):

ویژگی disabled = "disabled" را در ورودی تنظیم کنید تا دکمه رادیویی غیرفعال شود.

مثال زیر استفاده از غیرفعال کردن دکمه رادیویی را در jQuery Mobile نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Disable Example</h2>
         <fieldset data-role = "controlgroup" data-theme = "b">
            <input type = "radio" id = "radio1" name = "radio-choice-0" disabled = "disabled" />
            <label for = "radio1">Radio 1</label>

            <input type = "radio" id = "radio2" name = "radio-choice-0" disabled = "disabled" />
            <label for = "radio2">Radio 2</label>

            <input type = "radio" id = "radio3" name = "radio-choice-0" disabled = "disabled" />
            <label for = "radio3">Radio 3</label>
         </fieldset>
      </form>
   </body>
</html>

8-بهبودیافته(Enhanced):

رادیو با استفاده از ویژگی data-enhanced = "true" در فیلد ورودی بهبود یافته است.

مثال زیر استفاده از رادیو در jQuery Mobile را نشان می دهد.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <h2>Radio Enhanced Example</h2>
         <div class = "ui-radio">
            <label for = "radio1" class = "ui-btn">Radio 1</label>
            <input type = "radio" id = "radio1" name = "radio-enhanced" data-enhanced = "true" />
         </div>

         <div class = "ui-radio">
            <label for = "radio2" class = "ui-btn">Radio 2</label>
            <input type = "radio" id = "radio2" name = "radio-enhanced" data-enhanced = "true" />
         </div>
      </form>
   </body>
</html>

چک باکس (Checkbox) - درس قبلی

درس بعدی - انتخاب تاریخ (Datepicker)