إسكربت JQuery Float Dialog v1.0 لعمل رسائل فى صفحت موقعك

[القادرى]

لمشاهدة الاسكربت: 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 !



       &nbsp;<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



       &nbsp;<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-1.3.2.min.js

ثانية تحميل النسخة من هنا:
jquery.floatdialog.zip

لتحميل الديمو كامل :
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>

===============

اتمنى ان ينال اعجابكم ان شاء الله
هذه الاسكربت من برمجتى والنسخة مجانية

اترككم فى رعاية الله

[artint.net]

جميل وبسيط ماشاء الله عليك

[COSINUS]

بارك الله فيك
عندي سؤال : كيف يمكن تشغيل هذه النافذة بشكل أوتوماتيكي عند فتح الصفحة دون الضغط على رابط لتشغيلها.
شكرا لك

[shannof]

الله يعطيك العافية وجاري التجربة

[shannof]

الله يعطيك العافية

وجاري التجربة