جلسه چهارم – نمایش کادرها و هایلایت کردن در متریالایز

طراحی واکنش گرا با متریالایز
Materialize.toast(message, displayLength, className, completeCallback);

پارامترهای تابع toast عبارتند از:

  • message – پیامی که به کاربران نمایش داده می شود.
  • displayLength – مدت زمانی که آلرت به کاربر نمایش داده می شود.
  • className – نام کلاسی CSS که قصد داریم به آلرت نمایش داده شده، اضافه شود. بطور مثال کلاس rounded
  • completeCallback – نام تابعی که بعد از پایان یافتن آلرت نمایش داده شده به کاربر، فراخوانی می شود.

materialize برای ساخت tooltip دارای کلاس های CSS زیر می باشد.

نام کلاس توضیحات
tooltipped عنصر که می خواهد دارای tooltip باشد را مشخص می کند.
data-position موقعیت tooltip را که می تواند چپ، راست، بالا و یا پایین باشد را مشخص می کند.
data-delay مدت زمانی که می خواهیم tooltip به کاربر نمایش داده شود.
data-tooltip محتوای نوشتاری که می خواهیم داخل tooltip به کاربر نمایش دهیم.

 

مثال

در مثال زیر نحوه استفاده از toasts و tooltipها نمایش داده شده است.

<html>
<head>
<title>The Materialize Dialogs Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
function showToast(message, duration){
Materialize.toast(message, duration);
}
function showToast1(message, duration){
Materialize.toast('<i>'+ message + '</i>', duration);
}
function showToast2(message, duration){
Materialize.toast(message, duration, 'rounded');
}
function showToast3(message, duration){
Materialize.toast('Hello World!', duration, '', function toastCompleted(){
alert('Toast dismissed!');
});
}

</script>
</head>
<body class="container"> 
<h4>Toasts</h4>
<a class="btn" onclick="showToast('Hello World!', 3000)">Normal Alert!</a>
<a class="btn" onclick="showToast1('Hello World!', 3000)">Italic Alert!</a>
<a class="btn" onclick="showToast2('Hello World!', 3000)">Rounded Alert!</a>
<br/><br/>
<a class="btn" onclick="showToast3('Hello World!', 3000)">Callback Alert!</a> 
<h4>Tooltips</h4>
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am in bottom!">Bottom</a>
<a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="I am in left!">Left</a>
<a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="I am in right!">Right</a>
<a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="I am in top!">Top</a>
</body> 
</html>

 

 badge ها در متریالایر

در materialize کلاس های وجود دارند که با استفاده از آنها می توانید برخی موارد مانند آلارم دهنده ها (notification)، هشدار ها و … را برجسته سازی نمایید تا کاربر متوجه آن شود . فرضا تعداد ایمیل های جدید صندوق پستی کاربر را می خواهید برای کاربر برجسته سازی کنید.

نام کلاس  توضیحات
badge عنصر که نیاز به برجسته شدن را دارد را مشخص می کند و برای تگ span نیز بکار می رود
new یک پس زمینه به عنصری که قبلا توسط badge آماده برجسته سازی است، می دهد و آن را بر جسته می کند.

در زیر نحوه استفاده از این دو کلاس با مثال نشان داده شده است

مثال

<!DOCTYPE html>
<html>
<head>
<title>The Materialize Badges Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
</head>
<body class="container"> 
<h2>Badges Demo</h2>
<hr/>
<h3>Badges in List</h3>
<div class="collection">
<a href="#" class="collection-item">Inbox<span class="badge">12</span></a>
<a href="#" class="collection-item">Unread<span class="new badge">4</span></a>
<a href="#" class="collection-item">Sent</a>
<a href="#" class="collection-item">Outbox<span class="badge">14</span></a>
</div>
<h3>Badges in dropdowns</h3>
<ul id="dropdown" class="dropdown-content">
<li><a href="#">Inbox<span class="badge">12</span></a></li>
<li><a href="#!">Unread<span class="new badge">4</span></a></li>
<li><a href="#">Sent</a></li>
<li><a href="#">Outbox<span class="badge">14</span></a></li>
</ul>
<a class="btn dropdown-button" href="#" data-activates="dropdown">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
<h3>Badges in Navigation</h3>
<nav>
<div class="nav-wrapper">
<a href="" class="brand-logo">TutorialsPoint</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="">Inbox</a></li>
<li><a href="">Unread<span class="new badge">4</span></a></li>
<li><a href="#">Sent</a></li>
<li><a href="#">Outbox</a></li>
</ul>
</div>
</nav>
</body>
</html>

 

خروجی بصورت زیر خواهد بود

برچسب ها

, , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز | بدون نظر »

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

درباره کدنویسان
آکادمی کدنویسان جهت کمک به دانشجویان رشته های کامپیوتر و فناوری اطلاعات و همه علاقمندان به طراحی و برنامه نویسی برای ویندوز، وب و موبایل ایجاد شده است.
بیشتر آموزش های سایت کدنویسان، بصورت رایگان ارائه شده است و بعضی بسته های آموزشی تصویری و نیز نرم افزارهای پیاده سازی شده در ازای پرداخت، قابل دانلود هستند.
هر گونه نظر، انتقاد یا پیشنهادی در مورد مطالب یا عملکرد کدنویسان دارید، حتما با ما در میان بگذارید.
نمادهای اعتماد ما


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.