loading...

ابزارها قالب

آموزش طراحی پنجره ی شناور وب با استفاده از کد های جاوا اسکریپت ، Css ، jquery و html

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 1902 سه شنبه 31 شهريور 1394 نظرات (0)

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

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

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

کد های html

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

<<<code>>>

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

<div class="win-blur"></div> <!-- صفحه ی تار پشتی -->

<div class="win-width"> <!-- تنظیم کننده ی پنجره -->

   <div class="win-page"> <!-- خود پنجره -->

      <span class="win-close">X</span> <!-- بستن -->

      <p>

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

      </p>

 

   </div>

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

<script type="text/javascript" src="http://www.toolstheme.ir/js/jquery.js"></script>

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

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

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

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

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

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

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

نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 2
  • تعداد اعضا : 3196
  • آی پی امروز : 40
  • آی پی دیروز : 115
  • بازدید امروز : 308
  • باردید دیروز : 822
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 1,921
  • بازدید ماه : 10,418
  • بازدید سال : 101,788
  • بازدید کلی : 1,788,223
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص