طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumسفارش پلاگین وردپرس04yosef67
iconforumاسکریپت و افزونه بانک پاسارگاد217H A S A N
iconforumهشدار درباره ادامه حملات سایبری به بانکها09AynaZ
iconforumقالب های ایرانی وردپرس * مارکت مجمع طراحان وب و گرافیک ایران05wwwha
iconforumلوگو سایت تفریحی558AynaZ
iconforumاسکریپت ptciran8102AynaZ
iconforumافزونه کوتاه کننده489AynaZ
iconforumلایک وردپرس114AynaZ
iconforumدرخواست اسکریپت کوتاه کننده لینک112AynaZ
iconforumدوزبانه کردن سایت113AynaZ
iconforumعلائم هموروئيد2194AynaZ
درگاه پرداخت
درگاه پرداخت

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

آموزش ها , مقالات,آموزش,ترفند
آموزش ساخت تب بوسیله جی کوئریReviewed by جواد on Nov 27Rating: 5.0 آموزش ساخت تب بوسیله جی کوئریتب، یکی از امکانات و قسمت هایی هست که در میان طراحان وب از محبوبیت خاصی برخوردار هست. بوسیله تب ها شما میتوانید ظاهر مناسبی به استایل و قالب وبسایت خود اضافه کنید و همچنین در کنار مرتب سازی وبسایت، امکانات بیشتری نیز در اختیار کاربران وبسایت خود قرار بدید.

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

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

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

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

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

حتما بخوانید  افزونه منوی موبایل ShiftNav Pro برای وردپرس

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

 

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

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

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

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

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

حتما بخوانید  آموزش نمایش موقعیت کاربران در وردپرس

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

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

نمونه درخواست شده در قسمت نظرات. تعداد تب ها در این نمونه چهار عدد میباشد. با یک نگاه ساده میتوانید طریقه اضافه کردن تب را فرا بگیرید:
حتما بخوانید  نمایش خوراک آر اس اس در سایت

به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1392/09/6 6 آموزش ها , مقالات,آموزش,ترفند

لینک کوتاه مطلب : http://www.20script.ir/?p=1938

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
10,991اسکریپت پشتیبانی تیکتینگ Kayako Fusion تاریخ : 1394/02/3
4,118قالب 404 متحرک جدید و زیبا تاریخ : 1392/10/1
3,735قالب میزبانی وب و هاستینگ inHost برای وردپرس و WHMCS تاریخ : 1394/05/29
1,061افزونه چندزبانه کردن وبسایت با WPML Translation Check برای وردپرس تاریخ : 1395/02/31
1,445افزونه فارسی ZOO برای جوملا 3+ تاریخ : 1395/02/29
3,820پوسته PSD , HTML صفحه فروش اکانت سایت Vip تاریخ : 1392/07/27
8,915اسکریپت جامعه مجازی PHPFox مدل Neutron نسخه 4.0.7 تاریخ : 1394/07/28
1,919اسکریپت دایرکتوری ایجاد سایت نیازمندی ها و ثبت آگهی Codebase Business Directory Pro تاریخ : 1395/04/25
1,577قالب فاکس بلاگ نسخه ۱ برای وردپرس تاریخ : 1392/10/26
5,132قالب آقای موزیک ( Mr Music ) برای وردپرس تاریخ : 1393/11/23
1,740راه اندازی املاک اینترنتی با پوسته Realtor برای وردپرس تاریخ : 1395/05/3
3,848اسکریپت فارسی فروشگاه ساز TomatoCart تاریخ : 1392/09/5
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب