|  
صفحه اصلی > خدمات وب > ابزار جاوا اسکریپت > ساخت تب منو با تنظیمات دلخواه

ساخت تب منو با تنظیمات دلخواه

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

راهنمای استفاده

پس از انجام تنظیمات مورد نظر خود کد های تولید شده به قسمت HTML, CSS و Javascript تقسیم می شود. کد HTML همان قسمت ظاهری و قابل نمایش تب منو است و در جایی از صفحه که می خواهید تب منوی شما در آنجا نمایش داده شود، قرار دهید.
استایل ها (بخش CSS) را بین تگ <style type="text/css"></style> و کد جاوا اسکریپت را نیز <script type="text/javascript"></script> در قسمت head صفحه قرار دهید.

سایر تنظیمات
1- جهت افزایش یا کاهش سربرگ ها، یک جفت تگ li و div را در کد HTML حذف یا اضافه کنید.
مثلا" برای اضافه کردن سربرگ ششم، تگ های زیر را به کد HTML اضافه کنید.
<li><a href="javascript:vd()">سربرگ 6</a></li> و <div>محتوای سربرگ 6</div>
2- در صورت نیاز، پهنای تب منو را در فایل CSS و از کلاس content به دلخواه خود افزایش دهید. حداکثر پهنای تعریف شده در این ابزار 723 پیکسل می باشد. در صورتیکه بخواهید ارتفاع تب منو داینامیک بوده و متناسب با مطالب کم یا زیاد شود. ارتفاع را از کلاس content حذف کنید.
3- استایل ها و کد جاوا اسکریپت تولید شده را می توانید به صورت فایل خارجی در بخش head صفحه فراخوانی کنید. برای این کار استایل ها را در فایل notepad کپی کرده و با پسوند CSS ذخیره کنید. فایل جاوا اسکریپت (tabmenu.js) را نیز از لینک زیر دانلود کرده و در قسمت head صفحه فراخوانی نمایید. (فراخوانی فایل ها به صورت خارجی به دلیل خلاصه تر شدن کد HTML صفحه و نیز ویرایش آسان ، بسیار مناسب تر است.)

دانلود فایل ضمیمه: tabmenu.js


» فراخوانی فایل CSS:

<link rel="stylesheet" href="CSS file " type="text/css"/>

» فراخوانی فایل جاوااسکریپت:
<script type="text/javascript" src="tabmenu.js"></script>

» تغییر Tab انتخاب شده:
برای قرار دادن Tab اول روی حالت انتخاب شده خط زیر را در کد جاوا اسکریپت یافته و به جای ۱ عدد ۰ را جایگزین نمایید.
t4 = new Bindtabs("tabco4",1,"tabeventxxx","t",border,tabbk,conbkcolor,"400px");

به روز شده در: 92/10/16