سبد (0)

جی کوئری موبایل-پیش ساخته ها

قطعه محتواهای پیش ساخته

پیش ساخته ها به شما اجازه می دهند تا یک محتوا را نمایش دهید یا محو کنید. این کار برای ذخیره سازی قسمت هایی از اطلاعات کاربرد دارد. 

 

برای ایجاد یک قطعه محتوای پیش ساخته، خصوصیت "data-role="collapsible را به یک ظرف(container) اضافه کنید. در اینجا ظرف ما یک عنصر div است. حالا در درون ظرف، یک سرفصل(H1-H6) و یا یک عنصر دیگر اضافه کنید و سپس کدهای اچ تی ام الی که می خواهید گسترش یابند(پیش ساخته باشند) را در ادامه اضافه نمایید:

مثال

<div data-role="collapsible">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>
خودتان امتحان کنید »

به طور پیش فرض، محتوای پیش ساخته به صورت بسته است. برای اینکه به هنگام لود شدن صفحه، محتوای پیش ساخته باز باشد، از "data-collapsed="false استفاده کنید:

مثال

<div data-role="collapsible" data-collapsed="false">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm now expanded by default.</p>
</div>
خودتان امتحان کنید »

 قطعه محتواهای پیش ساخته ی تو در تو

قطعه محتواهای پیش ساخته، می توانند تو در تو باشند(قرار گرفتن یک پیش ساخته در درون پیش ساخته ای دیگر).

مثال

<div data-role="collapsible">
  <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>
خودتان امتحان کنید »
Note

به هر تعداد که بخواهید می توانید قطعه محتواهای تو در تو ایجاد کنید. 


پیش ساخته های مجموعه ای

پیش ساخته های مجموعه ای، درواقع قطعه پیش ساخته هایی هستند که به صورت گروهی در کنار یکدیگر قرار گرفته اند( درست مانند یک آکاردئون). هنگامی که یک قطعه باز می شود، دیگر قطعه ها بسته می شوند. 

ابتدا چند قطعه محتوای پیش ساخته را ایجاد کنید و سپس آنها را در درون یک ظرف(container) که دارای خصوصیت  "data-role="collapsibleset باشد، قرار دهید:

مثال

<div 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>
خودتان امتحان کنید »

Examples

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

 پاپ آپ های پیش ساخته
آموزش ایجاد یک پاپ آپ پیش ساخته

 حذف کردن گوشه های دایره ای با استفاده از خصوصیت data-inset
آموزش حذف کردن گوشه های دایره ای و اضافه کردن عرض کامل به پیش ساخته ها

  کوچک کردن پیش ساخته ها با استفاده از خصوصیت data-mini
آموزش کوچکتر کردن پیش ساخته ها

تغییر دادن آیکن مورد نظر با استفاده از data-collapsed-icon و data-expanded-icon 
آموزش تغییر دادن آیکن پیش ساخته ها( آیکن های پیش فرض + و - هستند).

تغییر دادن مکان آیکن
آموزش تغییر دادن مکان آیکن در پیش ساخته ها( مقدار پیش فرض سمت چپ است).

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