سبد (0)

تبلیغات

آموزش foundation-دکمه گروهی

گروه های دکمه

فریم ورک foundation به شما اجازه می دهد تا یک سری از دکمه ها را در یک خط گروه بندی کنید.

برای ایجاد یک گروه دکمه، از یک عنصر <ul> به همراه کلاس button-group. استفاده کنید: 

مثال

<ul class="button-group">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

نتیجه:

 
خودتان امتحان کنید »

گره های دکمه ی عمودی

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

مثال

<ul class="button-group stack">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

نتیجه:

 
خودتان امتحان کنید »

کلاس stack-for-small. در صفحه های نمایش کوچک، دکمه ها را به صورت عمودی تنظیم می کند و در صفحه های نمایش بزرگ، دکمه ها را به صورت افقی تنظیم می کند(برای دیدن افکت، پنجره را تغییر اندازه دهید):

مثال

<ul class="button-group stack-for-small">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

نتیجه:

 
خودتان امتحان کنید »

گروه های دکمه، با گوشه های گرد شده

کلاس های radius.  و round. باعث می شوند که گروه های دکمه، دارای گوشه های گرد شده باشند:

مثال

<ul class="button-group radius">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

<ul class="button-group round">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

نتیجه:

 
خودتان امتحان کنید »

 گروه های دکمه ی گسترده شده به طور مساوی

از کلاس even-num. برای گسترده کردن دکمه ها به طور مساوی در یک گروه، به اندازه ی 100% از عنصر والد خود، استفاده می شود.

مقدار num باید یک عدد از 1 تا 8 باشد. که تعداد دکمه ها را در گروه مشخص می کند:

مثال

<ul class="button-group even-3">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

<ul class="button-group even-5">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
  <li><button type="button" class="button">HTC</button></li>
  <li><button type="button" class="button">Huawei</button></li>
</ul>

<ul class="button-group even-8">
  <li><button type="button" class="button">A</button></li>
  <li><button type="button" class="button">B</button></li>
  <li><button type="button" class="button">C</button></li>
  <li><button type="button" class="button">D</button></li>
  <li><button type="button" class="button">E</button></li>
  <li><button type="button" class="button">F</button></li>
  <li><button type="button" class="button">G</button></li>
  <li><button type="button" class="button">H</button></li>
</ul>

نتیجه:

 
خودتان امتحان کنید »

دکمه های کشویی

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

مثال

<!-- Trigger the dropdown -->
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>

<!-- The actual dropdown -->
<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

نتیجه:

خودتان امتحان کنید »

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

کلاس dropdown. یک دکمه ی کشویی را مشخص می کند. 

برای باز کردن منوی کشویی، از یک دکمه یا لینک به همراه خصوصیت "data-dropdown="id استفاده کنید. 

مقدار id باید با آی دی محتوای منوی کشویی تطابق داشته باشد(id01).

کلاس f-dropdown. و خصوصیت data-dropdown-content را به یک عنصر <ul> اضافه کنید تا منوی کشویی ایجاد شود. حالا هرچه می خواهید را درون عنصر ظرف(container) اضافه کنید. 

در آخر، برای اینکه منوی کشویی کار کند، فریم ورک foundation را به وسیله ی جی کوئری، مقدار دهی اولیه کنید. 


دکمه های انشعاب دار

شما همچنین می توانید از قابلیت کشویی به همراه دکمه های انشعاب دار، استفاده کنید. فقط کافیست که کلاس split. را به دکمه ی مورد نظر اضافه کنید و به وسیله ی یک عنصر <span> دکمه ی کشویی(جهت) را جدا کنید:

مثال

<button class="button split">Split Button 
  <span data-dropdown="id01"></span>
</button>

<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

نتیجه:

خودتان امتحان کنید »
Note

نکته: در آموزش های بعدی، در مورد منوی های کشویی foundation مطالب بیشتری را فرا خواهید گرفت. 

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