alert,confirm,prompt سه متد توکار JavaScript هستند که برای نمایش پیغام ، دریافت تایید و دریافت مقدار از کاربر هستند .
گرافیک این پیغامها هم وابسته به مرورگر هستند و قابل تغییر نیستند . متن عنوان و دکمهها هم با توجه به زبان سیستم عامل تعیین میشوند و قابل تغییر توسط برنامه نویس نیستند.
حال مواقعی پیش میآید که نیاز داریم پیغام هایی با گرافیک و عبارات متفاوت نمایش دهیم . برای رفع این نیاز میتوانیم از پلاگین 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){}
value مقدار دکمه ای است که بروی آن کلیک شده ، message مقدار html تعریف شده برای state است ، formVals هم در صورتی که در html تعریف شده برای state ، المنتهای فرم وجود داشته باشد ، شامل نام/مقادیر آنها میباشد . ( برای دریافت مقادیر فرم ، باید از نام المنت استفاده نمایید . )
- 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.
نحوه تعریف یک wizard ساده با شئ states :
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 ارسال میکنید ، هنگام کلیک دکمههای آنها ، این تابع فراخوانی نمیشود . )
پیشفرض :
- statechanging
یک تابع که زمانی که یک state در حال تعویض شدن هست فراخوانی میشود .
پیشفرض :
function(event, fromStateName, toStateName){}
برای لغو تغییر state ، مقدار return false کنید یا متد preventDefault از event را فراخوانی کنید .
- statechanged
یک تابع که زمانی که یک state در حال تعویض شدن هست فراخوانی میشود .
پیشفرض :
function(event, toStateName){}
- callback
یک تابع که زمانی که ( یکی از دکمههای prompt کلیک شود و ) prompt بسته شود ، فراخوانی میشود .
پیشفرض :
function(event[, value, message, formVals]){}
سه پارامتر آخر تنها زمانی که یک دکمهی prompt کلیک شده باشد موجود هستند .
- buttons
یک شئ شامل مجموعه ای از دکمهها .
پیشفرض :
شکل دیگر تعریف دکمه به این شکل است :
[
{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 :
استفاده از Eventها با بایند کردن
- 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){});
Helper Functions :
- 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 مشخص کردیم حاصل میشود .
برای مثال اگر مقدار prefix را برابر با dnt قرار بدهیم ، برای استایل دهی متن پیام باید از کلاس div.dnt .dntmessage استفاده کنید .
همانطور که در سه مثال آخر مشاهده کردید ، تغییری در استایل prompt داشتیم که با تغییر دادن استایلهای مورد نظر انجام شد .
برای تهیهی یک قالب سفارشی باید selector المنت هایی که نیاز به تغییر دارند را از
قالب پیشفرض پیدا کنید ، سپس قسمت prefix از selector را به نام قالب خودتان تغییر بدید و استایل را ویرایش کنید . سپس هنگام ایجاد prompt ، مقدار prefix را برابر نام قالب قرار دهید .
مثلا میخواهید یک قالب به نام dnt داشته باشید . میخواهید متن قالب راست به چپ باشد .
div.dnt .dntmessage {
color: #444444;
line-height: 20px;
padding: 10px;
/* Edited */
direction:rtl;
text-align:right;
}
البته راه بهتری هم هست که نیاز به آشنایی با فایرباگ دارد . در این روش ابتدا کل قالب jqi ( موجود در
قالب پیشفرض ) را در برنامه خود کپی میکنیم ، مقادیر jqi را با نام قالب جایگزین میکنیم ، مقدار prefix را در prompt برابر با نام قالب قرار میهیم .
اکنون در FireFox یک prompt ایجاد میکنیم و توسط فایرباگ استایل هایی که با نام قالب بروی prompt اعمال شدهاند را مطابق سلیقه تغییر میدهیم . در مرحله آخر به تب CSS در فایرباگ میرویم و کل استایلهای مربوط به قالب را کپی و جایگزین استایل قبلی در برنامه میکنیم .
قالبی که بنده برای سه دستور فوق استفاده کردم ( dnt ) ، به این شکل است :
/* 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 */