آموزش جاوا اسکریپت ساخت باکس جمع شونده قسمت چهاردهم

در این مطلب قصد داریم آموزش ایجاد پنلی جمع شونده (CollapsiblePanel) را به کمک جاوا اسکریپت (javascript) و نرم افزار فوق العاده دریم ویور (Dreamweaver) ارائه کنیم؛ روش های زیادی برای ایجاد جلوه های ویژه و انعطاف پذیر در صفحات وب وجود دارد، از جمله استفاده از کتابخانه های جی کوئری (jquery)، موتولز(mootools)، فایل های فلش (flash) و... اما حرفه ای تر ها در وب، همیشه به دنبال کم حجم ترین و در عین حال سازگارترین کدها هستند! از این رو کدی که در این مطلب قصد معرفی آن را داریم در عین سبکی (کم حجمی) از قابلیت سازگاری خوبی با مرورگرهای استاندارد برخوردار است و در کنار کدهای جاوا اسکریپت قابلیت ایجاد تعییرات سفارشی از طریق ویرایش فایل css نیز وجود دارد که می توانید بر اساس سلیقه خودتان آن را تنظیم کنید.

استفاده از قابلیت Spry در دریم ویور
برای ایجاد این باکس یا پنل از قابلیت Spry در نرم افزار معروف و قدرتمند دریم ویور (Dreamweaver) استفاده کرده ایم با این تفاوت که موارد اضافه و غیر ضروری را جهت کم حجم کردن کد، حذف کرده ایم، نمای کلی کد ما به شکل زیر است:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ایجاد باکس جمع شونده در دریم ویور</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab">منو</div>
  <div class="CollapsiblePanelContent">نمایش محتوای شما!</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab">منو</div>
  <div class="CollapsiblePanelContent">نمایش محتوای شما!</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
</script>
</body>
</html>

توضیح:
- به محل قرار گیری فایل ها و تگ های جاوا اسکریپت دقت کنید، فایل SpryCollapsiblePanel.js را در قسمت head سایت ایمپورت کنید و تکه کد مربوط به متغیر CollapsiblePanel را پس از لایه (div) قرار دهید.
- با ویرایش فایل SpryCollapsiblePanel.css می توانید تنظیمات دلخواه خود را انجام دهید.
- برای ایجاد پنل های مختلف در یک صفحه باید به هر بلاک اصلی یک آی دی اختصاص دهید و در زیر متغیر CollapsiblePanel1 آن آی دی را در متغیری جدید (به فرض CollapsiblePanel2) اضافه کنید.
- برای بدست آوردن کدها و فایل ها، بر روی پیش نمایش کلیک کنید و سپس می توانید از سورس آن استفاده نمائید.

به نظرم دریم ویور یکی از بهترین برنامه ها برای ساخت چنین مواردی است.

نمونه ای از آخرین کارهای ما

آموزش جاوا اسکریپت ساخت باکس جمع شونده قسمت چهاردهمReviewed by Goolexacom on Mar 26Rating: 4.5آموزش جاوا اسکریپتآموزش جاوا اسکریپت ساخت باکس جمع شونده

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

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

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

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت