ارزدیجیتال
حراجی دامنه های ویژهمشاهده





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

آموزش ساخت تب بوسیله جی کوئری

آموزش ها , مقالات,آموزش,ترفند

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

آموزش ساخت تب بوسیله جی کوئری

برای ساخت تب، از روشهای گوناگونی استفاده میشود که یکی از این روش ها، استفاده از جی کوئری میباشد. امروز یک آموزش جدید برای شما آماده کردم که بوسیله آن، میتوانید یکی از سریع ترین و سبک ترین تب های ممکن را بر روی وبسایت خود نصب کنید.

این آموزش برای سیستم مدیریت محتوای دیتالایف میباشد که شما میتوانید با کمی تغییرات آن را در هر جا استفاده کنید.

برای ساخت و ایجاد این تب ها یک سری پیشنیاز را باید آماده کنید. مهمترین آن، کتابخانه جی کوئری نسخه ۱٫۷ به بالا میباشد، اما در دیتالایف شما به این کتابخانه نیازی ندارید، به دلیل اینکه سیستم به صورت دیفالت، این کتابخانه را بر روی خود نصب دارد. در نتیجه از این قسمت چشم پوشی میکنیم.

قدم اول برای ساخت تب های مورد نظر ما، کد فعال کننده آن میباشد. برای اضافه کردن کد های فعال کننده، روش های متعددی وجود دارد. روش اول، قرار دادن آن در فایل libs.js موجود در قالب دیفالت دیتالایف انجین میباشد. اما ممکن است که شما از قالبی متفاوت استفاده کنید و همچین فایلی در اختیار نداشته باشید.

حال، شما میبایست با یک ادیتور متن مانند Notepad یک فایل جدید ایجاد کنید و کد های زیر را داخل آن قرار بدید:

    (function(e){e(function(){e("ul.tabs").on("click","li:not(.current)",function(){e(this).addClass("current").siblings().removeClass("current").parents("div.section").find("div.box").eq(e(this).index()).fadeIn(150).siblings("div.box").hide()})})})(jQuery)

 

همانطور که مشاهده میکنید، کدهای فعال کننده این تب، بسیار کوتاه میباشند و سایز آن فقط ۲۵۳ بایت میباشد. حال پس از کپی کردن کد ها، فایل را با یک نام ساده ذخیره میکنیم. نامی که ما برای فایل انتخاب میکنیم tabs هست. توجه داشته باشید که فایل را باید با پسوند js ذخیره کنید. در نتیجه فایل نهایی ما tabs.js میشود.

قدم بعدی، ایمپورت کردن فعال کننده در قالب میباشد. شما ابتدا باید فایل tabs.js را به داخل پوشه js در قالب دیتالایف خود انتقال دهید. اگر همچین پوشه ای در اختیار ندارید، خودتان آن را ایجاد کنید. پس از انتقال tabs.js باید فایل main.tpl قالب خود را باز کرده و کد زیر را پیدا کنید:

    </head>

قبل از کد بالا، میبایست کد ایمپورت کردن فایلی که ساختیم را قرار بدیم. در نتیجه، کد زیر را قبل از کد بالا قرار میدهیم:

    <script type="text/javascript" src="{THEME}/js/tabs.js"></script>

حال میتوانیم کدهای نمایش تب ها را در قالب خود قرار بدیم. در این آموزش، ما تصمیم داریم که تب های خودمان را در فایل main.tpl قالب قرار بدهیم. شما میتوانید در هر کدام از فایل های قالب دیتالایف که تمایل داشتید، کد زیر را قرار بدهید تا تب ها را به نمایش بگذارید:

    <div class="section">
    <ul class="tabs">
    <li class="current">تب شماره یک</li>
    <li>تب شماره دو</li>
    </ul>
    <div class="box visible">
    نمایش محتویات تب شماره یک
    </div>
    <div class="box">
    نمایش محتویات تب شماره دو
    </div>
    </div>

حال، اگر قالب خودتان را چک کنید، متوجه میشوید که تب ها همگی قابل رویت هستند و نمایش داده میشوند! دلیل این مشکل هم این هست که ما هنوز قسمت آخر آموزش را انجام نداده ایم. قسمت آخر این آموزش، قرار دادن کدهای CSS هستند. در این مرحله شما میبایست یکی از فایلهای CSS قالب خودتان را باز کنید و در آخر فایل، کد زیر را قرار دهید:

    .box {display: none;}
    .box.visible {display: block;}

در آخر، تب های شما آماده هستند. اما همانطور که مشاهده میکنید، دارای ظاهر مناسبی نیستند. در نتیجه کد های زیر را هم در ادامه فایل CSS قرار میدهیم تا ظاهر مناسب تری به تب ها بدهیم:

    .section {margin: 5px;direction:rtl;}
    ul.tabs {height: 28px;line-height: 25px;list-style: none;border-bottom: 1px solid #DDD;}
    .tabs li {float: right;display: inline;margin: 0 0 -1px 1px;padding: 0 13px 1px;color: #777;cursor: pointer;background: #F9F9F9;border: 1px solid #E4E4E4;border-bottom: 1px solid #F9F9F9;position: relative;}
    .tabs li:hover,.vertical .tabs li:hover {color: #F70;padding: 0 13px;background: #FFFFDF;border: 1px solid #FFCA95;}
    .tabs li.current {color: #444;background: #EFEFEF;padding: 0 13px 2px;border: 1px solid #D4D4D4;border-bottom: 1px solid #EFEFEF;}
    .box {display: none;border: 1px solid #D4D4D4;border-width: 0 1px 1px;background: #EFEFEF;padding: 5px 12px;}
    .box.visible {display: block;}

خسته نباشید! در اینجا کار ساخت تب ها به اتمام رسیده است. قرار دادن تب در قالب های دیتالایف کار بسیار راحتی میباشد، اما برای اینکه کاربران آماتور نیز به راحتی با مراحل انجام کار آشنا شوند، سعی کردم در این آموزش تمامی قسمت ها را توضیح بدم تا درک کردن آن راحت تر باشد.

نمونه درخواست شده در قسمت نظرات. تعداد تب ها در این نمونه چهار عدد میباشد. با یک نگاه ساده میتوانید طریقه اضافه کردن تب را فرا بگیرید:
    <div class="section">
    <ul class="tabs">
    <li class="current">تب شماره یک</li>
    <li>تب شماره دو</li>
    <li>تب شماره سه</li>
    <li>تب شماره چهار</li>
    </ul>
    <div class="box visible">نمایش محتویات تب شماره یک</div>
    <div class="box">نمایش محتویات تب شماره دو</div>
    <div class="box">نمایش محتویات تب شماره سه</div>
    <div class="box">نمایش محتویات تب شماره چهار</div>
    </div>

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 6 آموزش ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=1938
کلمات کلیدی پست :
مطالب مرتبط
24,361اسکریپت انجمن ساز Simple Bulletin Board نسخه ۴.۲ تاریخ : 2014/12/22
14,764اسکریپت ایجاد امضای دیجیتال و ثبت اسناد PDF به صورت آنلاین Signer تاریخ : 2019/04/18
12,463اسکریپت اجاره آنلاین ماشین City Ride تاریخ : 2017/08/5
11,988قالب محیط کاربری برای بی بی پرس با امکانات ویژه تاریخ : 2013/12/26
19,032اسکریپت جامعه مجازی اشتراک گذاری عکس و فیلم Tinsta تاریخ : 2018/04/10
3,004اسکریپت مدیریت منابع انسانی و پروژه WorkTick تاریخ : 2024/02/1
3,220اسکریپت رمزگذاری و رمزگشایی متن آنلاین MyHash تاریخ : 2024/01/17
70,446آموزش ارسال اطلاعات یک فرم به ایمیل تاریخ : 2013/10/26
10,616ایجاد فایل راهنما برای محصولات در وردپرس با افزونه X Docs تاریخ : 2019/03/1
19,712قالب تدبیر سیستم برای مدیریت هاستینگ Whmcs تاریخ : 2014/05/11
13,808اسکریپت پشتیبانی تیکتینگ FRticket تاریخ : 2016/07/15
13,591اسکریپت اشتراک گذاری ویدئو Vidplanet Video تاریخ : 2017/08/9
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file