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

آموزش jQuery Mobile - قابل جمع شدن (Collapsible)

قابل جمع شدن (Collapsible):

Collapsible (قابل جمع) به شما اجازه می دهد تا محتوا را با کلیک بر روی آن گسترش یا جمع کنید. این بسیار مفید برای دستگاه های تلفن همراه است که محتوای کوتاهی را ارائه می دهد.

جدول زیر انواع مختلف ویجت قابل جمع (Collapsible) مورد استفاده در jQuery Mobile را نشان می دهد. −

ردیف نوع و توضیحات قابل جمع (Collapsible)
۱ قابل جمع (Collapsible)

قابل جمع ها ابزار پایه و آسان برای نمایش محتوای کوتاه هستند.
۲ قابل جمع پویا (Dynamic Collapsible)

قابل جمع می تواند به صورت پویا به مجموعه‌ی قابل جمع (Collapsible Set) اضافه شود.
۳ مجموعه‌ی قابل جمع (Collapsible Set)

در jQuery Mobile، با قرار دادن چند قابل جمع مجزا در یک مجموعه، یک آکاردیون (Accordion) ایجاد می شود.
۴ قابل جمع تو در تو (Nested Collapsible)

قابل جمع ها می توانند داخل محتوای قابل جمع دیگری قرار گیرند.
1-قابل جمع (Collapsible):

collapsible ویجت اولیه و آسان برای نمایش محتوای کوتاه هستند. جدول زیر انواع collapsible مورد استفاده در jQuery Mobile را فهرست می کند.

ردیف نوع و توضیحات Collapsible
۱ کلید مرتبط (Basic collapsible)

با اضافه کردن ویژگی data-role = "collapsible" به یک ظرف، می‌توان یک بلوک Collapsible ایجاد کرد.
۲ تم (Theme)

برای تنظیم یک تم Collapsible، می‌توانید از ویژگی data-theme استفاده کنید و ویژگی data-content-theme را با یک حرف از سوئیچ تم مشخص شده اضافه کنید.
۳ باز شده (Expanded)

با استفاده از ویژگی data-collapsed و تنظیم آن به false، می‌توانید محتوای Collapsible را در هنگام بارگیری صفحه گسترش دهید.
۴ اندازه کوچک (Mini sized)

می‌توانید هر زمان که نیاز به نسخه کوچک‌شده‌ای از Collapsible دارید، از ویژگی data-mini و تنظیم آن به true استفاده کنید.
۵ آیکون‌ها (Icons)

می‌توان با استفاده از ویژگی‌های data-collapsed-icon و data-expanded-icon، آیکون‌های پیش‌فرض سربرگ Collapsible را با آیکون‌های دیگر جایگزین کرد.
۶ قرارگیری آیکون (Icon positioning)

می‌توان با استفاده از ویژگی data-iconpos، قرارگیری پیش‌فرض آیکون سربرگ Collapsible را جایگزین کرد.
۷ عنوان(Legend)

شما می‌توانید المان‌های فرم را در کالابسیبل (Collapsible) با استفاده از فیلدست (Fieldset) و عنوان (Legend) نمایش دهید.
۸ غیر درج شده (Non-inset Collapsible)

برای حذف ظاهر inset و نمایش کالابسیبل به طور کامل بدون سبک کرنر، می‌توانید ویژگی data-inset = "false" را اضافه کنید.
۹ مجموعه‌ای از collapsibles جداگانه (Set of individual collapsibles)

شما می‌توانید یک سری کالابسیبل جداگانه اعمال کنید و اجازه می‌دهد تا شما بتوانید چندین ردیف را به طور همزمان باز کنید.
۱۰ مارکاپ پیش‌رندر شده (Pre-rendered markup)

برای بهبود زمان بارگیری صفحه، می‌توانید مارکاپ پیش‌رندر شده را برای کالابسیبل فراهم کنید با اضافه کردن ویژگی data-enhanced و تنظیم آن به true.

1-1-کلید مرتبط (Basic collapsible):

بلوک تاشدنی محتوا را می توان با استفاده از ویژگی data-role = "collapsible" در یک ظرف ایجاد کرد. در داخل ظرف، می‌توانید هر عنصر سرصفحه یا افسانه‌ای را اضافه کنید. هدر توسط فریمورک به گونه‌ای طراحی می‌شود که مانند یک دکمه قابل کلیک ظاهر شود.

در زیر هدر، می‌توانید نشانه‌گذاری HTML مورد نظر خود را اضافه کنید و هر زمان که روی عنوان کلیک شود، نشان داده یا پنهان می‌شود.

<!DOCTYPE html>
<html>
   <head>
      <title>Basic collapsible</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 = "collapsible">
         <legend>Heading</legend>
         <p>Hi! This is collapsible content.</p>
      </div>
   </body>
</html>

2-1-تم (Theme):

برای تنظیم یک طرح زمینه جمع‌شونده، می‌توانید از ویژگی داده-موضوع استفاده کنید و ویژگی داده-محتوا-موضوع را با یک حرف نمونه تم مشخص شده اضافه کنید. برای جلوگیری از ارث بری پیش‌فرض محتوای تاشو، می‌توانید data-content-theme را روی false تنظیم کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible Theme</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 = "collapsible" data-theme = "b" data-content-theme = "b">
         <h4>Heading</h4>
         <p>Hi! This is collapsible content with a themed block of content set to "b".</p>
      </div>

      <div data-role = "collapsible" data-content-theme = "false">
         <h4>Heading</h4>
         <p>Hi! This is collapsible content without a theme.</p>
      </div>
   </body>
</html>

3-1-باز شده (Expanded):

می‌توانید محتوای جمع‌شدنی را در بارگذاری صفحه با تنظیم ویژگی جمع‌شده داده روی false گسترش دهید.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible Expanded</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 = "collapsible" data-collapsed = "false">
         <h4>Heading</h4>
         <ul data-role = "listview">
            <li><a href = "#">Item 1</a></li>
            <li><a href = "#">Item 2</a></li>
            <li><a href = "#">Item 3</a></li>
         </ul>
      </div>
   </body>
</html>

4-1-اندازه کوچک (Mini sized):

هر زمان که به یک نسخه جمع‌وجور تاشو نیاز داشتید می‌توانید از اندازه کوچک استفاده کنید. این را می توان با استفاده از data-mini و تنظیم آن بر روی true بدست آورد.

<!DOCTYPE html>
<html>
   <head>
      <title>Mini sized collapsible</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 = "collapsible" data-mini = "true">
         <h4>Heading</h4>
         <ul data-role = "listview">
            <li><a href = "#">Item 1</a></li>
            <li><a href = "#">Item 2</a></li>
            <li><a href = "#">Item 3</a></li>
         </ul>
      </div>
   </body>
</html>

5-1-آیکون‌ها (Icons):

ایکون ها ی پیش‌فرض عنوان جمع‌شونده را می‌توان با استفاده از ویژگی‌های data-collapsed-icon و data-expanded-icon لغو کرد.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible Icons</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 = "collapsible" data-collapsed-icon = "carat-d" data-expanded-icon = "carat-u">
         <h4>Heading</h4>
         <ul data-role = "listview" data-inset = "false">
            <li>Read-only item 1</li>
            <li>Read-only item 2</li>
            <li>Read-only item 3</li>
         </ul>
      </div>
   </body>
</html>

6-1-قرارگیری آیکون (Icon positioning):

Icon positioning پیش فرض عنوان collapsibe را می توان با استفاده از ویژگی data-iconpos لغو کرد. این ویژگی را می توان با مقدار چپ، راست، بالا یا پایین تنظیم کرد.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible Icons Positioning</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 = "collapsible" data-iconpos = "right">
         <h3>Click here to view your message</h3>
         <p>Hi!! Have a nice day!!</p>
      </div>
   </body>
</html>

7-1-عنوان(Legend):

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

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible Legend</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>
      <form>
         <fieldset data-role = "collapsible">
            <legend>Legend</legend>
            <label for = "text-basic">Text input:</label>
            <input type = "text" name = "text-basic" id = "text-basic" 
               value = "" placeholder = "Input your text" />
            
            <fieldset data-role = "controlgroup">
               <legend>Select your favourite sport</legend>
               <input type = "checkbox" name = "checkbox-1" 
                  id = "checkbox-1" checked = "" />
               
               <label for = "checkbox-1">Baseball</label>
               <input type = "checkbox" name = "checkbox-2" id = "checkbox-2" />
               
               <label for = "checkbox-2">Cricket</label>
               <input type = "checkbox" name = "checkbox-3" id = "checkbox-3" />
               
               <label for = "checkbox-3">Football</label>
               <input type = "checkbox" name = "checkbox-4" id = "checkbox-4" />
               
               <label for = "checkbox-4">Hockey</label>
            </fieldset>
         </fieldset>
      </form>
   </body>
</html>

8-1-غیر درج شده (Non-inset Collapsible):

برای حذف ظاهر داخلی و نمایش تاشدنی به عرض کامل بدون استایل گوشه، می‌توانید ویژگی data-inset = "false" را اضافه کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>Non-inset Collapsible</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 = "collapsible" data-inset = "false">
         <h3>Heading</h3>
         <p>Hi!! Have a nice day!!</p>
      </div>
   </body>
</html>

9-1-مجموعه‌ای از collapsibles جداگانه (Set of individual collapsibles):

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

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible Set</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 = "collapsible">
         <h3>Audi</h3>
         <ul data-role = "listview">
            <li><a href = "#">Audi A4</a></li>
            <li><a href = "#">Audi Q3</a></li>
            <li><a href = "#">Audi R8</a></li>
         </ul>
      </div>
      
      <div data-role = "collapsible">
         <h3>Mahindra</h3>
         <ul data-role = "listview">
            <li><a href = "#">XUV 500</a></li>
            <li><a href = "#">Scorpio</a></li>
            <li><a href = "#">Xylo</a></li>
         </ul>
      </div>
      
      <div data-role = "collapsible">
         <h3>Hyundai</h3>
         <ul data-role = "listview">
            <li><a href = "#">Verna</a></li>
            <li><a href = "#">i20</a></li>
            <li><a href = "#">Elantra</a></li>
         </ul>
      </div>
   </body>
</html>

10-1-مارکاپ پیش‌رندر شده (Pre-rendered markup):

برای بهبود زمان بارگذاری صفحه خود، می‌توانید با افزودن ویژگی بهبود یافته داده و تنظیم آن روی true، یک نشانه‌گذاری از پیش رندر شده برای جمع‌شدگی ارائه دهید.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible 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">
      <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 = "collapsible" data-enhanced = "true" class = "ui-collapsible 
         ui-collapsible-inset ui-corner-all ui-collapsible-collapsed">
         <h4 class = "ui-collapsible-heading ui-collapsible-heading-collapsed">
            <a href = "#" class = "ui-collapsible-heading-toggle ui-btn 
               ui-btn-icon-left ui-icon-plus">Heading
               <div class = "ui-collapsible-heading-status"> to expand contents click here</div>
            </a>
         </h4>
         
         <div class = "ui-collapsible-content ui-collapsible-content-collapsed" 
            aria-hidden = "true">
            <p>Hi!!.. Have a nice day!!..</p>
         </div>
      </div>
   </body>
</html>

2-قابل جمع پویا (Dynamic Collapsible):

Collapsible را می توان به صورت پویا به مجموعه Collapsibleاضافه کرد.

مثال زیر استفاده از قابلیت جمع‌شدگی پویا را در jQuery Mobile نشان می‌دهد.

<!DOCTYPE html>
<html>
   <head>
      <title>Dynamic collapsible</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>
      <button type = "button" data-icon = "plus" data-iconpos = "right" data-mini = "true" 
         data-inline = "true" id = "add_collapsible">Add collapsible</button>
      <button type = "button" data-icon = "carat-d" data-iconpos = "right" data-mini = "true" 
         data-inline = "true" id = "expand_last">Expand last collapsible</button>
      <button type = "button" data-icon = "carat-u" data-iconpos = "right" data-mini = "true" 
         data-inline = "true" id = "collapse_last">Collapse last</button>
         
      <div data-role = "collapsibleset" data-content-theme = "a" data-iconpos = "right" id = "set">
         <div data-role = "collapsible" id = "set1" data-collapsed = "true">
            <h3>Heading 1</h3>
            <p>Hi!! This is collapsible content.</p>
         </div>
      </div>
      
      <script>
         $( document ).on( "pagecreate", function() {
            var nextId  =  1;
            $("#add_collapsible").click(function() {
               nextId++;
               var content  =  "<div data-role = 'collapsible' id = 'set" + nextId + "'>
                  <h3>Heading " + nextId + "</h3>
                  <p>Hi!! This is collapsible content.</p></div>";
               $( "#set" ).append( content ).collapsibleset( "refresh" );
            });
            
            $( "#expand_last" ).click(function() {
               $("#set").children(":last").collapsible( "expand" );
            });
            
            $( "#collapse_last" ).click(function() {
               $( "#set" ).children( ":last" ).collapsible( "collapse" );
            });
         });
      </script>
   </body>
</html>

3-مجموعه‌ی قابل جمع (Collapsible Set):

در jQuery Mobile، می‌توان با قرار دادن یک سری collapsible جداگانه در یک set، یک accordion ایجاد کرد.

در جدول زیر، انواع مختلف collapsible set استفاده شده در jQuery Mobile لیست شده است:

ردیف نوع و توضیحات مجموعه جمع‌شونده
۱ نشانه‌گذاری (Markup)

می‌توان با استفاده از نشانه‌گذاری ساده مجموعه جمع‌شونده را ایجاد کرد. اضافه کردن ویژگی data-role = "collapsibleset" باعث می‌شود آن یک مجموعه جمع‌شونده باشد.
۲ داخلی در برابر عرض کامل

برای ایجاد مجموعه جمع‌شونده با عرض کامل بدون طراحی گوشه، ویژگی data-inset را اضافه کرده و آن را به false تنظیم کنید.
۳ کوچک (Mini)

هر زمان که می‌خواهید یک نسخه فشرده از مجموعه جمع‌شونده را داشته باشید، ویژگی data-mini را اضافه کرده و آن را به true تنظیم کنید.
۴ نمادها (Icons)

برای جایگزینی نمادهای سربرگ پیش‌فرض، ویژگی‌های data-collapsed-icon و data-expanded-icon را در سطح collapsibleset یا در هر یک از مجموعه جمع‌شونده‌های آن اضافه کنید.
5 موقعیت آیکون

برای جایگزینی موقعیت پیش‌فرض آیکون، از ویژگی data-iconpos در سطح collapsibleset یا در هر یک از collapsibles آن استفاده کنید.
6 گوشه‌ها

برای ساخت یک collapsible set inset بدون استفاده از گوشه‌های گرد، فقط ویژگی data-corners را اضافه کنید و به false تنظیم کنید.
7 تم(theme)

رنگ هر هدر collapsible را می‌توان با اضافه کردن ویژگی data-theme به collapsible set تنظیم کرد.

3-1-نشانه‌گذاری (Markup):

مجموعه تاشوها را می‌توان با همان نشانه‌گذاری تاشوهای اولیه ایجاد کرد. افزودن ویژگی data-role="collapsibleset" آن را به مجموعه ای تاشو تبدیل می کند و مانند آکاردئون رفتار می کند.

مثال

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible 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">
      <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 = "collapsibleset" data-theme = "a" data-content-theme = "a">
         <div data-role = "collapsible">
            <h3>Heading 1</h3>
            <p>Hi!! This is collapsible content for heading 1</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading 2</h3>
            <p>Hi!! This is collapsible content for heading 2</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading 3</h3>
            <p>Hi!! This is collapsible content for heading 3</p>
         </div>
      </div>
   </body>
</html>

3-2-داخلی در برابر عرض کامل:

برای ایجاد یک تاشو با عرض کامل بدون استایل دادن به گوشه ها، ویژگی data-inset را اضافه کنید و روی false تنظیم کنید. این قسمت جمع‌شده‌ها را به‌عنوان نمای فهرستی قابل گسترش نمایش می‌دهد.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible Inset vs. full width</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 = "collapsibleset" data-inset = "false">
         <div data-role = "collapsible">
            <h3>Audi</h3>
            <ul data-role = "listview" data-inset = "false">
               <li>Audi A3</li>
               <li>Audi Q3</li>
               <li>Audi A4</li>
               <li>Audi A3 cabriolet</li>
            </ul>
         </div>
         
         <div data-role = "collapsible">
            <h3>Hyundai</h3>
            <ul data-role = "listview" data-inset = "false">
               <li>Verna</li>
               <li>Elantra</li>
               <li>Santa Fe</li>
               <li>Creta</li>
            </ul>
         </div>
         
         <div data-role = "collapsible">
            <h3>Toyota</h3>
            <ul data-role = "listview" data-inset = "false">
               <li>Corolla Altis</li>
               <li>Fortuner</li>
               <li>Land Cruiser Prado</li>
               <li>Land Cruiser 200</li>
            </ul>
         </div>
      </div>
   </body>
</html>

3-3-کوچک (Mini):

هر زمان که می‌خواهید یک نسخه فشرده از مجموعه‌ای از تاشوها داشته باشید، ویژگی data-mini را اضافه کنید و آن را روی true تنظیم کنید.

مثال:

<!DOCTYPE html>
<html>
   <head>
      <title>Mini collapsible set </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 = "collapsibleset" data-theme = "a" data-content-theme = "a" data-mini = "true">
         <div data-role = "collapsible">
            <h3>Click here</h3>
            <p>Hi!! This is mini collapsible</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Click here</h3>
            <p>Hi!! This is another mini collapsible</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Click here</h3>
            <p>Hi!! This is yet another mini collapsible</p>
         </div>
      </div>
   </body>
</html>

4-3-نمادها (Icons):

برای لغو نمادهای عنوان پیش‌فرض، ویژگی‌های data-collapsed-icon و data-expanded-icon را در سطح collapsibdata-expanded-iconleset یا در هر کدام از موارد جمع‌شدنی آن اضافه کنید.

مثال :

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible set icon</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 = "collapsibleset" data-theme = "a" data-content-theme = "a" 
         data-collapsed-icon = "carat-d" data-expanded-icon = "carat-u">
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>Hi!! This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>Hi!! This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible" data-collapsed-icon = "plus" data-expanded-icon = "minus">
            <h3>Heading</h3>
            <p>Hi!! This is collapsible content</p>
         </div>
      </div>
   </body>
</html>

5-3-موقعیت آیکون:

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

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible set icon</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 = "collapsibleset" data-theme = "a" data-content-theme = "a" 
         data-iconpos = "right">
         <div data-role = "collapsible">
            <h3>Right</h3>
            <p>Hi!! This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible" data-iconpos = "left">
            <h3>Left</h3>
            <p>Hi!! This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible" data-iconpos = "bottom">
            <h3>Bottom</h3>
            <p>Hi!! This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible" data-iconpos = "top">
            <h3>Top</h3>
            <p>Hi!! This is collapsible content</p>
         </div>
      </div>
   </body>
</html>

6-3-گوشه‌ها:

برای به دست آوردن یک مجموعه تاشو درونی بدون استایل گوشه گرد، فقط ویژگی گوشه های داده را اضافه کنید و روی false تنظیم کنید.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible set without rounded corners</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 = "collapsibleset" data-corners = "false" data-theme = "a" 
         data-content-theme = "a">
         <div data-role = "collapsible">
            <h3>Heading 1</h3>
            <p>This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading 2</h3>
            <p>This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading 3</h3>
            <p>This is collapsible content</p>
         </div>
      </div>
   </body>
</html>

7-3-تم(theme):

رنگ هر هدر تاشو را می توان با افزودن یک ویژگی تم داده به مجموعه جمع شونده تنظیم کرد.

برای تعیین رنگ محتوا، می توانید ویژگی داده-محتوا-موضوع را اضافه کنید. می‌توانید با افزودن ویژگی‌های data-theme و data-content-theme به بخش‌های منفرد در یک گروه، استایل متفاوتی به تاشوهای خاص بدهید.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible set theme</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 = "collapsibleset" data-theme = "b" data-content-theme = "b">
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
      </div>
      
      <p>You can differently style individual sections in a group by adding 
      <i>data-theme</i> and <i>data-content-theme</i> attributes to 
      specific collapsibles.</p>
      
      <div data-role = "collapsibleset" data-theme = "b" data-content-theme = "b">
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible" data-theme = "a" data-content-theme = "a">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
         
         <div data-role = "collapsible">
            <h3>Heading</h3>
            <p>This is collapsible content</p>
         </div>
      </div>
   </body>
</html>

4-قابل جمع تو در تو (Nested Collapsible):

تاشو را می توان در داخل محتوای تاشو دیگر قرار داد.

<!DOCTYPE html>
<html>
   <head>
      <title>Collapsible nested</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 = "collapsible">
         <h1>Click me</h1>
         <p>This is collapsible content.</p>
         <div data-role = "collapsible">
            <h1>Click me</h1>
            <p>This is nested collapsible content.</p>
         </div>
      </div>
   </body>
</html>
  انتخاب تاریخ (Datepicker) - درس قبلی
درس بعدی - گروه کنترلی(Controlgroup)