article

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

javascript

از جمله امکانات مورد نیاز در طراحی رابط کاربری سایت ها و وبلاگ ها پنل های جمع شونده (Collapsible Panel) هستند که می توان از آنها برای نمایش امکاناتی نظیر منوی سایت یا دسته بندی محتوای طولانی و مواردی از این دست استفاده کرد، روش ایجاد این پنل ها نیز بسته به نیاز و هدف برنامه نویس صفحه وب می تواند متفاوت باشد از جمله استفاده از کتابخانه جاوا اسکریپتی جی کوئری (jQuery)، کتابخانه موتولز (Mootools)، استفاده از کدها و توابع خودنوشت و...  به هر صورت در این مطلب قصد داریم آموزش ایجاد پنل جمع شونده را به کمک جاوا اسکریپت (JavaScript) و فریم ورک Spry (که در برخی نسخه های برنامه ادوبی دریم ویور (Adobe Dreamweaver) نیز استفاده شده) ارائه کنیم، کد ارائه شده در این مطلب در عین سبکی (کم حجمی) از قابلیت سازگاری خوبی با مرورگرهای استاندارد برخوردار است و در کنار کدهای جاوا اسکریپت قابلیت ایجاد تغییرات سفارشی از طریق ویرایش فایل CSS نیز وجود دارد که می توانید بر اساس سلیقه خودتان آن را تنظیم کنید.

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


Spry عنوان فریم ورک جاوا اسکریپتی است که توسط شرکت ادوبی (Adobe) به صورت متن باز (Open-source) توسعه یافته، از این فریم ورک می توان در ایجاد امکانات مورد نیاز در طراحی رابط کاربری صفحات وب استفاده کرد که یکی از این امکانات می تواند پنل های جمع شونده یا به اصطلاح Collapsible Panel باشد، در نمونه کد زیر نحوه ایجاد دو پنل جمع شونده به کمک این فریم ورک را ملاحظه می کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد پنل جمع شونده با فریم ورک Spry</title>
<!-- Webgoo.ir -->
<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 و SpryCollapsiblePanel.css را در قسمت head صفحه ایمپورت کرده و تکه کد مربوط به اسکریپت (تعریف متغیر CollapsiblePanel و فراخوانی متد) را پس از تگ div اصلی پنل قرار دهید.
- با ویرایش فایل SpryCollapsiblePanel.css می توانید تنظیمات ظاهری و استایل دلخواه خود را اعمال کنید.
- برای ایجاد پنل های مختلف در یک صفحه باید ابتدا به هر بلاک اصلی div، یک آی دی اختصاص دهید سپس در قسمت اسکریپت در زیر متغیر CollapsiblePanel1 آن آی دی را در متغیری جدید (به فرض CollapsiblePanel2) اضافه کنید (در نمونه کد دو پنل ایجاد شده که با پیروی از ترتیب شماره گذاری ها می توان به هر تعداد پنل در صفحه ایجاد کرد).

دانلود فایل های پنل جمع شونده با Spry


برای بدست آوردن نمونه سورس کد و فایل JS و CSS پنل، می توانید بر روی لینک پیش نمایش (در بالا) کلیک کرده سپس از سورس کد صفحه استفاده نمائید، همچنین کل فایل ها به صورت یکجا از لینک زیر قابل دریافت است:
دانلود فایل های پنل جمع شونده با Spry
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» اعتبار سنجی فرم های وب با جاوا اسکریپت
» ساخت دکمه رفتن به بالای صفحه (Scroll to Top) با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» ساخت افکت رنگی با جاوا اسکریپت (JavaScript)
commentنظرات (۲۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: نیما
۲۰:۳۰ ۱۳۹۲/۰۸/۰۷
خیلی ممنون استاد ، بابت پاسختون واقعا کلافه شده بودم
نویسنده: افشین
۰۱:۵۶ ۱۳۹۲/۰۹/۲۵
چرا وقتی کلید منو بالای قسمت باز شونده است کار می کند
ولی اگر کلید منو را زیر قسمت باز شونده بگذاریم کار نمیکند
پاسخ: 
هسته اسکریپت طوری نوشته شده که از این لحاظ خیلی قابل تغییر و سفارشی سازی نیست (حداقل در بررسی های اولیه این طور به نظر می رسد).
نویسنده: محمدحسین
۱۹:۳۴ ۱۳۹۲/۱۰/۰۶
میشه لطف کنید کدهای javascript و css رو قرار بدید تا بصورت داخلی توی سایت بذاریم؟ تشکر
پاسخ: 
متاسفانه به دلیل طولانی بودن بیش از حد کدهای جاوا اسکریپت این آموزش، امکان درج آنها به صورت مستقیم فراهم نیست، لطفا از نرم افزار دریم ویور یا فایل هایی که در سورس کد پیش نمایش وجود دارد استفاده کنید.
نویسنده: محمدحسین
۱۶:۲۴ ۱۳۹۲/۱۰/۰۷
این قسمت رو تو برنامه پیدا نکردم..!
پاسخ: 
از منوی Insert گزینه Spry ابزار Spry Accordion را انتخاب کنید.
نویسنده: davood
۱۰:۱۶ ۱۳۹۳/۰۱/۲۰
سلام دم شما گرم آموزش خوبی بود
TNX
نویسنده: مهدی
۱۲:۱۰ ۱۳۹۳/۰۲/۲۵
با سلام
چطوری میتونم منوها رو اضافه کنم بطوری که مثل دو تای اولی باز و بسته بشه
اخه الان ساختم ولی باز و بسته نمیشن
پاسخ: 
از الگوی منوها استفاده کنید، در دو بخش باید منوی جدید را تعریف کنید، یکی در قسمت تعریف بلاک div با آی دی منحصر بفرد (به فرض CollapsiblePanel3) و یکی در کدهای جاوا اسکریپت و به فرض var CollapsiblePanel3، اگر هر دو حالت را درست انجام دهید، منو کار خواهد کرد.
نویسنده: مهدی
۲۱:۰۷ ۱۳۹۳/۰۲/۲۶
ميشه يکم بيشتر توضيح بديد
هيچ جا متغير يا نامي مثل CollapsiblePanel نيست
پاسخ: 
لطفا نمونه سورس کدها را بررسی کنید، به تعداد زیاد از عبارت "CollapsiblePanel" استفاده شده!
نویسنده: مهدی
۲۲:۴۶ ۱۳۹۳/۰۲/۲۷
ممنونم مشکلم حل شد
نویسنده: محمد
۱۵:۳۲ ۱۳۹۳/۱۰/۲۸
سلام خسته نباشید میخواستم بپرستم برای ایجاد باتن های که این صفحه وب شما وقتی موس روش قرار میگیره خود کار باز و بسته می شوند چه کار کنم مثل آموزش مقدماتی که وقتی موس روی اون قرار میگره خود به خود باز میشه و زیر مجموعش نمایش داده میشه تر خدا کمکم کنید خیلی لازم دارم ممنون
پاسخ: 
اینها باتن نیستند! به اینها در وب منوی آبشاری گفته می شود، لطفا عبارت "ساخت منوی آبشاری با تگ ul li و CSS" را در وب جستجو کنید، آموزش های جداگانه ای وجود دارد.
نویسنده: علی
۱۶:۱۱ ۱۳۹۴/۰۳/۱۷
سلام
ممنون از مطالب خوبتون
نویسنده: افشین عربی
۱۲:۱۶ ۱۳۹۵/۰۵/۱۵
این در حالت پیشفرض بازه چجوری میشه حالت پیشفرض رو به بسته برگردوند
پاسخ: 
متاسفانه تغییر حالت پیش فرض این اسکریپت به راحتی میسر نیست و باید سورس کدهای آن با دقت و حوصله بررسی و ویرایش شوند!
نویسنده: مصطفی
۱۱:۱۳ ۱۳۹۵/۰۶/۰۶
سلام. لطفا راهنمایی کنید که وقتی روی یک پنل کلیک میکنیم دیگر پنل ها بسته بشوند یا به عبارتی فقط یک پنل همیشه باز بشه؟
پاسخ: 
انجام این کار ساده نیست، باید متدهای موجود در فایل JS پنل را ویرایش کنید، به طور مثال متد زیر باید به این صورت تغییر داده شود:
Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(a)
{
if (this.isOpen())
this.close();
else
{
CollapsiblePanel1.close();
CollapsiblePanel2.close();
CollapsiblePanel3.close();
CollapsiblePanel4.close();
CollapsiblePanel5.close();
CollapsiblePanel6.close();
CollapsiblePanel7.close();
CollapsiblePanel8.close();
this.open();
}

this.focus();
return this.stopPropagation(a);
};
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





3 × 9
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.