تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017

با کليک بر روي +1 ما را در گوگل محبوب کنيد

در این مطلب قصد داریم آموزش ایجاد پنلی جمع شونده (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) اضافه کنید.
- برای بدست آوردن کدها و فایل ها، بر روی پیش نمایش کلیک کنید و سپس می توانید از سورس آن استفاده نمائید. 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, فیسبوک, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین