تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
مشکل درخروجی گرفتن اکسل در فرم ساز machform 3 پاسخ 1231 بازدید اسکریپت مشابه ویرگول 0 پاسخ 75 بازدید سئو سایت 2 پاسخ 287 بازدید پشتیبانی افزونه Rankie فارسی 1 پاسخ 299 بازدید مشکل اسلایدر وردپرس 2 پاسخ 536 بازدید کار با api و درون ریزی محصولات در ووکامرس 1 پاسخ 501 بازدید خرید خودکار و اتوماتیک تتر 0 پاسخ 258 بازدید مزایای مستر کارت طلایی 0 پاسخ 283 بازدید کاربرد سرور مجازی میکروتیک و مزیت های آن 1 پاسخ 867 بازدید پراجکت سرور ها 0 پاسخ 492 بازدید
تبلیغات

تبلیغات
تبلیغات تبلیغات

ساخت تابلو اعلانات با کمک جی کوئری

آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس

چند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید.
و امروز هم آموزش ساختش رو با کمک css و جی کوئری براتون آماده کردم، پس همراه ما باشید…اولین قدم کار اینه که به header.php قالبتون برید و قطعه کد زیر رو، درست پایین تگ <body> قرار بدید.این کد چارچوب اصلی تابلو اعلانات ماست، به عبارت دیگه پی کار برنامست و با وجودش طرح کلی، متن و تصویر دکمه های باز و بسته رو شکل میده.

ساخت تابلو اعلانات با کمک جی کوئری

بعد از پی ریزی، نوبت به قالب بندی و زیبا سازی می رسه، پس به style.css قالبتون مراجعه کنید و کد پایین رو در آخر کدهای موجود قرار بدید.

خوب، کارهای مربوط به قالب بندی تابلو اعلانات تموم شده ،البته الان هیچ چیز قابل مشاهده نیست، به همین خاطر باید به سراغ جی کوئری بریم.

جی کوئری در واقع کتابخونه ای از توابع  پیش ساخته ی جاوا اسکریپته و کاربردهای مختلفی رو داره. مثلا در بحث های مربوط به آی جکس و…

در اینجا هم ما به کمک جی کوئری میتونیم یک حالت انیمیشن زیبا رو به برناممون بدیم.

پس به دوباره به header قالبمون بر می گردیم و با گذاشتن کد زیر در اونجا، کتابخونه جی کوئری رو در قالبمون قرارمی دیم. (این کد رو میتونید در بالای </head> قرار بدید)

– نکته : اگه در قالب فعلیتون کتابخونه جی کوئری وجود داره دیگه نیازی به قرار دادن این کد ندارید.

حالا میتونیم کار با جی کوئری رو آغاز کنیم:

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

سپس کد زیر رو در زیر رو در جای مشخص شده قرار بدید.
این کد با فراخوانی تابع slideDown  و پاس دادن کلاسnote-bar بهش، با یک سرعت قابل تنظیم، محتویات این کلاس رو به صورت انیمیشن پایین رونده در بالای سایت به نمایش در میاره.

در ادامه هم کد زیر رو بهش اضافه میکنیم تا وقتی بر روی آیکون ضربدر کلیک کردیم، باکس فعلی بسته شه و محتویات کلاس open-button به نمایش در بیاد.

در آخر هم با اضافه کردن کد زیر کار رو به اتمام میرسونیم (عملکرد این کد هم شبیه کد بالاست)

کد زیر هم نتیجه ی کامل شده ی کدهای بالاست:

امیدوارم که توضیحات مفید بوده باشه…
تا درودی دیگر، بدرود…


دانلود


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

درخواست نصب

نویسنده : تیم محتوای 20اسکریپت 2 آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=7907
کلمات کلیدی پست :
تبلیغات تبلیغات
تبلیغات تبلیغات
مطالب مرتبط
7,707پلاگین لودر جی کوئری Spring Loaders تاریخ : 2016/04/21
4,335دانلود عنصر های انتخاب بسیار زیبا جی کوئری تاریخ : 2013/12/3
5,351دانلود ویترین کشویی جی کوئری تاریخ : 2013/12/14
7,792اسلاید تمام صفحه و لغزان به صورت جی کوئری تاریخ : 2016/08/3
10,523ساده ترین پلاگین جی کوئری لایت باکس تاریخ : 2015/04/27
4,404پلاگین سنجاق کردت تصاویر با جی کوئری تاریخ : 2016/02/20
4,512اسکریپت بازی آنلاین تشخیص اشکال و حروف Symbols تاریخ : 2014/01/14
5,236ویجت نمایش آب و هوا با جی کوئری تاریخ : 2016/02/20
8,386پوسته تک صفحه‌ ای ژنیک به صورت CSS و HTML تاریخ : 2014/06/17
12,625اسلاید بندی تصاویر پس زمینه وبسایت با استفاده از backstretch تاریخ : 2014/07/20
4,344پلاگین جی کوئری نمایش فید مخازن گیتهاب Github تاریخ : 2016/04/14
5,047پلاگین جی کوئری برای تغییر رنگ صفحه تاریخ : 2016/02/20
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات
تبلیغات