آموزش ایجاد پنجره ی شناور در صفحه ی وب

          حمیدرضا 
            بازدید : 2378
          سه شنبه 31 شهریور 1394
           نظرات (0)
        

در پی درخواست یکی از کاربران ، این مطلب را ایجاد کرده ام. می خواهم در این جا به طور ساده طرز ایجاد یک پنجره ی شناور برای صفحات وب را آموزش دهم. در این آموزش از کد های html ، css و javascript و از کتابخانه ی jquery استفاده می کنیم.

برای این که کد ها را آزمایش کنید از ابزار زیر استفاده کنید:

دمو ساز - آزمایش کد ها

کد های html

خب! ابتدا کد های اچ تی ام ال:

<<<code>>>

<a href="#" title="باز کردن پنجره" id="winOpen"> open floating window </a>

<p>

چیزی که در پنجره نمایش داده می شود.

</p>

</div>

<<</code>>>

کد های Css

همان طور که می بینید کد های اچ تی ام ال بسیار ساده هستند و چیز زیادی ندارند. اما قسمت اصلی مربوط به کد های سی اس اس است. اصل کار برای ایجاد پنجره ی شناور کد های سی اس اس است. شما اگر کمی خلاق باشید می توانید با استفاده از کد های css ، پنجره های متنوع و بسیار زیبایی طراحی کنید. اما به غیر از زیبایی ، مسئله ی استاندارد هم مطرح است. ما باید پنجره را طوری طراحی کنیم که برای صفحه نمایش های مختلف با اندازه های متنوع قابل رویت باشد.

نکته: کد های زیر را باید بین <style> و <style> قرار دهید. (البته می توانید از روش های دیگر استفاده از کد های css در صفحات وب نیز استفاده کنید.)

<<<code>>>

.win-blur{

background: #000;

opacity: 0.75; /* محو کردن */

position: fixed;

right: 0; /* فاصله از راست */

top: 0; /* فاصله از بالا */

left: 0; /* فاصله از چپ */

bottom: 0; /* فاصله از پایین */

z-index: 10000;

display: none; /* پنهان کردن */

}

.win-width{

position: fixed;

top: 30%;

right: 0;

left: 0;

z-index: 10001;

display: none; /* پنهان کردن */

}

.win-page{

width: 70%;

background: #fff;

border: 1px solid #ddd; /* خط حاشیه با ذخامت 1پیکسل */

border-radius: 3px; /* خمیدگی گوشه ها */

padding: 10px 2%;

margin: 0 auto; /* شی را وسط در وسط قرار می دهد */

}

.win-close{

cursor: pointer; /* تغییر نشانگر موس */

color: #f00;

font: bold 20px comic sans ms;

}

<<</code>>>

قسمت های قرمز رنگ همه مربوط به فاصله ی شی ما از لبه های صفحه است. الان همه ی موارد صفر هستند. این یعنی شی ما تمام صفحه را پر می کند. (نکته: ویژگی های top , right , bottom , left در سی اس اس نسبت به تغییر مقدار position معنی خاصی دارند.)

قسمت آبی رنگ مشخص کننده ی عمقی از صفحه است که شی باید در آن قرار گیرد. هر چه مقدار آن بیشتر باشد ، شی بیشتر روی اشیا دیگر می آید. (توضیح بیشتر: در بسیاری از موارد وقتی شما می خواهید صفحه ای را طراحی کنید ، بعضی از اشیا صفحه روی یک دیگر می افتند. مروگر های مختلف ، پیشفرض هایی برای این که مشخص کنند ، کدام شی روی دیگری باشد دارند. اما بعضی مواقع شما می خواهید خودتان این موضوع را تعیین کنید. یعنی بگویید کدام شی روی دیگری قابل نمایش باشد. کار z-index همین است. در اینجا من مقدار بسیار زیادی را معلوم کرده ام تا روی تمام اشیا صفحه نمایش داده شود. توجه داشته باشید که این ویژگی یک ویژگی نسبی است و برای انواع تگ ها قابل تعریف است.)

قسمت سبز رنگ ، کلاسی است برای تنظیم طرز قرار گیری پنجره ی شناور. این کلاس تنها وظیفه ی واکنش گرا کردن پنجره را دارد. اگر این کلاس نباشد می تواند پنجره را ساخت اما به سختی می توان آن را واکنش گرا کرد.

قسمت بنفش رنگ ، مشخص کننده ی فاصله ی درونی شی ماست. مقدار 10px 2% نشان دهنده ی این است که از بالا 10پیکسل ، از پایین 10پیکسل ، از راست 2% و چپ نیز 2% فاصله داشته باشد.

قسمت نارنجی رنگ ، مشخص کننده ی ویژگی های font است. با این مقدار علامت ضربدر ما درشت (bold) ، با اندازه ی 20px و با فونت comic sans ms (یکی از فونت های پیشفرض ویندوز) نوشته می شود.

کد های javascript و jquery

بعد از این که طراحی های مورد نظر انجام شد ، وقت آن است که پنجره را با استفاده از جاوا اسکریپت و جی کوئری باز و بسته کنیم.

نکته: قبل از کد های جی کوئری باید ، کتابخانه ی جی کوئری را در صفحه بارگذاری کنید. برای این کار از کد زیر قبل از کد های پایین استفاده کنید.

<<<code>>>

<<</code>>>

نکته: کد های زیر را باید بین <script> و </script> و بعد از کد بالا قرار دهید.

<<<code>>>

$(document).ready( function(){ // اجرا بعد از لود کامل صفحه

$('#winOpen').click( function(){ // باز شدن پنجره

$('.win-blur').show(); // نمایش

$('.win-width').show(); // نمایش

} );

$('.win-close').click( function(){

$('.win-blur').hide(); // پنهان کردن

$('.win-width').hide(); // پنهان کردن

} );

<<</code>>>

قسمت های قرمز رنگ مربوط به نمایش دادن و پنهان کردن پنجره هستند. در جی کوئری چند متد برای نمایش دادن و پنهان کردن اشیا وجود دارد. شما می توانید برای این که حالت زیبا تری به باز شدن و بسته شدن پنجره بدهید ، از دیگر متد ها استفاده کنید. برای خواندن توضیحات بیشتر در مورد متد های انیمیشن در جی کوئری اینجا کلیک کنید.

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

دمو ساز - آزمایش کد ها

نتیجه ی نهایی کد های بالا

این آموزش نیز به پایان رسید. از کاربری که ایده های جدید برای ارسال مطالب جدید به من می دهد بسیار متشکرم. می توانید سوالات خود را در بخش نظرات بپرسید.

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2560	snakeeye
طراحی باکس دانلود	6	2769	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9475	grimboy
انواع قالب اختصاصی	3	2313	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2718	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9847	jack7788