ساخت منوی جاوا اسکریپتی با ابزار Spry دریم ویور

نرم افزار دریم ویور در آخرین ویرایش خود (CS3)  ابزارهای Adobe Spry را در خود جای داده است.  Spry نام پروژه ای بود که شرکت ادوبی برای ارائه نسخه بتای محصولات آجاکسی خود استفاده کرده بود و اکنون تعدادی از قابلیت های جاوا اسکریپتی بسیار جالب که مورد نیاز اکثر طراحان صفحات وب است در داخل دریم ویور و با نام spry جاسازی شده است .
ابزار هایSpry  : کافیست از تولبار ابزارهای دریم ویور به برگه Spry بروید تا ابزار های جدید ادوبی را که با جاوا اسکریپت کار میکنند مشاهده کنید .در این مقاله به معرفی 4 تا از این ابزارها می پردازیم که اکثرا در طراحی layout شما را یاری میدهند. تقریبا همه چیز بصورت Visual و بدون نیاز به کدنویسی قابل انجام است . با اینحال امکان سفارشی کردن این ابزار ها در دریم ویور فراهم است.

با اضافه کردن اولین ابزار از این دسته ، یک پوشه بنام Spry Assets  در کنار سایر فایلهای شما اضافه میشود و به ازای هر ابزار spry که اضافه میکند دو فایل js و CSS برای آن ابزار خاص به پوشه Spry Assets اضافه میشود. فایل JS برای کنترل ابزار است. بهتر است این فایل را دستکاری نکنید. چون اگه پارامتری رو اشتباهی تغییر بدین ، ابزار spry شما دیگه کار نمی کنه یا در یک مرورگر خاص کار نخواهد کرد.اما فایل css موجود رو میتونید تغییر بدین تا حالت نمایش ، رنگ گزینه ها و ظاهر ابزارتون رو دستکاری کنید تا مطابق میل خودتون در بیاد. 
Spry Menu bar : این ابزار امکان ایجاد منوهای پایین افتادنی یا آبشاری جاوا اسکریپتی را برای شما فراهم میکند.
سادگی در اضافه کردن آیتم ها و زیر آیتم ها به این منو، کار شما را خیلی راحت کرده است. کافیست پس از اضافه کردن یک نمونه از این ابزار به صفحه وب ، بر روی نوار آبی رنگ بالای ابزار در صفحه کلیک کنید تا پنجره properties گزینه های این ابزار رو به شما نشون بده. سه ستون از آیتم ها نشون داده میشن . ستون سمت چپ ، آیتم های اصلی منو هستن و بصورت پیش فرض 4 آیتم دارن . با کلیک روی هر آیتم ، زیر آیتم های اونو در ستون سمت راست میتونید ببینید. همچنین متن و لینک هر آیتم در سمت راست ستونها قابل ویرایش است.

جهت تغییر رنگ بکگراند و متن آیتم ها به پوشه SpryAssets بروید. فایل SpryMenuBarHorizontal.css را که در برگیرنده کدهای css مربوط به ظاهر ابزار منوبار است باز کنید. طبق جدول زیر میتوانید بخش های مختلف ابزار منوبار را تغییر دهید. بطور مثال جهت تغییر رنگ بکگراند نوار اصلی منوبار، کلاس ul.MenuBarHorizontal a را در فایل css تغییر دهید تا شاهد تغییرات رنگ در هنگام نمایش صفحه باشید.

 

Spry Tabbed Panels  : این ابزار به شما امکان ساخت باکس های چند برگه ای را میدهد. یک نمونه از این ابزار را بر روی صفحه در حال طراحی وارد کنید. حالا روی نوار آبی رنگ بالای آن کلیک کنید تا گزینه های قابل تنظیم آن در پنجره Properties ظاهر شود. در اینجا امکان افزودن و حذف برگه ها یا تغییر برگه پیش فرض هنگام لود صفحه برایتان فراهم آمده است. همچنین میتوانید براحتی سایر عناصر صفحه تان را به داخل برگه های tabbed panel بکشید. برای اینکه بتوانید عناصری را به برگه دوم اضافه کنید کافیست موس خود را روی برگه Tab2 ببرید و روی آیکون چشم که در سمت راست اسم برگه ظاهر شده کلیک کنید تا دریم ویور محتویات برگه دوم را جهت ویرایش نمایش دهد.
جهت تغییر رنگ و فونت متن های برگه ها فایل SpryTabbedPanels.css را از پوشه SpryAssets بازکنید و کلاس مورد نظر را از جدول زیر برای تغییر در ظاهر برگه ها ویرایش کنید.

Spry Accordion  : این ابزار منوی آکاردئونی میسازد. با کلیک روی نوار آبی بالای این ابزار ، برگه های موجود در پنجره Properties دریم ویور نمایش داده میشود و شما میتوانید برگه های بیشتری را به این ابزار اضافه کنید. برای تغییر محتوای داخل هر برگه ، باید روی نام برگه کلیک کنید تا برگه مذکور در صفحه طراحی دریم ویور فعال شود. جهت ویرایش رنگ ها و فونت های آن میتوانید فایل SpryAccordion.css را از پوشه SpryAssets بازکنید و کلاس مورد نظر را برای تغییر در ظاهر برگه ها ویرایش کنید.
Spry Collapsible  : این ابزار برای ایجاد منوهای کناری سایتها و وبلاگها بسیار مناسب است و امکان ساخت منوهای بازشو و جمع شو را فراهم میکند.گزینه ای قابل تنظیم این ابزار نیز با کلیک روی نوار آبی رنگ بالای آن ، در پنجره Properties در پایین دریم ویور نمایش داده میشود. گزینه Display فقط برای باز و بسته کردن محتوای منوی بازشو در هنگام طراحی است. گزینه default State برای باز و بسته بودن منوی بازش هنگام لوم صفحه است . و گزینه enable animation نیز باعث باز و بسته شدن انیمیشنی منو میشود. در صورتی که تیک آن را بردارید، منو هنگام کلیک کردن روی نام بالای آن ، بدون انیمشین باز و بسته میشود.