i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
parsgreen.com
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

ساخت پنل چند سربرگی (tabbed panel) با جاوا اسکریپت و CSS

javascript-tabbed-panel

استفاده از پنل چند سربرگی یا tabbed panel از جمله روش های متداول در طراحی وب با متدهای حرفه ای محسوب می شود که امروزه در اغلب برنامه های کاربردی تحت وب می توان نمونه ای از آن را مشاهده کرد، به طور خلاصه پنل های چند سربرگی، بلاک هایی هستند که با وجود مستقل و چندگانه بودن، به نحوی با رابطه ای تعاملی در کنار هم قرار می گیرند که از نظر کاربر، مجموعه ای مشترک دیده می شوند، طراحان وب معمولا از ترکیب قابلیت های جاوا اسکریپت و CSS این نوع پنل ها را خلق و در مواردی مانند سایت های خبری، سایت های دانلود، پنل مدیریت سیستم های مدیریت محتوا، نمایش آمار و نمودارها و... از آنها استفاده می کنند.

فواید استفاده از پنل چند سربرگی


استفاده از این نوع پنل ها به صرفه جویی در میزان فضای اشغال شده از صفحه، زیبایی و همچنین انسجام بخشی بیشتر به رابط کاربری (User Interface) سایت کمک می کند، در نتیجه کاربر نهایی تجربه بهتری از پایش در برنامه تحت وب شما خواهد داشت.

معایب استفاده از پنل چند سربرگی


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

نحوه ایجاد پنل چند سربرگی


همان طور که اشاره شد، برای ایجاد پنل چند سربرگی یا tabbed panel باید به صورت ترکیبی از جاوا اسکریپت و CSS استفاده کنیم، در اینجا نیز CSS نقش شکل دهنده و جاوا اسکریپت جهت ایجاد رفتار تعاملی به کار می رود، برای شروع کد HTML پنل را به صورت زیر می نویسیم.
<div class="tabbed-container">
<div class="tabbed-menu">
<div class="tabbed-button" id="tabbed-button-1">تیتر دکمه 1</div>
<div class="tabbed-button" id="tabbed-button-2">تیتر دکمه 2</div>
<div class="tabbed-button" id="tabbed-button-3">تیتر دکمه 3</div>
<div class="tabbed-button" id="tabbed-button-4">تیتر دکمه 4</div>
</div>
<div class="tabbed-wrapper">
<div id="tabbed-box-1">محتوای باکس 1</div>
<div id="tabbed-box-2">محتوای باکس 2</div>
<div id="tabbed-box-3">محتوای باکس 3</div>
<div id="tabbed-box-4">محتوای باکس 4</div>
</div>
</div>
همان طور که ملاحظه می کنید کد بالا از سه بلاک اصلی (tabbed-container، tabbed-menu و tabbed-wrapper) تشکیل شده، بلاک div با کلاس tabbed-container در واقع نقش نگهدارنده یا container سایر عناصر را داشته و در بالاترین سطح قرار می گیرد، tabbed-menu بلاکی است که دکمه مربوط به هر پنل در آن به نمایش در خواهد آمد و tabbed-wrapper بلاکی برای قرار گرفتن باکس محتوا است.
نکته کلیدی که در این کد به چشم می خورد نحوه تنظیم id در قسمت tabbed-button و tabbed-box است که در انتهای آنها یک شماره متناظر درج شده، از این شماره در هنگامی که قصد ایجاد رفتار تعاملی با جاوا اسکریپت را داریم استفاده خواهیم کرد؛ اکنون تکه کد جاوا اسکریپتی زیر را نیز به صفحه خود اضافه می کنیم.
<script type="text/javascript">
function closeBox(num){
    //بستن تمام باکس ها در اولین بارگذاری
    for(var i = 1; i <= num; i++){
        document.getElementById("tabbed-box-" + i).style.display = "none";    
    }
}
function openSelected(button, box){
    //باز کردن باکس انتخاب شده در اولین بارگذاری
    document.getElementById(button).className = ("tabbed-button-open");
    document.getElementById(box).style.display = "block";        
}
function openBox(button, box, num){
    var tabbed_div = document.getElementById(box).style.display;
    
    //بستن تمام باکس ها و باز کردن باکس انتخاب شده
    if(tabbed_div != "block"){
        for(var i = 1; i <= num; i++){
            document.getElementById("tabbed-box-" + i).style.display = "none";
            document.getElementById("tabbed-button-" + i).className = ("tabbed-button");
        }        
        document.getElementById(button).className = ("tabbed-button-open");
        document.getElementById(box).style.display = "block";        
    }        
}
</script>
این کد از سه تابع تشکیل شده، تابع closeBox تمام باکس های پنل را به حالت بسته (display:none) تغییر می دهد، این تابع در بارگذاری اولیه صفحه (یعنی زمانی که صفحه فراخوانی می شود) به کار می رود، تابع openSelected با دریافت id مربوط به دکمه و باکس انتخاب شده، آن را به حالت کلاس tabbed-button-open و block تبدیل می کند (دکمه انتخاب شده و باکس مربوط به آن نمایش داده می شود)، این تابع نیز در بارگذاری اولیه صفحه به کار می رود، تابع openBox نیز در واقع کار دو تابع closeBox و openSelected را به صورت داینامیک انجام می دهد، در نتیجه با انتخاب هر سربرگ، دکمه به حالت انتخاب شده و باکس نمایش داده می شود.
پس از درج کد بالا در قسمت head صفحه، قسمت HTML را نیز در قسمت زیر به صورتی که مشاهده می کنید ویرایش کنید.
<div class="tabbed-button" id="tabbed-button-1" onclick="openBox(this.id, 'tabbed-box-1', 4);">تیتر دکمه 1</div>
<div class="tabbed-button" id="tabbed-button-2" onclick="openBox(this.id, 'tabbed-box-2', 4);">تیتر دکمه 2</div>
<div class="tabbed-button" id="tabbed-button-3" onclick="openBox(this.id, 'tabbed-box-3', 4);">تیتر دکمه 3</div>
<div class="tabbed-button" id="tabbed-button-4" onclick="openBox(this.id, 'tabbed-box-4', 4);">تیتر دکمه 4</div>
این کار برای اختصاص دادن رویداد onclick به دکمه های پنل است (به شماره های متناظر توجه داشته باشید).
سپس در انتهای کدهای HTML مربوط به پنل، تکه کد جاوا اسکریپت زیر را نیز اضافه کنید.
<script type="text/javascript">
//بستن تمام باکس ها در اولین بارگذاری
closeBox(4);
//باز کردن باکس انتخاب شده در اولین بارگذاری
openSelected("tabbed-button-1", "tabbed-box-1");
</script>
در آخرین مرحله باید استایل CSS مربوط به پنل چند سربرگی را به صفحه خود اضافه کنیم، بنابراین استایل زیر را نیز ترجیحا در قسمت head صفحه درج می کنیم.
<style type="text/css">
.tabbed-container{
    position:relative;
    margin-top:12px;
    border:1px solid #FFF;
}
.tabbed-menu{
    margin-top:0px;
    margin-bottom:0px;
    line-height:14px;
    position:absolute;
}
.tabbed-wrapper{
    border:1px solid #E5E5E5;
    margin-top:25px;
    margin-bottom:12px;
    padding:12px;
}
.tabbed-button{
    display:inline-block;
    height:16px;
    width:auto;
    padding:4px;
    margin:0px;
    background:#F9F9F9;
    border-radius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    border:1px #E5E5E5 solid;
    border-bottom:1px #E5E5E5 solid;    
    cursor:pointer;
    color:#999;
}
.tabbed-button:hover{
    background:#F5F5F5;    
    color:#999;        
}
.tabbed-button-open{
    display:inline-block;
    height:16px;
    width:auto;
    padding:4px;
    margin:0px;
    background:#FFF;
    border-radius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    border:1px #E5E5E5 solid;
    border-bottom:1px #FFF solid;    
    color:#000;    
}
</style>
نکته کلیدی در این نوع موارد نحوه استفاده از خاصیت position با دو مقدار relative و absolute است، همان طور که ملاحظه می کنید، بلاک والد به صورت relative و بلاک فرزند به صورت absolute مقداردهی شده، این کار باعث می شود تا مرورگر خواص بلاک سطح پائین تر را به صورت تابعی از بلاک اصلی پردازش کند.

مثال و پیش نمایش آنلاین


در زیر مثال و پیش نمایش آنلاین پنل چند سربرگی کامل شده را ملاحظه می کنید.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | ایجاد پنل چند سربرگی در وب</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.tabbed-container{
    position:relative;
    margin-top:12px;
    border:1px solid #FFF;
}
.tabbed-menu{
    margin-top:0px;
    margin-bottom:0px;
    line-height:14px;
    position:absolute;
}
.tabbed-wrapper{
    border:1px solid #E5E5E5;
    margin-top:25px;
    margin-bottom:12px;
    padding:12px;
}
.tabbed-button{
    display:inline-block;
    height:16px;
    width:auto;
    padding:4px;
    margin:0px;
    background:#F9F9F9;
    border-radius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    border:1px #E5E5E5 solid;
    border-bottom:1px #E5E5E5 solid;    
    cursor:pointer;
    color:#999;
}
.tabbed-button:hover{
    background:#F5F5F5;    
    color:#999;        
}
.tabbed-button-open{
    display:inline-block;
    height:16px;
    width:auto;
    padding:4px;
    margin:0px;
    background:#FFF;
    border-radius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    border:1px #E5E5E5 solid;
    border-bottom:1px #FFF solid;    
    color:#000;    
}
</style>
<script type="text/javascript">
function closeBox(num){
    //بستن تمام باکس ها در اولین بارگذاری
    for(var i = 1; i <= num; i++){
        document.getElementById("tabbed-box-" + i).style.display = "none";    
    }
}
function openSelected(button, box){
    //باز کردن باکس انتخاب شده در اولین بارگذاری
    document.getElementById(button).className = ("tabbed-button-open");
    document.getElementById(box).style.display = "block";        
}
function openBox(button, box, num){
    var tabbed_div = document.getElementById(box).style.display;
    
    //بستن تمام باکس ها و باز کردن باکس انتخاب شده
    if(tabbed_div != "block"){
        for(var i = 1; i <= num; i++){
            document.getElementById("tabbed-box-" + i).style.display = "none";
            document.getElementById("tabbed-button-" + i).className = ("tabbed-button");
        }        
        document.getElementById(button).className = ("tabbed-button-open");
        document.getElementById(box).style.display = "block";        
    }        
}
</script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!</noscript>
<div class="tabbed-container">
<div class="tabbed-menu">
<div class="tabbed-button" id="tabbed-button-1" onclick="openBox(this.id, 'tabbed-box-1', 4);">تیتر دکمه 1</div>
<div class="tabbed-button" id="tabbed-button-2" onclick="openBox(this.id, 'tabbed-box-2', 4);">تیتر دکمه 2</div>
<div class="tabbed-button" id="tabbed-button-3" onclick="openBox(this.id, 'tabbed-box-3', 4);">تیتر دکمه 3</div>
<div class="tabbed-button" id="tabbed-button-4" onclick="openBox(this.id, 'tabbed-box-4', 4);">تیتر دکمه 4</div>
</div>
<div class="tabbed-wrapper">
<div id="tabbed-box-1">محتوای باکس 1</div>
<div id="tabbed-box-2">محتوای باکس 2</div>
<div id="tabbed-box-3">محتوای باکس 3</div>
<div id="tabbed-box-4">محتوای باکس 4</div>
</div>
</div>
<script type="text/javascript">
//بستن تمام باکس ها در اولین بارگذاری
closeBox(4);
//باز کردن باکس انتخاب شده در اولین بارگذاری
openSelected("tabbed-button-1", "tabbed-box-1");
</script>
<hr>
با اندکی آشنایی با CSS و JavaScript می توانید پنل را به صورت سفارشی ویرایش کنید.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
» ایجاد باکس جمع شونده با جاوا اسکریپت و دریم ویور
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
commentنظرات (۳۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: علی
زمان: ۱۳:۴۶:۱۶ - تاریخ: ۱۳۹۲/۱۲/۱۹
سلام ، بسیار عالی بود موفق باشید
نویسنده: mavg
زمان: ۱۰:۵۵:۳۱ - تاریخ: ۱۳۹۳/۰۱/۰۴
در وب سایت خود از روش پنل چند سربرگی شما استفاده نموده ام لیکن وقتی تحت وردپرس بالا می آید همه مطالب گنجانده شده در هر سربرگی به طور یکجا نمایش داده شده و مطالب با هم ادغام می شود
پاسخ: 
باید ببینید آیا سورس های لازم برای اجرای پنل به درستی در صفحه وارد شده اند، به خصوص قسمت مربوط به کدهای جاوا اسکریپت، در هر صورت حل مشکل نیازمند بررسی بیشتر است.
نویسنده: mavg
زمان: ۱۶:۵۲:۳۴ - تاریخ: ۱۳۹۳/۰۱/۱۴
از روش پنل چند برگی استفاده نموده ام لیکن در هنگام مشاهده سایت محتویات برگه ها روی هم نمایش داده می شود. راه حل چیست؟
پاسخ: 
لطفا مثال و پیش نمایش آنلاین را با کدهای درج شده در سایتتان مقایسه کنید! طبق بررسی ما بخش اصلی کدها را درج نکرده اید!
نویسنده: رحمت شریفی
زمان: ۰۷:۱۸:۲۰ - تاریخ: ۱۳۹۳/۰۱/۲۰
با سلام
وبسایت واقعا مفیدی در آموزش برنامه نویسی دارید امیدوارم که هرروز شاهد پیشرفت روزافزون شما باشم
رحمت شریفی
مدیر وبسایت تکنولوژیفا
نویسنده: elham
زمان: ۱۰:۵۲:۲۰ - تاریخ: ۱۳۹۳/۰۱/۳۰
با سلام
ممنون مطلبتون عالی و مفید بود
امیدوارم موفق باشید
نویسنده: mavg
زمان: ۱۶:۲۱:۴۷ - تاریخ: ۱۳۹۳/۰۲/۱۳
سوالی در خصوص مشکل اختلاط محتوای صفحات چند پنلی کرده بودم که با دقت در کدهای نوشته شده رفع گردید از شما متشکرم
نویسنده: مهدی
زمان: ۲۰:۱۲:۲۱ - تاریخ: ۱۳۹۳/۰۲/۲۲
با سلام و تشکر از سایت خوبتون
من این پنل رو درست کردم ولی وفتی سربرگ جدید ساختم و واردش شدم و میخوام به سربرگ دیگه ای برم سربرگی که ساخته بودم و قبل از اون باز کردم باز میمونه
پاسخ: 
سلام
کد همراه پیش نمایش آنلاین ارائه شده، لذا قاعدتا اشتباهی در صفحه شما وجود دارد، باید سورس صفحه را دید و بررسی کرد.
نویسنده: mavg
زمان: ۱۴:۵۰:۰۳ - تاریخ: ۱۳۹۳/۰۳/۱۰
از روش پنل با چند سربرگ در سایت خود که در بالا اشاره کرده ام استفاده کرده ام و در سرور مجازی روی کامپیوتر خود مشکلی ندارم ولی با انتقال فایل ها به سرور اختصاصی شرکت ایران هاست در مرورگر فایرفاکس مشکلی ندارد ولی در کروم و اکسپلورر وقتی سایت لود می شود سربرگ ها دارای عنوانی طولانی شده و بقیه به خط بعدی شکسته می شود و نظم به هم می خورد هر کاری کردم نتوانستم اشکال را رفع نمایم از شما درخواست کمک و یاری می نمایم اگر سایت بالا را لود کنید خواهید دید که عنوان سربرگ خیلی طولانی نمایش داده می شود و در انتهای عنوان یک نقطه نمایش داده می شود. که هرچقدر سعی نمودم نتوانستم نقطه را حذف نمایم.
پاسخ: 
به نظر استایل ها و کدهای HTML سایتتان بدون قاعده و سازگاری با هم استفاده شده اند، در چنین شرایطی پی بردن به مشکل بدون بررسی دقیق عملا غیر ممکن است! البته شاید یک مشکل جزئی باشد و با تغییر خاصیت های CSS و آزمایش و خطا رفع شود، اما پیدا کردن علت آن خیلی زمانبر است.
نویسنده: بهنام
زمان: ۱۹:۰۳:۴۰ - تاریخ: ۱۳۹۳/۰۴/۱۱
سلام
میشه این کد ها را حذف کرد:
function closeBox(num){
//بستن تمام باکس ها در اولین بارگذاری
for(var i = 1; i <= num; i++){
document.getElementById("tabbed-box-" + i).style.display = "none";
}
}
function openSelected(button, box){
//باز کردن باکس انتخاب شده در اولین بارگذاری
document.getElementById(button).className = ("tabbed-button-open");
document.getElementById(box).style.display = "block";
}
<script type="text/javascript">
//بستن تمام باکس ها در اولین بارگذاری
closeBox(4);
//باز کردن باکس انتخاب شده در اولین بارگذاری
openSelected("tabbed-button-1", "tabbed-box-1");
</script>
و بجای این همه کد پایین فانکشن openBox
window.onload = function(){
openBox('tabbed-button-1','box-1');
}
این را نوشت؟
پاسخ: 
سلام
بله، البته به شکل نمونه زیر:
<script type="text/javascript">
window.onload = function(){
openBox('tabbed-button-3','tabbed-box-3', 4);
}
</script>
تشکر از نکته سنجی دقیق!
نویسنده: دانیال
زمان: ۱۴:۲۸:۲۴ - تاریخ: ۱۳۹۳/۰۵/۲۳
سلام.
چجوریه؟
من داخل فرم تماس وقتی ایمیلم رو می زنم و موارد رو هم وارد می کنم سایت شما ارور میده که ایمیل نامعتبر است!
در صورتی که من از صحت ایمیلم اطمینان دارم.
دو بار هم امتحان کردم ولی رفع نشد! وبتون ویروسی که نیست؟؟؟؟؟؟
پاسخ: 
سلام
این موضوع ارتباطی به ویروس ندارد دوست عزیز!
ایمیل خود را جهت بررسی در متن یک یادداشت درج و ارسال کنید (آدرس ایمیل منتشر نخواهد شد).
نویسنده: مرتضی
زمان: ۲۱:۰۱:۴۳ - تاریخ: ۱۳۹۳/۰۵/۲۵
سلام
بعضی از فرم های ارسال مطلب و ارسال نظر پیشرفته هستن، یعنی ابزارهایی برای تغییر خصوصیات متن مثل رنگ، اندازه، چیدمان و... دارن، اگه یه آموزش در این باره بذارین ممنون میشم... در ضمن توی وب هر چی گشتم چیزی پیدا نکردم اگه لینکی یا هر مطلبی در این باره دارین لطفا بذارین
پاسخ: 
سلام
برای رسیدن به این هدف دو راه وجود دارد:
- استفاده از ویرایشگر های رایگان موجود مانند TinyMCE، CKEditor و... که به آنها WYSIWYG یا (What You See Is What You Get) می گویند.
http://www.tinymce.com
http://ckeditor.com
- نوشتن WYSIWYG شخصی که این مورد به داشتن دانش و تجربه بالای JavaScript نیاز دارد.
نویسنده: iman
زمان: ۱۵:۳۲:۳۴ - تاریخ: ۱۳۹۳/۰۶/۰۱
سلام
امکانش هست یه آموزشی در رابطه با Magic Thumb بزارید
وقتی روی Thumbnail میریم هم موس تغییر میکنه و وقتی کلیک میکنم عکس سایز بزرگ میشه با موس متفاوت
پاسخ: 
سلام
این قابلیت با استفاده از jQuery ایجاد می شود که کاربرد خیلی ساده و پلاگین های فراوانی دارد، کافی است عبارت "jQuery Image Zoom" را در وب جستجو کنید.
نویسنده: علی کیانی
زمان: ۱۸:۵۲:۰۲ - تاریخ: ۱۳۹۳/۱۰/۲۲
با سلام و احترام خدمت شما
عزیز خیلی به دردم خورد ممنون از سایت خوبتون خیلی دنبال یه چیزی گشتم که نخوام از پی اچ پی استفاده کنم ممنون واقعا من یکم اختصاصیش کردم میتونید بیاین تو سایت منم بقیه ببینید و شاید الگو بتونید بگیرید
یا حق
نویسنده: ali
زمان: ۲۲:۴۲:۴۰ - تاریخ: ۱۳۹۳/۱۲/۱۲
سلام خسته نباشید
چجوری میشه از این کد دو بار توی صفحه استفاده کرد؟
پاسخ: 
سلام
با ایجاد ID بر اساس شماره های یکتا و همچنین کمی آشنایی با جاوا اسکریپت این کار ممکن است.
نویسنده: ali
زمان: ۱۸:۱۷:۴۶ - تاریخ: ۱۳۹۳/۱۲/۱۴
من هر کاری کردم نشد
میشه شما اینکارو انجام بدین ؟
من عوض میکنم همه کدا به هم میریزه
پاسخ: 
متاسفانه به دلیل کمبود فرصت این کار میسر نیست!
paged صفحه 2 از 3




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

5 × 1
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)