JQuery Float Dialog v1.0 - Easy PopUp - Expbuilder 2009
لمشاهدة الاسكربت:
الشرح:
لتنفيذ الاسكربت يتم كتابة الكود على الهيئة التالية:
$(Element).floatdialog(dialog id, options {backgroundcolor, speed, event, effect, move, closeClass} )مثال:
<a id="demo1" href="javascript:void(0);">Clicking Here</a>
<div id="dialog1">
<a href="javascript:void(0);" class="closebutton">X</a>
<h1>Demo1 - Default use</h1>
<h2>This is a demo of the JQuery Float Dialog v1.0</h2>
<div class="data">
this is the default use, you can do this demo by your self !
<b><a href="#demo1viewsource" class="closebutton">Check demo1 view Source</a></b>
</div>
</div>
<script>
$("#demo1").floatdialog("dialog1");
</script>
للتحكم فى الاسكربت (الشكل) يتم وضع البيانات المطلوبة فى Options
1- الخيار move
وهذا الخيار لتحديد مكان مجئ الرسالة
الخيارات ==> [ default - down - up - left - right - slidedown ]
<a id="demo2" href="javascript:void(0);">Slide down</a>
<div id="dialog2">
<a href="javascript:void(0);" class="closebutton">X</a>
<h1>Demo2 - Options - slide Down</h1>
<h2>This is a demo of the JQuery Float Dialog v1.0</h2>
<div class="data">
you can make the box is slide down .. also can make it slide up, left and right
<b><a href="#demo2viewsource" class="closebutton">Check demo2 view Source</a></b>
</div>
</div>
<script>
$("#demo2").floatdialog("dialog2", {move: 'down'});
</script>
2- التأثيرات
الخيارات ==> [ true - false ]
تشغيل / ايقاف التأثير على الرسالة
<script>
$("#demo3").floatdialog("dialog3", {effect: false});
</script>
3- السرعة
الخيارات ==> [ slow - fast - number ]
<script>
$("#demo4").floatdialog("dialog4", {speed: 'fast'});
</script>
4- الحدث للفأرة(mouse)
[ click - mouseover ...ect ]
<script>
$("#demo4").floatdialog("dialog4", {speed: 'fast'});
</script>
5- لون الخلفية
<script>
$("#demo6").floatdialog("dialog6", {backgroundcolor: 'red'});
</script>
<script>
$("#demo6").floatdialog("dialog6", {backgroundcolor: '#CC0033'});
</script>
6- زرار اغلاق الرسالة closeClass
الافتراضى: closebutton
<a id="demo6" href="javascript:void(0);">You can change the close button class to what you want</a>
<div id="dialog6">
<a href="javascript:void(0);" class="myclosebutton">X</a>
<h1>Demo2 - Options - Close button class</h1>
<h2>This is a demo of the JQuery Float Dialog v1.0</h2>
<div class="data">
You can change the close button class to what you want
</div>
</div>
<script>
$("#demo6").floatdialog("dialog6", {closeClass: '.myclosebutton'});
</script>
طريقة التركيب:
اولا: تحميل مكتبة ال jquery من هنا:
ثانية تحميل النسخة من هنا:
لتحميل الديمو كامل :
jquery.floatdialog.package.zip
ثالثا طريقة وضع الكود بالصفحة:
1- داخل الوسام head قم بكتابة مسار الاسكربت:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.floatdialog.js"></script>
2- داخل الوسام head ضع كود الاستايل ايضا (css)
<style>
.disable_masking
{
z-index: 6001;
position: absolute;
display: none;
}
.closebutton
{
float: right;
text-decoration: none;
}
</style>
3- وضع الكود التالى داخل الوسام body مع تغيير ما يلزم
<a id="linkid" href="javascript:void(0);">Clicking Here</a>
<div id="dialogid">
<a href="javascript:void(0);" class="closebutton">X</a>
<h1>DIALOG DATA HERE !</h1>
</div>
<script>
$("#linkid").floatdialog("dialogid");
</script>
===============
اتمنى ان ينال اعجابكم ان شاء الله
هذه الاسكربت من برمجتى والنسخة مجانية
اترككم فى رعاية الله
