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


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

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

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

چند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید.
و امروز هم آموزش ساختش رو با کمک 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
کلمات کلیدی پست :
مطالب مرتبط
14,941کد ساعت بسیار زیبای جی کوئری تاریخ : 2018/02/27
11,714دانلود فرم ارسال دیدگاه بسیار زیبا جی کوئری تاریخ : 2013/11/24
9,140اسکریپت تب های پیوند دار تاریخ : 2014/08/4
9,964ایجاد انیمیشن متنی با Textillate به صورت جی کوئری تاریخ : 2014/07/13
7,271دانلود عنصر های انتخاب بسیار زیبا جی کوئری تاریخ : 2013/12/3
8,497دکمه مستطیل شبکه های اجتماعی، PSD + HTML / CSS / جی کوئری تاریخ : 2013/11/27
20,417قالب بسیار زیبای هاستینگ به صورت HTML تاریخ : 2014/07/27
7,172گالری پیشرفت نوار بسیار حرفه ای جی کوئری تاریخ : 2013/11/25
12,252پلاگین جی کوئری ساخت پسورد تصادفی Easy Random Password Generator تاریخ : 2017/10/22
8,343دانلود ویترین کشویی جی کوئری تاریخ : 2013/12/14
8,177افکت سه بعدی بر روی تصاویر به صورت جی کوئری تاریخ : 2013/12/23
18,177آموزش ساخت تب جی کوئری و سی اس اس تاریخ : 2014/09/2
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات