منوهای Pop-Up در جاوا اسکریپتReviewed by Datacss.ir on Oct 27Rating:

منوهای Pop-Up در جاوا اسکریپت

 

در این قسمت از  مقالات طراحی سایت به معرفی منوهای Pop-Up در جاوا اسکریپت می پردازیم . توسط کادر های Pop-Up در جاوا اسکریپت ، می توان به کاربر پیغام اخطار داد ، از آن تایید گرفت و یا ورودی دریافت کرد . این کادر ها در مواقع مورد نظر ظاهر شده و عملیات تعیین شده برای آنها انجام خواهند داد .
به طور کلی ۳ نوع کادر Pop-Up در جاوا اسکریپت داریم :

√ کادر پیام یا هشدار ( alert Box )
√ کادر دریافت تایید (confirm Box )
√ کادر دریافت ورودی ( prompt Box )

از کادر alert Box ، برای اعلام یک پیام یا هشدار به کاربر استفاده می شود . این پیام که از قبل باید تعیین شده باشد ،در یک کادر ظاهر شده و تا زمانی که کاربر دکمه Ok را انتخاب نکند ، از بین نمی رود .
شکل کلی تعریف یک کادر منتی به صورت زیر است :
alert ( ” متن پیام یا هشدار ” ) ;
مثال : در مثال زیر یک کادر alert Box در تابع Alert_Box تعریف شده است . این تابع توسط دکمه فرمان ! Alert ، فراخوانی شده و کادر پیام خود را ظاهر می کند .

< script type=”text/javascript” >
function Alert_Box ( )
{
alert ( ” Welcome To DeveloperStudio ” ) ;
}
</script>
<input type=”button” id=”btnAlert” value=” Alert ! ” onclick=”Alert_Box( )” />

در مثال زیر یک کادر متن و یک دکمه فرمان قرار داده شده است . کاربر باید یک عدد را در کادر متن وارد کرده و بر روی دکمه فرمان کلیک کند . چنانچه عدد ورودی از ۱۰ کمتر باشد ، برنامه عبارت Welcome to DeveloperStdio را در خروجی چاپ کرده و در غیر این صورت یک کادر پیام با متن Number too big را به کاربر نشان می کند .

< script type=”text/javascript” >
function Alert_Box2 ( )
{
var Num = txtNum.value ;
if ( Num < 10 )
document.write ( “Welcome to DeveloperStudio ” ) ;
else
alert ( ” Number too big ” ) ;
}
< /script >
< input type=”text” id=”txtNum” / >
< input type=”button” id=”btnAlert2″ value=” Alert ! ” onclick=”Alert_Box2()” />

 

نکته : می توان در متن پیام کادرهای جاوا اسکریپت ، به تعداد مورد نیاز خط جدید ایجاد کرد . برای این منظور ، در متن پیام از کاراکتر ‘ \n ‘ به شرحی که در مثال زیر آمده است ، استفاده می شود :

< script type=”text/javascript” >
function Alert_Box3 ( )
{
alert ( “Hello . Dear User ” + ‘\n’ + “Welcome to DeveloperStudio “) ;
}
< /script >
< input type=”button” id=”btnAlert3″ value=” Alert ! with Line Brakes ” onclick=”Alert_Box3()” />

از کادر دریافت تایید ، برای اعلام یک پیام به کاربر و دریافت نظر آن مبنی بر قبول یا عدم قبول پیام مورد نظر استفاده می شود .
این کادر دارای ۲ دکمه فرمان OK و Cancel است ، که در صورت انتخاب گزینه OK ، کادر مقدار مثبت ( True ) و در صورت انتخاب گزینه Cancel ، کادر مقدار منفی ( False ) را به صفحه بر می گرداند .
شکل کلی تعریف یک کادر تایید به صورت زیر است :

confirm( ” متن پیام ” ) ;

نکته مهم : از مقدار برگشتی یک کادر تایید می توان در برنامه نویسی استفاده کرد . برای این منظور باید مقدار بازگشتی را در یک متغیر به شکل زیر ذخیره کرده و سپس از آن متغیر استفاده کرد . به مثال دقت کنید :

نام متغیر  =  confirm ( “متن پیام” ) ;

مثال : در مثال زیر یک تابع با یک کادر تایید ، قرار داده شده است . این تابع با دکمه فرمان btnChange ، فراخوانی می شود و کادر تایید خود را نشان می دهد . کادر از کاربر درباره رفتن به صفحه اصلی سایت می پرسد ، که در صورت تایید و فشردن دکمه OK مروگر به صفحه اصلی رفته و در صورت زدن دکمه Cancel یک پیام در خروجی چاپ می کند :

< script type=”text/javascript” >
function Change_Page( )
{
var x = confirm ( “Do you want go to home page ? ” ) ;
if ( x == true )
document.URL = “../Default.aspx” ;
else
document.write ( ” You pressed Cancel ! ” ) ;
}
< /script >
< input type=”button” id=”btnChange” value=” go to Home Page ? ” onclick=”Change_Page( )” />

از کادر دریافت ورودی ، برای اعلام یک پیام به کاربر و دریافت یک ورودی از وی استفاده می شود . در این حالت یک کادر حاوی پیام مورد نظر ، یک کنترل متنی برای ورود مقدار ، دکمه OK برای تایید و ارسال مقدار ورودی به صفحه و دکمه Cancel برای لغو عملیات کادر ، بر روی صفحه نمایش داده می شود .
همچنین می توان یک مقدار پیش فرض نیز در کادر تعیین کرد ، که هموراه به صورت پیش فرض در کنترل متنی کادر نمایش داده خواهد شد . تعیین مقدار پیش فرض اختیاری است .
شکل کلی تعریف یک کادر دریافت ورودی سه صورت زیر است :

prompt ( ” مقدار پیش فرض ” , ” متن پیام کادر” ) ;

مثال : در مثال زیر یک کادر دریافت ورودی ، برای دریافت نام کاربر در تابع Hello_User تعریف شده است . این تابع با کلیک بر روی دکمه فرمان Enter Name فراخوانی شده و سپس با دریافت نام کاربر یک پیام خوش آمد به کاربر در خروجی اعلام می کند . برای مشاهده خروجی بروی دکمه فرمان Enter Name کلیک کرده و سپس نام خود را در کادر وارد کنید :

< script type=”text/javascript” >
function Hello_User( )
{
var name = prompt ( “enter your name”) ;
if ( name != null )
document.write ( “hello dear ” + name + ” ” + “Welcome to DeveloperStudio” ) ;
}
< /script >
< input type=”button” id=”btnHello” onclick=”Hello_User()” value=”Enter Name” />

مثال : در مثاب زیر یک کادر دریافت تایید در تابع Change_page تعریف شده است . این کادر یک ورودی ، که نام یکی از بخش های آموزشی سایت DeveloperStudio است ، را از کاربر دریافت کرده و سپس آدرس مرورگر را به آدرس مربوط با آن نام تغییر می دهد . در این کادر مقدار پیش فرض Home Page در نظر گرفته شده است . برای مشاهده خروجی بروی دکمه فرمان کلیک کرده و سپس نام مقصد را انتخاب کنید . در صورت وارد کردن اسم نادرست ، یک کادر هشدار ظاهر خواهد شد :

< script type=”text/javascript” >
function Change_Page( )
{
var page = prompt ( “Where do you want to go ? ” , “Home Page” ) ;
switch ( page )
{
case “Home Page” :
document.URL = “../Default.aspx” ;
break ;
case “Html” :
document.URL = “../HTML/introducehtml.aspx” ;
break ;
case “CSS” :
document.URL = “../CSS/CSSIntroduce.aspx” ;
break ;
case “Java Script” :
document.URL = “../JavaScript/Java_Script_Introduce.aspx” ;
break ;
case “SQL” :
document.URL = “../SQL/SQLIntroduce.aspx” ;
break ;
default :
alert ( “Incorrect Name” ) ;
}
}
< /script>
<input type=”button” id=”Button2″ onclick=”Change_Page()” value=”Enter Page” />

 

منبع: sitedesign-co.com

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست
Call Now Buttonتماس سریع