‫ایجاد alert,confirm,prompt هایی متفاوت با jQuery Impromptu

حال مواقعی پیش می‌آید که نیاز داریم پیغام هایی با گرافیک و عبارات متفاوت نمایش دهیم . برای رفع این نیاز می‌توانیم از پلاگین 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.
  

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){}

  برای لغو تغییر state ، مقدار return false کنید یا متد preventDefault از event را فراخوانی کنید .
  
  
• statechanged
  یک تابع که زمانی که یک state در حال تعویض شدن هست فراخوانی می‌شود .
  پیشفرض :
  

  function(event, toStateName){}

• callback
  یک تابع که زمانی که ( یکی از دکمه‌های prompt کلیک شود و ) prompt بسته شود ، فراخوانی می‌شود .
  پیشفرض :
  

  function(event[, value, message, formVals]){}

  سه پارامتر آخر تنها زمانی که یک دکمه‌ی prompt کلیک شده باشد موجود هستند .
  
  
• 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

var myPrompt = $.prompt( msg , options );
myPrompt.bind('promptloaded', function(e){});

div.dnt .dntmessage {
     color: #444444;
     line-height: 20px;
     padding: 10px;
/*       Edited      */
     direction:rtl;
     text-align:right;
}

/*    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     */