تبلیغات
Fact World - ایجاد باکس جمع شونده با جاوا اسکریپت و دریم ویور

آموزش برنامه نویسی و مهارتهای وب

article 

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

javascript در این مطلب قصد داریم آموزش ایجاد پنلی جمع شونده (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>
<!-- http://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 را در قسمت head سایت ایمپورت کنید و تکه کد مربوط به متغیر CollapsiblePanel را پس از لایه (div) قرار دهید.
- با ویرایش فایل SpryCollapsiblePanel.css می توانید تنظیمات دلخواه خود را انجام دهید.
- برای ایجاد پنل های مختلف در یک صفحه باید به هر بلاک اصلی یک آی دی اختصاص دهید و در زیر متغیر CollapsiblePanel1 آن آی دی را در متغیری جدید (به فرض CollapsiblePanel2) اضافه کنید.
- برای بدست آوردن کدها و فایل ها، بر روی پیش نمایش کلیک کنید و سپس می توانید از سورس آن استفاده نمائید. 
section دسته بندی: آموزش کاربردی - آموزش کاربردی JavaScript -


یکشنبه 13 مهر 1393

نظرات ()


شنبه 1 مهر 1396 05:16 ب.ظ
I pay a visit every day some web pages and information sites to read
articles, but this website presents quality based articles.
یکشنبه 15 مرداد 1396 10:03 ب.ظ
Attractive portion of content. I simply stumbled upon your blog and in accession capital to claim that I
get actually loved account your weblog posts. Anyway I'll be subscribing
for your feeds or even I fulfillment you get right of entry to persistently rapidly.
جمعه 2 تیر 1396 03:49 ق.ظ
Stunning story there. What happened after?
Good luck!
چهارشنبه 20 اردیبهشت 1396 04:48 ب.ظ
You need to take part in a contest for one of the most useful websites on the web.

I'm going to recommend this website!
پنجشنبه 24 فروردین 1396 05:09 ق.ظ
BHW
I loved as much as you will receive carried out right here.
The sketch is tasteful, your authored material stylish.
nonetheless, you command get bought an nervousness over that you wish be
delivering the following. unwell unquestionably
come further formerly again as exactly the same nearly very often inside case you shield this hike.

نظر خود را ثبت کنید:

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



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )