جی کوئری موبایل-پیش ساخته ها
قطعه محتواهای پیش ساخته
پیش ساخته ها به شما اجازه می دهند تا یک محتوا را نمایش دهید یا محو کنید. این کار برای ذخیره سازی قسمت هایی از اطلاعات کاربرد دارد.
برای ایجاد یک قطعه محتوای پیش ساخته، خصوصیت "data-role="collapsible را به یک ظرف(container) اضافه کنید. در اینجا ظرف ما یک عنصر div است. حالا در درون ظرف، یک سرفصل(H1-H6) و یا یک عنصر دیگر اضافه کنید و سپس کدهای اچ تی ام الی که می خواهید گسترش یابند(پیش ساخته باشند) را در ادامه اضافه نمایید:
مثال
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
به طور پیش فرض، محتوای پیش ساخته به صورت بسته است. برای اینکه به هنگام لود شدن صفحه، محتوای پیش ساخته باز باشد، از "data-collapsed="false استفاده کنید:
مثال
<h1>Click me - I'm collapsible!</h1>
<p>I'm now expanded by default.</p>
</div>
قطعه محتواهای پیش ساخته ی تو در تو
قطعه محتواهای پیش ساخته، می توانند تو در تو باشند(قرار گرفتن یک پیش ساخته در درون پیش ساخته ای دیگر).
مثال
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div data-role="collapsible">
<h1>Click me - I'm a nested collapsible block!</h1>
<p>I'm the expanded content in the nested collapsible block.</p>
</div>
</div>
 |
به هر تعداد که بخواهید می توانید قطعه محتواهای تو در تو ایجاد کنید. |
|---|
پیش ساخته های مجموعه ای
پیش ساخته های مجموعه ای، درواقع قطعه پیش ساخته هایی هستند که به صورت گروهی در کنار یکدیگر قرار گرفته اند( درست مانند یک آکاردئون). هنگامی که یک قطعه باز می شود، دیگر قطعه ها بسته می شوند.
ابتدا چند قطعه محتوای پیش ساخته را ایجاد کنید و سپس آنها را در درون یک ظرف(container) که دارای خصوصیت "data-role="collapsibleset باشد، قرار دهید:
مثال
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
</div>
مثال های بیشتر
پاپ آپ های پیش ساخته
آموزش ایجاد یک پاپ آپ پیش ساخته
حذف کردن گوشه های دایره ای با استفاده از خصوصیت data-inset
آموزش حذف کردن گوشه های دایره ای و اضافه کردن عرض کامل به پیش ساخته ها
کوچک کردن پیش ساخته ها با استفاده از خصوصیت data-mini
آموزش کوچکتر کردن پیش ساخته ها
تغییر دادن آیکن مورد نظر با استفاده از data-collapsed-icon و data-expanded-icon
آموزش تغییر دادن آیکن پیش ساخته ها( آیکن های پیش فرض + و - هستند).
تغییر دادن مکان آیکن
آموزش تغییر دادن مکان آیکن در پیش ساخته ها( مقدار پیش فرض سمت چپ است).
- نوشته شده توسط احسان عباسی
- بازدید: 4980