حال مواقعی پیش میآید که نیاز داریم پیغام هایی با گرافیک و عبارات متفاوت نمایش دهیم . برای رفع این نیاز میتوانیم از پلاگین jQuery Impromptu استفاده کنیم . البته این پلاگین قابلیتهای دیگری هم دارد که در این مقاله با آنها آشنا میشویم .
از ویژگیهای این پلاگین میتوان حجم کم (حدود 11 کیلوبایت) و قدرت شخصی سازی بالا اشاره کرد .
طرز استفاده به این شکل است :
$.prompt( msg , options )
msg میتواند یک string یا یک شئ از states باشد . string ارسال شده میتواند شامل کدهای html باشد .
یک شئ states هم شامل مجموعه ای از وضعیتهای prompt است . برای مثال میتوان یک prompt ایجاد کرد که مثل یک Wizard شامل چند مرحله باشد .
options هم تنظیماتی است که میتوان مشخص کرد . تنظیماتی مثل : prefix,classes,persistent,timeout,...
msg :
گفتیم شئ states شامل وضعیتهای مختلف prompt است . هر وضعیت ( state ) میتواند شامل بخشهای زیر باشد :
- html : مقدار Html وضعیت
- buttons : یک شئ شامل متن و مقدار دکمه هایی که کاربر میتواند کلیک کند
- focus : ایندکس دکمهی focus شده در وضعیت
- submit : تابعی که زمانی که یکی از دکمههای وضعیت انتخاب شود فراخوانی میشود .
اگر در این تابع false بازگشت داده شود یا متد preventDefault از event فراخوانی شود ، prompt باز میماند . ( روشی برای جلوگیری از بسته شدن prompt هنگام تغییر state یا اعتبار سنجی فرم )
همچنین شئ event شامل state ( المنت state ) و stateName ( نام state ) میباشد .
پیشفرض :
function(event, value, message, formVals){}
- position : مشخص کنندهی موقعیت state که شامل موارد زیر است :
position: { container: '#container', x: 0, y: 0, width: 0, arrow: 'lm' }
container : selector المنتی است که state باید در آن مکان قرار بگیرد .
x/y : موقعیت نسبی prompt نسبت به container
arrow : جهت نمایش فلش prompt است که میتواند یکی از این مقادیر باشد : tl, tc, tr, rt, tm, tb, br, bc, bl, lb, lm, lt.
var tourSubmitFunc = function (e, v, m, f) { if (v === -1) { $.prompt.prevState(); return false; } else if (v === 1) { $.prompt.nextState(); return false; } }; var states = { state0: { html: "State1", buttons: { Next: 1 }, //position: { container: '#container', x: 10, y: 0, width: 350, arrow: 'lm' }, submit: tourSubmitFunc }, state1: { html: "State2", buttons: { Prev: -1, Next: 1 }, submit: tourSubmitFunc }, state2: { html: "State3", buttons: { Prev: -1, Done: 0 }, submit: tourSubmitFunc } }; $.prompt(states);
تا به اینجا با پارامتر اول prompt آشنا شدیم و فهمیدیم که میتوانیم یک رشته یا یک شئ states به عنوان message به prompt ارسال کنیم .
options :
اکنون با optionهای prompt ( پارامتر دوم ) آشنا خواهیم شد .
توجه کنید که زمانی که یک رشته به prompt ارسال کنید ، مقادیر buttons,focus,submit از این تنظیمات دریافت میشود .
به عبارت دیگر ، زمانی که یک شئ states به prompt ارسال کنید ، از مقادیر فوق که در تنظیمات است ، استفاده نمیشود .
- loaded
یک تابع که زمانی که prompt کامل بارگزاری شده فراخوانی میشود .
$.prompt("Message", { loaded: function() { alert("Prompt Loaded !"); } });
- submit
یک تابع که زمانی که یکی از دکمههای state کلیک شود ، فراخوانی میشود .
( زمانی اتفاق میوفتد که یک رشته به عنوان متن به prompt ارسال کرده باشید و زمانی که یک شئ از states ارسال میکنید ، هنگام کلیک دکمههای آنها ، این تابع فراخوانی نمیشود . )
پیشفرض :
function(event){}
- statechanging
یک تابع که زمانی که یک state در حال تعویض شدن هست فراخوانی میشود .
پیشفرض :
function(event, fromStateName, toStateName){}
- statechanged
یک تابع که زمانی که یک state در حال تعویض شدن هست فراخوانی میشود .
پیشفرض :
function(event, toStateName){}
- callback
یک تابع که زمانی که ( یکی از دکمههای prompt کلیک شود و ) prompt بسته شود ، فراخوانی میشود .
پیشفرض :
function(event[, value, message, formVals]){}
- buttons
یک شئ شامل مجموعه ای از دکمهها .
پیشفرض :
{ Ok : true }
[ {title: 'Hello World',value:true}, {title: 'Good Bye',value:false} ]
- prefix
یک پیشوند برای همه css classها و idهای المنتهای html که توسط prompt ایجاد میشود .
پیشفرض : jqi
- classes
یک css class که به بالاترین سطح prompt داده میشود .
در حالت پیشفرض مقداری ندارد .
- focus
ایندکس دکمهی focus شده
پیشفرض : 0
- zIndex
zIndex اعمال شده بروی prompt .
پیشفرض : 999
- useiframe
استفاده از یک iframe برای overlay در IE6
پیشفرض : false
- top
فاصلهی prompt از بالای صفحه
پیشفرض : 15%
- opacity
میزان شفافیت لایهی ای که صفحه را پوشانده است .
پیشفرض : 0.6
- overlayspeed
سرعت نمایش افکت fadeIn , fadeOut لایهی پوشاننده .
مقادیر قابل قبول : "slow", "fast", number(milliseconds)
پیشفرض : "slow"
- promptspeed
سرعت نمایش prompt .
مقادیر قابل قبول : "slow", "fast", number(milliseconds)
پیشفرض : "fast"
- show
نام یک متد jQuery برای animate کردن نمایش prompt .
مقادیر قابل قبول : "show","fadeIn","slideDown", ...
پیشفرض : "promptDropIn"
- persistent
بسته شدن prompt زمانی که بروی لایهی fade کلیک شود .
false : بسته شدن
پیشفرض : true
- timeout
مدت زمانی که پس از آن ، prompt بصورت خودکار بسته میشود . ( milliseconds )
پیشفرض : 0
returns :
مقدار بازگشتی متد prompt ، یک شئ jQuery ، شامل همهی محتویات تولید شده توسط prompt است .
Events using Bind :
- promptloaded
معادل loaded در optionها .
- promptsubmit
هنگام submit شدن ( کلیک شدن یکی از دکمههای ) state فعال میشود .
- promptclose
معادل callback در optionها .
- promptstatechanging
معادل statechanging در optionها .
- promptstatechanged
معادل statechanged در optionها .
ظرز بایند کردن یک event به شئ prompt :
var myPrompt = $.prompt( msg , options ); myPrompt.bind('promptloaded', function(e){});
- jQuery.prompt.setDefaults(options)
تعیین مقادیر پیشفرض برای همهی promptها .
jQuery.prompt.setDefaults({ prefix: 'myPrompt', show: 'slideDown' });
- jQuery.prompt.setStateDefaults(options)
تعیین مقادیر پیشفرض برای stateها .
jQuery.prompt.setStateDefaults({ buttons: { Ok:true, Cancel:false }, focus: 1 });
- jQuery.prompt.getCurrentState()
یک شئ jQuery از state جاری برمیگرداند .
- jQuery.prompt.getCurrentStateName()
نام state جاری را برمیگرداند .
- jQuery.prompt.getStateContent(stateName)
یک شئ jQuery از state مشخص شده برمیگرداند .
- jQuery.prompt.goToState(stateName, callback)
state مشخص شده را در prompt نمایش میدهد .
callback تابعی است که بعد از تغییر state فراخوانی میشود .
- jQuery.prompt.nextState(callback)
prompt را به state بعدی منتقل میکند .
- jQuery.prompt.prevState(callback)
prompt را به state قبلی منتقل میکند .
- jQuery.prompt.close()
prompt را میبندد .
حال که با این پلاگین آشنا شدیم ، سه دستور جاوا اسکریپتی که در ابتدای مقاله ذکر کردیم را با این پلاگین پیاده سازی میکنیم .
- alert
$.prompt("یک پیام تستی", { prefix: 'dnt', buttons: { 'تایید': true } });
نتیجه :
- confirm
$.prompt("درخواست تایید - موافقید ؟", { prefix: 'dnt', buttons: { 'تایید': true, 'انصراف': false } });
نتیجه :
- prompt
یک فرم html مخفی برای نمایش در prompt :
<div class="prompt-content" style="display: none;"> <span>نام خود را وارد نمایید : </span> <span> <input type="text" name="name" /> </span> </div>
نمایش prompt :
$.prompt( $(".prompt-content").html(), { prefix: 'dnt', buttons: { 'تایید': true, 'انصراف': false } });
نتیجه :
در این سه مثال آخر ، از یک css متفاوت استفاده کردیم . این پلاگین یک سری کلاس دارد که نام این کلاسها از ترکیب مقدار prefix که در option مشخص کردیم حاصل میشود .
div.dnt .dntmessage { color: #444444; line-height: 20px; padding: 10px; /* Edited */ direction:rtl; text-align:right; }
البته راه بهتری هم هست که نیاز به آشنایی با فایرباگ دارد . در این روش ابتدا کل قالب jqi ( موجود در قالب پیشفرض ) را در برنامه خود کپی میکنیم ، مقادیر jqi را با نام قالب جایگزین میکنیم ، مقدار prefix را در prompt برابر با نام قالب قرار میهیم .
اکنون در FireFox یک prompt ایجاد میکنیم و توسط فایرباگ استایل هایی که با نام قالب بروی prompt اعمال شدهاند را مطابق سلیقه تغییر میدهیم . در مرحله آخر به تب CSS در فایرباگ میرویم و کل استایلهای مربوط به قالب را کپی و جایگزین استایل قبلی در برنامه میکنیم .
/* Start : DotNetTips Theme */ .dntfade { background-color: #AAAAAA; position: absolute; } div.dnt { background-color: #FFFFFF; border-radius: 10px 10px 10px 10px; border: 1px solid #FFFFFF; box-shadow: 0px 0px 10px 1px #6D6D6C; font-family: tahoma; font-size: 11px; padding: 7px; position: absolute; text-align: left; width: 400px; } div.dnt .dntcontainer { font-size: small; } div.dnt .dntclose { color: #BBBBBB; cursor: pointer; font-weight: bold; position: absolute; top: 4px; width: 18px; } div.dnt .dntmessage { color: #444444; line-height: 20px; padding: 10px; } div.dnt .dntbuttons { background-color: #F4F4F4; border: 1px solid #EEEEEE; padding: 5px 0px; text-align: right; } div.dnt button { background-color: #2F6073; border: 1px solid #F4F4F4; color: #FFFFFF; font-size: 12px; font-weight: bold; margin: 0px 10px; padding: 3px 10px; } div.dnt button:hover { background-color: #728A8C; } div.dnt button.dntdefaultbutton { background-color: #0099CC; } .dnt_state { direction: rtl; text-align: right; } .dnt_state button { font-family: tahoma; } .dntwarning .dnt .dntbuttons { background-color: #CCDDFF; } .dnt .dntarrow { border: 10px solid transparent; font-size: 0px; height: 0px; line-height: 0; position: absolute; width: 0px; } .dnt .dntarrowtl { border-bottom-color: #FFFFFF; left: 10px; top: -20px; } .dnt .dntarrowtc { border-bottom-color: #FFFFFF; left: 50%; margin-left: -10px; top: -20px; } .dnt .dntarrowtr { border-bottom-color: #FFFFFF; right: 10px; top: -20px; } .dnt .dntarrowbl { border-top-color: #FFFFFF; bottom: -20px; left: 10px; } .dnt .dntarrowbc { border-top-color: #FFFFFF; bottom: -20px; left: 50%; margin-left: -10px; } .dnt .dntarrowbr { border-top-color: #FFFFFF; bottom: -20px; right: 10px; } .dnt .dntarrowlt { border-right-color: #FFFFFF; left: -20px; top: 10px; } .dnt .dntarrowlm { border-right-color: #FFFFFF; left: -20px; margin-top: -10px; top: 50%; } .dnt .dntarrowlb { border-right-color: #FFFFFF; bottom: 10px; left: -20px; } .dnt .dntarrowrt { border-left-color: #FFFFFF; right: -20px; top: 10px; } .dnt .dntarrowrm { border-left-color: #FFFFFF; margin-top: -10px; right: -20px; top: 50%; } .dnt .dntarrowrb { border-left-color: #FFFFFF; bottom: 10px; right: -20px; } /* End : DotNetTips Theme */