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

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

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

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

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

<!-- notification bar -->
	<div class="note-bar">
				<p>سلام این یک متن آزمایشی است، در اینجا می توانید اطلاعیه ها و اخبار سایت خود را قرار بدهید.</p>
		<a href="#" id="hidebar" class="close">
            <img src="<?php bloginfo('template_directory'); ?>/icon-close.png">
		</a>
	</div>

	<!-- Button to open notification bar -->
	<div class="open-button">		
		<a href="#" id="showbar">
			<img src="<?php bloginfo('template_directory'); ?>/icon-open.png" >
		</a>
	</div>

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

/*------- Notification Bar-----*/
.note-bar{
	display:none;
	overflow: hidden;
	background: rgba(255, 88, 61, 0.4);
	height: 38px;
	border-bottom: 4px solid #fff;
	padding-right:30px;

}

.note-bar p {
	color: #FFFFFF;
	float: right;
	font-size: 12px;
	line-height: 36px;
	margin: 0 0 0 10px;
	padding: 0;
	text-shadow: none;

}

.close{
	margin: 8px 10px 0 0;
	margin-left:40px;
	float: left;
}

.open-button {
	padding-top: 10px;
	width: 30px;
	height:30px;
	background: rgba(255, 88, 61, 0.4);
	border: 4px solid #fff;
	border-top: 0px;
	position: fixed;
	top: 0;
	left: 30px;
	display: none;	
}
.open-button #showbar{
margin:0 5px;	
}

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

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

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

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

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

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

<script type="text/javascript">
  $(document).ready(function(){
 محل قرار گیری کدها
  });
</script>

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

$(".note-bar").slideDown(300);

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

$("#hidebar").click(function(){
    $(".note-bar").slideUp(300, function(){
        $(".open-button").slideDown(300);
    });
    return false;
});

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

$("#showbar").click(function(){             
    $(".open-button").slideUp(300, function(){
        $(".note-bar").slideDown(300);
    });
    return false;
});

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

<script>
    $(document).ready(function(){            

        $(".note-bar").slideDown(300);  

        $("#hidebar").click(function(){
            $(".note-bar").slideUp(300, function(){
                $(".open-button").slideDown(300);
            });
            return false;
        }); 

        $("#showbar").click(function(){             
            $(".open-button").slideUp(300, function(){
                $(".note-bar").slideDown(300);
            });
            return false;
        });     

    });
</script>

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

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

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

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

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 2 آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=7907
کلمات کلیدی پست :
مطالب مرتبط
10,280اسلاید تمام صفحه و لغزان به صورت جی کوئری تاریخ : 2016/08/3
10,238پوسته تک صفحه‌ ای ژنیک به صورت CSS و HTML تاریخ : 2014/06/17
7,222منو جی کوئری MetNav 2 به سبک ویندوز مترو تاریخ : 2013/11/21
6,356گالری پیشرفت نوار بسیار حرفه ای جی کوئری تاریخ : 2013/11/25
15,405اسکریپت افکت گذاری بر روی تصاویر Shape Hover تاریخ : 2014/11/24
10,135پلاگین لودر جی کوئری Spring Loaders تاریخ : 2016/04/21
7,100اسکریپت لیست کارها به صورت ایجکس تاریخ : 2013/10/21
13,580پلاگین جی کوئری شمارنده اعداد FlipCounter تاریخ : 2015/07/12
13,738اسکریپت جی کوئری جستجوگر سریع صفحات هلمز تاریخ : 2017/10/30
8,428پلاگین جی کوئری صفحه بندی برای بوت استرپ تاریخ : 2014/02/9
9,861افزونه حرفه ای مکعب نمونه کارها تاریخ : 2013/12/15
9,473ساخت تولتیپ خودکار با کمک جی کوئری تاریخ : 2014/07/22
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات