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

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

عنوانپاسخبازدیدتوسط
iconforumمدیریت محتوای فروشگاهی014irantesco
iconforumسئو سایت اینتکس225H A S A N
iconforumمشکل در آپدیت نشدن مطالب ایندکس شده و ایندکس نشدن مطالب جدید348sir-mahan
iconforum" صندلی داغ " - 25 بهمن ماه 1395 - mrrashidpour282996mrrashidpour
iconforumدرخواست راهنمایی441H A S A N
iconforumکمک در طراحی سایت تخته نعل انلاین019mousavi1376
iconforumدرخواست کد html بخش تیم ما023Farzadtehran1390
iconforumفیلتر حرفه ای ووکامرس485AynaZ
iconforumچرا به اپل آیدی نیاز داریم؟!2202AynaZ
iconforumقیمت کانکس467AynaZ
iconforum17 تکنیک انتخاب عناوین جذاب برای وبلاگ و سایت131AynaZ

آموزش وردپرس WordPressآموزش وردپرس WordPress سایت

آموزش جی کوئری jQueryآموزش جی کوئری jQuery جاوا اسکریپت

آموزش انگولار جی اس Angular JS آموزش انگولار جی اس 2 AngularJS 

آموزش اچ تی ام ال HTML5 CSS3آموزش HTML5 و CSS3 اچ تی ام ال 5

آموزش پی اچ پی PHPآموزش پی اچ پی PHP پک 1 برنامه نویسی وب

آموزش سئو SEO آموزش سئو سایت و وردپرس SEO گوگل 

آموزش سوئیفت SWIFT آموزش سوئیفت Swift برنامه نویسی اپل

آموزش برنامه نویسی اندروید استودیو  آموزش برنامه نویسی اندروید استودیو  

آموزش زامارین Xamarinآموزش زامارین Xamarin برنامه نویسی موبایل

هاست درگاه پرداخت

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

آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس
ساخت تابلو اعلانات با کمک جی کوئریReviewed by جواد on Aug 12Rating: 4.5ساخت تابلو اعلانات با کمک جی کوئریچند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید. و امروز هم آموزش ساختش رو با کمک css و جی کوئری براتون آماده کردم، پس همراه ما باشید

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

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

در ادامه بخوانید  باز شدن تبلیغات پاپ آپ در کلیک اول

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

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

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

در ادامه بخوانید  انتشار دومین شماره ماهنامه طراحی وب

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

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

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

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

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

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

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

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

در ادامه بخوانید  رفع خطای ۴۰۴ پیوندهای یکتا در لوکال هاست

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

تبلیغات


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

دانلود

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/05/21 2 آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
2,048افزونه حرفه ای مکعب نمونه کارها تاریخ : 1392/09/24
2,770Seven Slider اسلایدر فوق العاده زیبا به صورت جی کوئری تاریخ : 1392/08/30
4,192اسکریپت اسلاید Coverflow به صورت 3D با jQuery و CSS3 تاریخ : 1393/06/18
3,518فرم جستجو به صورت CSS , جی کوئری + PSD تاریخ : 1392/10/6
4,830آموزش ایجاد افکت shake + جی کوئری تاریخ : 1393/04/30
5,316نمایش متون دلخواه به صورت لایت باکس تاریخ : 1393/05/21
3,209اسکریپت ایجاد صفحات Flip Book با اسکریپت WOWBook تاریخ : 1392/08/7
2,240اسلاید تمام صفحه و لغزان به صورت جی کوئری تاریخ : 1395/05/13
2,328دانلود ویترین کشویی جی کوئری تاریخ : 1392/09/23
1,468پلاگین جی کوئری برای تغییر رنگ صفحه تاریخ : 1394/12/1
2,037ویجت نمایش آب و هوا با جی کوئری تاریخ : 1394/12/1
2,221پلاگین لودر جی کوئری Spring Loaders تاریخ : 1395/02/2
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب