شنبه ۲۹ دي ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش jQuery Mobile - گروه کنترلی(Controlgroup)

jQuery Mobile - ویجت گروه کنترلی

گروه‌های کنترلی یک مجموعه از دکمه‌ها را فراهم می‌کنند تا یک بلوک تکی را که شبیه به یک کامپوننت ناوبری است، مشخص کنند.

جدول زیر فهرستی از گروه‌های کنترلی را که توسط jQuery Mobile پشتیبانی می‌شوند را نشان می‌دهد

ردیف نوع و توضیحات
۱ گروه کنترل عمودی

شما می‌توانید گروه کنترل را به صورت عمودی نمایش دهید.
۲ گروه کنترل افقی

شما می‌توانید گروه کنترل را به صورت افقی نمایش دهید.
۳ گروه کنترل به اندازه کوچک

شما می‌توانید گروه کنترل را به اندازه کوچک نمایش دهید.
۴ گروه کنترل دکمه رادیویی

دکمه رادیویی را در گروه کنترل نمایش دهید.
۵ گروه کنترل باکس انتخاب

باکس انتخاب را در گروه کنترل نمایش دهید.
۶ گروه کنترل منوی کشویی

منوی کشویی را در گروه کنترل ایجاد کنید.
۷ ورودی متنی گروه کنترل

شما می‌توانید ورودی‌های متنی را که به کاربران اجازه می‌دهند داده وارد کنند، مشخص کنید.
۸ نشانه‌گذاری پیش‌بارگیری‌شده گروه کنترل

شما می‌توانید این را برای صرفه‌جویی در زمان راه‌اندازی در گروه کنترل استفاده کنید.

1-گروه کنترل عمودی:

با استفاده از ویژگی datarole = "controlgroup" می توانید گروه کنترل را به صورت عمودی نمایش دهید.

<!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Vertical</title>
      <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 = "controlgroup">
         <a href = "#" class = "ui-btn">Without Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-left">Left Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-right">Right Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-top">Top Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-bottom">Bottom Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-notext">Icon only</a>
      </div>
   </body>
</html>

2-گروه کنترل افقی 

گروه کنترل را در قالب افقی با استفاده از ویژگی های data-role = "controlgroup" و data-type = "horizontal" نمایش دهید.

<!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Horizontal</title>
      <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 = "controlgroup" data-type = "horizontal">
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-left">Left Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-right">Right Icon</a>
      </div>
         
      <div data-role = "controlgroup" data-type = "horizontal">
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-top">Top Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-bottom">Bottom Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-notext">Icon only</a>
      </div>
   </body>
</html>

3-گروه کنترل به اندازه کوچک:

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

<!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Minisized</title>
      <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>Minisized Vertical Controlgroup</h2>
      <div data-role = "controlgroup" data-mini = "true">
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-left">Left Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-right">Right Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-top">Top Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-bottom">Bottom Icon</a>
      </div><br><br>
         
      <h2>Minisized Horizontal Controlgroup</h2>
      <div data-role = "controlgroup" data-type = "horizontal" data-mini = "true">
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-left">Left Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-right">Right Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-top">Top Icon</a>
         <a href = "#" class = "ui-btn ui-icon-home ui-btn-icon-bottom">Bottom Icon</a>
      </div>
   </body>
</html>

4-گروه کنترل باکس انتخاب:

می توانید دکمه های رادیویی را در گروه کنترل با استفاده از ویژگی data-role = "controlgroup" نمایش دهید.

<!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Radio Button</title>
      <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 Radio Button</h2>
      <form>
         <fieldset data-role = "controlgroup">
            <input type = "radio" name = "radio1" id = "radio11" value = "val1" 
               checked = "checked" />
            <label for = "radio11">India</label>
            
            <input type = "radio" name = "radio1" id = "radio12" value = "val2" />
            <label for = "radio12">Australia</label>
            
            <input type = "radio" name = "radio1" id = "radio13" value = "val3" />
            <label for = "radio13">New Zealand</label>
         </fieldset>
      </form>
      
      <br><br>
      <h2>Minisized Vertical Radio Button</h2>
      <form>
         <fieldset data-role = "controlgroup" data-mini = "true">
            <input type = "radio" name = "radio1" id = "radio14" value = "val1" 
               checked = "checked" />
            <label for = "radio14">India</label>
            
            <input type = "radio" name = "radio1" id = "radio15" value = "val2" />
            <label for = "radio15">Australia</label>
            
            <input type = "radio" name = "radio1" id = "radio16" value = "val3" />
            <label for = "radio16">New Zealand</label>
         </fieldset>
      </form>
      
      <h2>Horizontal Radio Button</h2>
      <form>
         <fieldset data-role = "controlgroup" data-type = "horizontal">
            <input type = "radio" name = "radio1" id = "radio17" value = "val1" 
               checked = "checked" />
            <label for = "radio17">India</label>
            
            <input type = "radio" name = "radio1" id = "radio18" value = "val2" />
            <label for = "radio18">Australia</label>
            
            <input type = "radio" name = "radio1" id = "radio19" value = "val3" />
            <label for = "radio19">New Zealand</label>
         </fieldset>
      </form>
      <br><br>
      
      <h2>Minisized Horizontal Radio Button</h2>
      <form>
         <fieldset data-role = "controlgroup" data-type = "horizontal" data-mini = "true">
            <input type = "radio" name = "radio1" id = "radio20" value = "val1" 
               checked = "checked" />
            <label for = "radio20">India</label>
            
            <input type = "radio" name = "radio1" id = "radio21" value = "val2" />
            <label for = "radio21">Australia</label>
            
            <input type = "radio" name = "radio1" id = "radio22" value = "val3" />
            <label for = "radio22">New Zealand</label>
         </fieldset>
      </form>
      
   </body>
</html>

5-گروه کنترل باکس انتخاب:

شما می توانید چک باکس را در گروه کنترل با استفاده از ویژگی type = "checkbox" ایجاد کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Checkbox</title>
      <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 Checkbox</h2>
      <form>
         <fieldset data-role = "controlgroup">
            <input type = "checkbox" name = "checkbox1" id = "checkbox11" />
            <label for = "checkbox11">India</label>
            
            <input type = "checkbox" name = "checkbox1" id = "checkbox12" />
            <label for = "checkbox12">Australia</label>
            
            <input type = "checkbox" name = "checkbox1" id = "checkbox13" />
            <label for = "checkbox13">New Zealand</label>
         </fieldset>
      </form>
      
      <h2>Minisized Vertical Checkbox</h2>
      <form>
         <fieldset data-role = "controlgroup" data-mini = "true">
            <input type = "checkbox" name = "checkbox1" id = "checkbox14" />
            <label for = "checkbox14">India</label>
            
            <input type = "checkbox" name = "checkbox1" id = "checkbox15" />
            <label for = "checkbox15">Australia</label>
            
            <input type = "checkbox" name = "checkbox1" id = "checkbox16" />
            <label for = "checkbox16">New Zealand</label>
         </fieldset>
      </form>
      
      <h2>Horizontal Checkbox</h2>
      <form>
         <fieldset data-role = "controlgroup" data-type = "horizontal">
            <input type = "checkbox" name = "checkbox1" id = "checkbox17" />
            <label for = "checkbox17">India</label>
            
            <input type = "checkbox" name = "checkbox1" id = "checkbox18" />
            <label for = "checkbox18">Australia</label>
            
            <input type = "checkbox" name = "checkbox1" id = "checkbox19" />
            <label for = "checkbox19">New Zealand</label>
         </fieldset>
      </form>
      
      <h2>Minisized Horizontal Checkbox</h2>
      <form>
         <fieldset data-role = "controlgroup" data-type = "horizontal" data-mini = "true">
            <input type = "checkbox" name = "radio1" id = "checkbox20" />
            <label for = "checkbox20">India</label>
            
            <input type = "checkbox" name = "radio1" id = "checkbox21" />
            <label for = "checkbox21">Australia</label>
            
            <input type = "checkbox" name = "radio1" id = "checkbox22" />
            <label for = "checkbox22">New Zealand</label>
         </fieldset>
      </form>
      
   </body>
</html>

6-گروه کنترل منوی کشویی:

لیست کشویی را در گروه کنترل با استفاده از ویژگی data-role = "controlgroup" ایجاد کنید.

!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Selects</title>
      <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 Select</h2>
      <form>
         <fieldset data-role = "controlgroup">
            <select>
               <option value = "#">India</option>
               <option value = "#">Australia</option>
               <option value = "#">New Zealand</option>
            </select>
         </fieldset>
      </form>
      
      <h2>Minisized Vertical Select</h2>
      <form>
         <fieldset data-role = "controlgroup" data-mini = "true">
            <select>
               <option value = "#">India</option>
               <option value = "#">Australia</option>
               <option value = "#">New Zealand</option>
            </select>
         </fieldset>
      </form>
      
      <h2>Horizontal Select</h2>
      <form>
         <fieldset data-role = "controlgroup" data-type = "horizontal">
            <select>
               <option value = "#">India</option>
               <option value = "#">Australia</option>
               <option value = "#">New Zealand</option>
            </select>
         </fieldset>
      </form>
      
      <h2>Minisized Horizontal Select</h2>
      <form>
         <fieldset data-role = "controlgroup" data-type = "horizontal" data-mini = "true">
            <select>
               <option value = "#">India</option>
               <option value = "#">Australia</option>
               <option value = "#">New Zealand</option>
            </select>
         </fieldset>
      </form>
   </body>
</html>

7-ورودی متنی گروه کنترل:

می توانید ورودی های متنی را مشخص کنید که به کاربران اجازه می دهد داده ها را با استفاده از کلاس controlgroup-textinput وارد کنند.

<!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Textinputs</title>
      <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>Controlgroup Textinputs</h2>
      <label for = "search-control-group">Search Here</label>
      <div data-role = "controlgroup" data-type = "horizontal">
         <input type = "text" id = "search-control-group" 
            data-wrapper-class = "controlgroup-textinput ui-btn" /><br><br>
         <button>Send</button>
         <button>Reset</button>
      </div>
   </body>
</html>

8- نشانه‌گذاری پیش‌بارگیری‌شده گروه کنترل:

برای صرفه جویی در زمان راه اندازی در گروه کنترل می توانید از ویژگی از پیش رندر شده استفاده کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>Controlgroup Pre-rendered Markup</title>
      <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">
      <link rel = "stylesheet" href = "style.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>Pre-rendered Controlgroup</h2>
      <div data-role = "controlgroup" data-enhanced = "true" 
         class = "ui-controlgroup-controls ui-controlgroup-vertical ui-corner-all">
         <label for = "pre-rendered1">Checkbox 1</label>
         <input type = "checkbox" id = "pre-rendered1"  value = "val1" />
         
         <label for = "pre-rendered2">Checkbox 2</label>
         <input type = "checkbox" id = "pre-rendered2" value = "val2" />
      </div>
      
   </body>
</html>
  قابل جمع شدن (Collapsible) - درس قبلی
درس بعدی - فیلتر شدن(Fliterable)