لمشاهدة الاسكربت:
JQuery Float Dialog v1.0 - Easy PopUp - Expbuilder 2009
الشرح:
لتنفيذ الاسكربت يتم كتابة الكود على الهيئة التالية:
كود:
$(Element).floatdialog(dialog id, options {backgroundcolor, speed, event, effect, move, closeClass} ) مثال:
كود HTML:
<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 ]
كود HTML:
<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 ]
تشغيل / ايقاف التأثير على الرسالة
كود HTML:
<script>
$("#demo3").floatdialog("dialog3", {effect: false});
</script> 3- السرعة
الخيارات ==> [ slow - fast - number ]
كود HTML:
<script>
$("#demo4").floatdialog("dialog4", {speed: 'fast'});
</script> 4- الحدث للفأرة(mouse)
[ click - mouseover ...ect ]
<script>
$("#demo4").floatdialog("dialog4", {speed: 'fast'});
</script>
5- لون الخلفية
كود HTML:
<script>
$("#demo6").floatdialog("dialog6", {backgroundcolor: 'red'});
</script> كود HTML:
<script>
$("#demo6").floatdialog("dialog6", {backgroundcolor: '#CC0033'});
</script> 6- زرار اغلاق الرسالة
closeClass
الافتراضى: closebutton
كود HTML:
<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-1.3.2.min.js
ثانية تحميل النسخة من هنا:
jquery.floatdialog.zip
لتحميل الديمو كامل :
jquery.floatdialog.package.zip
ثالثا طريقة وضع الكود بالصفحة:
1- داخل الوسام head قم بكتابة مسار الاسكربت:
كود HTML:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.floatdialog.js"></script>
2- داخل الوسام head ضع كود الاستايل ايضا (css)
كود HTML:
<style>
.disable_masking
{
z-index: 6001;
position: absolute;
display: none;
}
.closebutton
{
float: right;
text-decoration: none;
}
</style> 3- وضع الكود التالى داخل الوسام body مع تغيير ما يلزم
كود HTML:
<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> ===============
اتمنى ان ينال اعجابكم ان شاء الله
هذه الاسكربت من برمجتى والنسخة مجانية
اترككم فى رعاية الله
المواضيع المشابهه 
