تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

جی کوئری موبایل-لیست نمایشی

 


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

لیست های نمایشی در جی کوئری موبایل، درواقع همان لیست های استاندارد HTML هستند. لیست های منظم(<ol>) و لیست های نامنظم(<ul>).

برای ایجاد یک لیست، عبارت "data-role="listview را به عنصر <ol> یا <ul> خود اضافه کنید. برای اینکه آیتم ها قابل لمس باشند(در موبایل های لمسی) یک لینک را درون هر آیتم لیست(<li>) اضافه کنید:

مثل

<ol data-role="listview">
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview">
  <li><a href="#">List Item</a></li>
</ul>
خودتان امتحان کنید »

برای اینکه استایل گوشه های گرد شده و همچنین مقداری margin به لیست خود بدهید، از خصوصیت "data-inset="true استفاده کنید:

مثال

<ul data-role="listview" data-inset="true">
خودتان امتحان کنید »
Note

به طور پیش فرض، لینک های درون یک آیتم لیست به طور اتوماتیک تبدیل به یک دکمه می شوند. بنابراین نیازی به "ui-class="btn و "data-role="button نیست. 


تقسیم کننده ی لیست

از تقسیم کننده های لیست، برای سازمان دادن و گروه بندی آیتم های درون دسته ها استفاده می شود. 

برای مشخص کردن یک تقسیم کننده ی لیست، خصوصیت "data-role="list-divider را به یک عنصر <li> اضافه کنید:

مثال

<ul data-role="listview">
  <li data-role="list-divider">Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
خودتان امتحان کنید »

اگر که شما یک لیست به ترتیب حروف الفبا دارید(بعنوان مثال یک دفترچه تلفن)، با اضافه کردن خصوصیت "data-autodividers="true به عنصر <ol> یا <ul> مورد نظر، جی کوئری موبایل به طور اتوماتیک تقسیم کننده های مناسب را اضافه می کند: 

مثال

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
خودتان امتحان کنید »
Note

خصوصیت "data-autodividers="true بر اساس حروف بزرگ اولین کلمه ی متن آیتم مورد نظر، تقسیم کننده ها را ایجاد می کند. 


Examples

مثال های بیشتر

  لیست های فقط خواندنی
آموزش ایجاد لیست ها بدون لینک ها(دکمه ای وجود نخواهد داشت و قابلیت لمس یا کلیک نیز ندارد). 

پنل ها
آموزش اضافه کردن پنل در آیتم های لیست

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی