آموزش jQuery Mobile - چک باکس (Checkbox)

چک باکس (Checkbox):

جعبه‌های انتخاب (Checkbox) هنگامی استفاده می‌شوند که بیش از یک گزینه باید انتخاب شود. آن‌ها با استفاده از تگ <input> ساخته می‌شوند، اما ویژگی نوع (type) به checkbox تنظیم می‌شود.

جدول زیر نوع جعبه‌های انتخاب را به طور دقیق توضیح می‌دهد:

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

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

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

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

<!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>
      <div data-role = "page">
         <form>
            <label>
               <input type = "checkbox">CheckBox 1
            </label>
            
            <label>
               <input type = "checkbox">CheckBox 2
            </label>
            
            <label>
               <input type = "checkbox">CheckBox 3
            </label>
         </form>
      </div>
   </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>
      <div data-role = "page">
         <form>
            <input type = "checkbox" id = "mini-1" data-mini = "true" />
            <label for = "mini-1">Checkbox mini 1</label>

            <input type = "checkbox" id = "mini-2" data-mini = "true" />
            <label for = "mini-2">Checkbox mini 2</label>
         </form>
      </div>
   </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>
      <h2>Vertical Group Example</h2>
      <form>
         <fieldset data-role = "controlgroup">
            <input type = "checkbox" id = "checkbox 1" />
            <label for = "checkbox 1">Checkbox 1</label>

            <input type = "checkbox" id = "checkbox 2" />
            <label for = "checkbox 2">Checkbox 2</label>

            <input type = "checkbox" id = "checkbox 3" />
            <label for = "checkbox 3">Checkbox 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>
      <h2>Horizontal Group Example</h2>
      <form>
         <fieldset data-role = "controlgroup" data-type = "horizontal">
            <input type = "checkbox" id = "checkbox 1" />
            <label for = "checkbox 1">Checkbox 1</label>

            <input type = "checkbox" id = "checkbox 2" />
            <label for = "checkbox 2">Checkbox 2</label>

            <input type = "checkbox" id = "checkbox 3" />
            <label for = "checkbox 3">Checkbox 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>
      <h2>Icon Position Example</h2>
      <form>
         <fieldset data-role = "controlgroup" data-iconpos = "right">
            <input type = "checkbox" id = "checkbox 1" />
            <label for = "checkbox 1">Checkbox 1</label>

            <input type = "checkbox" id = "checkbox 2" />
            <label for = "checkbox 2">Checkbox 2</label>

            <input type = "checkbox" id = "checkbox 3" />
            <label for = "checkbox 3">Checkbox 3</label>
         </fieldset>
      </form>
   </body>
</html>

6-تم(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>
      <h2>Checkbox Theme Example</h2>
      <form>
         <fieldset data-role = "controlgroup">
            <input type = "checkbox" id = "checkbox 1" data-theme = "b" />
            <label for = "checkbox 1">Checkbox 1</label>

            <input type = "checkbox" id = "checkbox 2" data-theme = "b" />
            <label for = "checkbox 2">Checkbox 2</label>

            <input type = "checkbox" id = "checkbox 3" data-theme = "b" />
            <label for = "checkbox 3">Checkbox 3</label>
         </fieldset>
      </form>
   </body>
</html>

7-غیرفعال(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>
      <h2>Disabled Checkbox Example</h2>
      <form>
         <fieldset data-role = "controlgroup">
            <input disabled = "" type = "checkbox" id = "checkbox 1" data-theme = "b" />
            <label for = "checkbox 1">Checkbox 1</label>

            <input disabled = "" type = "checkbox" id = "checkbox 2" data-theme = "b" />
         </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>
      <h2>Enhanced Checkbox Example</h2>
      <form>
         <div class = "ui-checkbox">
            <label for = "checkbox1" class = "ui-btn ui-corner-all">Checkbox</label>
            <input type = "checkbox" id = "checkbox1" data-enhanced = "true" />
         </div>
      </form>
   </body>
</html>

دکمه ها (Buttons) - درس قبلی

درس بعدی - دکمه رادیویی (Radiobox)