ایجاد کادر شناور با جاوا اسکریپت در سایت ها
نمایش دادن اطلاعات مهم به کاربران یکی از اهداف طراحان و توسعه دهندگان وب است. یکی از راه های نمایش اطلاعات مهم در سایت ها استفاده از floating box یا کادر شناور است. این کادر ها علاوه بر کارایی که دارند به زیبایی سایت شما نیز کمک می کنند. کادر های شناور عموما به صورت شناور در گوشه های سایت مورد استفاده قرار می گیرند و اطلاعات مهمی را به کاربر نشان می دهند. در این مقاله قصد داریم نحوه ایجاد کادر شناور با جاوا اسکریپت را آموزش دهیم. برای این کار ما از کد های css، htmlو javascript در تعامل با یکدیگر استفاده می کنیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
استفاده از کد های مختلف برای ایجاد کادر شناور با جاوا اسکریپت
یکی از قابلیت های کد نویسی حرفه ای استفاده از کد های آماده است. این کد های کم حجم می توانند در بسیاری از مواقع بسیار به شما کمک کنند. در این جا ما از یک کد آماده با قابلیت استفاده برای زبان فارسی و انگلیسی، قابلیت سفارشی سازی با استایل css، اسکرول خودکار و امکان نمایش پایین یا بالای صفحه برای ایجاد کادر شناور با جاوا اسکریپت استفاده کرده ایم. کد آماده ما به صورت زیر است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
} #top-bar{ position:absolute; width:auto; visibility:hidden; background-color:#F90; border:1px solid #333; padding:2px; z-index:100; direction:rtl; } </style> <script type="text/javascript"> //0 or 1 var persistclose = 1; var startX = 4; var startY = 80; //"fromtop" or "frombottom" var verticalpos = "fromtop"; function ieCompattest(){ return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body } function getCookie(Name){ var search = Name + "=" var returnvalue = ""; if(document.cookie.length > 0){ offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue = unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closeBar(){ if(persistclose){ document.cookie = "remainclosed=1"; } document.getElementById("top-bar").style.visibility = "hidden"; } function staticBar(){ barheight = document.getElementById("top-bar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el = d.getElementById(id); if (!persistclose || persistclose && getCookie("remainclosed") == "") el.style.visibility = "visible" if(d.layers)el.style = el; el.sP = function(x,y){this.style.right = x + "px"; this.style.top = y + "px";}; el.x = startX; if (verticalpos == "fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : ieCompattest().scrollTop + ieCompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft = function(){ if(verticalpos == "fromtop"){ var pY = ns ? pageYOffset : ieCompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: ieCompattest().scrollTop + ieCompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("top-bar"); stayTopLeft(); } if(window.addEventListener){ window.addEventListener("load", staticBar, false); } else if(window.attachEvent){ window.attachEvent("onload", staticBar); } else if(document.getElementById){ window.onload = staticBar; } </script> </head> <body> <div id="top-bar"> <a href="" onclick="closeBar(); return false;"><img src="close.gif" border="0" height="12" width="12" alt="close" title="close"></a> پیامی را که می خواهید در کادر نمایش داده شود در این قسمت درج کنید، برای تست عملکرد کادر صفحه را به پائین اسکرول کنید. </div> <hr> با بسته شدن کادر، کوکی با نام remainclosed با مقدار 1 در مرورگر ایجاد می شود که مانع از نمایش مجدد کادر در بارگذاری های بعدی صفحه خواهد شد، این کوکی تا زمانی که کاربر پنجره مرورگر را نبندد پابرجا خواهد بود لذا برای حذف آن از دکمه ای که بدین منظور در نظر گرفته شده استفاده می کنیم. <script type="text/javascript"> function showBar(){ if(persistclose){ document.cookie = 'remainclosed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; window.location.reload(false); } } </script> <input type="button" value="نمایش مجدد کادر (حذف کوکی یادآور)" onclick="showBar();"> </body> </html> |
این کد تمام ویژگی های مورد نیاز ما را دارد. اما با این حال هنوز سفارشی نشده است. برای ایجاد کادر شناور با جاوا اسکریپت باید چند تغییر جزئی در آن ایجاد کنیم.
سفارشی سازی کد ایجاد کادر شناور با جاوا اسکریپت
ما می خواهیم تنظیمات خود را به این کادر با تغییر دادن استایل css و کد نویسی جاوا اسکریپت اعمال کنیم. فراموش نکنید که برای ایجاد تغییرات ظاهری در ایجاد کادر شناور با جاوا اسکریپت باید آی دی top-bar در استایل css را ویرایش و اصلاح کنید:
به کد زیر دقت کنید:
1 2 3 4 5 6 7 8 9 10 |
#top-bar{ position:absolute; width:auto; visibility:hidden; background-color:#F90; border:1px solid #333; padding:2px; z-index:100; direction:rtl; } |
حالا اگر بخواهیم تعیین کنیم که کادر شناور ما در بالا یا پایین صفحه نمایش داده شود باید از در متغیر verticalpos عبارت fromtop را با frombottom جایگزین کنیم. نتیجه به شکل زیر خواهد بود:
1 2 |
//"fromtop" or "frombottom" var verticalpos = "fromtop"; |
حالا ما می خواهیم زبان فارسی را برای این کد انتخاب کنیم. برای این کار باید تغییراتی را اعمال کنیم تا در ساخت کادر شناور با جاوا اسکریپت راست نویسی امکان پذیر باشد ( نوشتن از راست سبب می شود زبان فارسی نیز پشتیبانی شود). به همین دلیل ابتدا باید direction را به جای ltr در top-bar قرار دهیم. اگر بخواهیم کادر را در سمت چپ تصویر قرار دهیم باید عبارت this.style.right را در کد پیدا کنیم و this.style.left را جایگزین آن کنیم.
1 |
direction:rtl; |
1 |
el.sP = function(x,y){this.style.right = x + "px"; this.style.top = y + "px";}; |
خوب حالا ما میخواهیم به کاربر اجازه بدهیم که در صورت نیاز این کادر شناور را ببندد. برای این کار یک دکمه به صورت تصویر در نظر گرفته ایم. این تصویر را آپلود می کنیم و به جای img src در قسمت بلاک div جایگزین کنیم.
1 |
<img src="close.gif" border="0" height="12" width="12" alt="close" title="close"> |
حالا باید به مرورگر بگوییم که زمانی که کاربر بر روی دکمه بسته شدن کلیک کرد چه اتفاقی رخ دهد. برای این کار باید در متغیر persistclose یکی از مقادیر ۰ یا ۱ را تعیین کنیم. ۱ به معنای این است که انتخاب کاربر در بستن کادر شناور به عنوان یک کوکی در نظر گرفته شود و در صفحات دیگر سایت نیز این کادر نمایش داده نشود و ۰ به این معنا است که انتخاب کاربر را در نظر نگیرد و در هر صفحه جدید کادر نمایش داده شود.
1 |
var persistclose = 1; |
جمع بندی
ایجاد کادر شناور با جاوا اسکریپت زمانی که از کد آماده استفاده می کنید بسیار سریع تر انجام می گیرد. نکات لازم برای ایجاد یک کادر شناور شخصی سازی شده در این مقاله ارائه شده است. نکته آخر این که کادر های شناور نباید آزار دهنده باشند پس سعی کنید در زمان ایجاد کادر شناور در جاوا اسکریپت حتما این کاربرپسند بودن آن را به یاد داشته باشید.
منبع : طراحی سایت