نوار پیام jQuery
توسط تمپها
معرفی
نوار پیام jQuery یک افزونه قدرتمند و حرفهای برای افزودن نوار پیام به صفحههای شماست.
استفاده
ارجاع دادن فایلهای مربوطه به head صفحه شما مانند:
<!-- Styles --> <link rel="stylesheet" href="css/dpMessageBar.css" /> <!-- jQuery --> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <!-- required plugins --> <script type="text/javascript" src="js/jquery.dpMessageBar.js"></script>
نصب
$(document).ready(function(){ $("#dpMessageBar").dpMessageBar(); });
#dpMessageBar شناسه UL HTML برای استفاده از این افزونه است.
<ul id="dpMessageBar"> <li>پیام شما</li> <li>پیام شما</li> <li>پیام شما</li> <li>پیام شما</li> </ul>
گزینهها
loop
Signature: $("#dpMessageBar ").dpMessageBar ({loop: true })
Set whether to loop is active.
Default value is true
- autoload Signature: $("#dpMessageBar ").dpMessageBar ({autoload: true })
- speedAnimation Signature: $("#dpMessageBar ").dpMessageBar ({speedAnimation: 500 })
- delay Signature: $("#dpMessageBar ").dpMessageBar ({delay: 1000 })
- theme Signature: $("#dpMessageBar ").dpMessageBar ({theme: "navy" })
- showArrows Signature: $("#dpMessageBar ").dpMessageBar ({showArrows: false })
- position Signature: $("#dpMessageBar ").dpMessageBar ({position: "top" })
Set if showing the message bar when the page loads.
Default value is true
Set the speed animation in miliseconds (300, 500, 1000, 2000, etc) or "slow" and "fast".
Default value is "slow"
Set the delay in miliseconds (300, 500, 1000, 2000, 5000, etc).
Default value is 3000
Set the color theme. Possible values are: Cream, Navy, Green, Red, Chocolate
Default value is "cream"
Set if showing the arrows or not.
Default value is "true"
Set the position of the bar. Possible values are: top, fixed
Default value is "fixed"
استفاده از پیوندها
شما میتوانید به صورت معمولی از پیوندها در پیام استفاده کنید:
<ul id="dpMessageBar"> <li>پیام شما اینجا <a href="#">کلیک</a>< کنید/li> <li>پیام شما اینجا <a href="#">کلیک</a>< کنید/li> <li>پیام شما اینجا <a href="#">کلیک</a>< کنید/li> <li>پیام شما اینجا <a href="#">کلیک</a>< کنید/li> </ul>