وب

ایجاد کادر شناور با جاوا اسکریپت در سایت ها

نمایش دادن اطلاعات مهم به کاربران یکی از اهداف طراحان و توسعه دهندگان وب است. یکی از راه های نمایش اطلاعات مهم در سایت ها استفاده از floating box یا کادر شناور است. این کادر ها علاوه بر کارایی که دارند به زیبایی سایت شما نیز کمک می کنند. کادر های شناور عموما به صورت شناور در گوشه های سایت مورد استفاده قرار می گیرند و اطلاعات مهمی را به کاربر نشان می دهند. در این مقاله قصد داریم نحوه ایجاد کادر شناور با جاوا اسکریپت را آموزش دهیم. برای این کار ما از کد های css، htmlو  javascript در تعامل با یکدیگر استفاده می کنیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

استفاده از کد های مختلف برای ایجاد کادر شناور با جاوا اسکریپت

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

این کد تمام ویژگی های مورد نیاز ما را دارد. اما با این حال هنوز سفارشی نشده است. برای ایجاد کادر شناور با جاوا اسکریپت باید چند تغییر جزئی در آن ایجاد کنیم.

کادر شناور با جاوا اسکریپت

سفارشی سازی کد ایجاد کادر شناور با جاوا اسکریپت

ما می خواهیم تنظیمات خود را به این کادر با تغییر دادن استایل css و کد نویسی جاوا اسکریپت اعمال کنیم. فراموش نکنید که برای ایجاد تغییرات ظاهری در ایجاد کادر شناور با جاوا اسکریپت باید آی دی top-bar در استایل css را ویرایش و اصلاح کنید:

به کد زیر دقت کنید:

حالا اگر بخواهیم تعیین کنیم که کادر شناور ما در بالا یا پایین صفحه نمایش داده شود باید از در متغیر verticalpos عبارت fromtop را با frombottom جایگزین کنیم. نتیجه به شکل زیر خواهد بود:

حالا ما می خواهیم زبان فارسی را برای این کد انتخاب کنیم. برای این کار باید تغییراتی را اعمال کنیم تا در ساخت کادر شناور با جاوا اسکریپت راست نویسی امکان پذیر باشد ( نوشتن از راست سبب می شود زبان فارسی نیز پشتیبانی شود). به همین دلیل ابتدا باید direction را به جای ltr در top-bar قرار دهیم. اگر بخواهیم کادر را در سمت چپ تصویر قرار دهیم باید عبارت this.style.right را در کد پیدا کنیم و this.style.left را جایگزین آن کنیم.

خوب حالا ما میخواهیم به کاربر اجازه بدهیم که در صورت نیاز این کادر شناور را ببندد. برای این کار یک دکمه به صورت تصویر در نظر گرفته ایم. این تصویر را آپلود می کنیم و به جای img src در قسمت بلاک div جایگزین کنیم.

حالا باید به مرورگر بگوییم که زمانی که کاربر بر روی دکمه بسته شدن کلیک کرد چه اتفاقی رخ دهد. برای این کار باید در متغیر persistclose یکی از مقادیر ۰ یا ۱  را تعیین کنیم. ۱ به معنای این است که انتخاب کاربر در بستن کادر شناور به عنوان یک کوکی در نظر گرفته شود و در صفحات دیگر سایت نیز این کادر نمایش داده نشود و ۰ به این معنا است که انتخاب کاربر را در نظر نگیرد و در هر صفحه جدید کادر نمایش داده شود.

 

جمع بندی

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

 

منبع : طراحی سایت

نوشته های مشابه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا