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





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

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

چند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید.
و امروز هم آموزش ساختش رو با کمک 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
کلمات کلیدی پست :
مطالب مرتبط
11,916اسلایدر سه بعدی بسیار زیبای جی کوئری تاریخ : 2013/11/2
15,198اسکریپت 9 سبک خاص آیکون های متحرک شبکه های اجتماعی تاریخ : 2016/07/12
9,085اسکریپت نمایش فن پیج فیسبوک در وبسایت Famax نسخه 5.3 تاریخ : 2016/03/30
14,835اسکریپت تب جی کوئری با افکت Easing تاریخ : 2014/07/20
13,885اسکریپت جی کوئری تاریخچین با طراحی متریال DateDropper تاریخ : 2017/03/3
21,218افزونه ساخت تب های حرفه ای در وردپرس CodeTabs تاریخ : 2017/12/17
19,137اسکریپت افکت گذاری بر روی تصاویر Shape Hover تاریخ : 2014/11/24
20,813اسلاید بندی تصاویر پس زمینه وبسایت با استفاده از backstretch تاریخ : 2014/07/20
16,807ساده ترین پلاگین جی کوئری لایت باکس تاریخ : 2015/04/27
13,349دانلود اسلایدر بسیار زیبا جی کوئری تاریخ : 2013/11/25
11,228پلاگین جی کوئری صفحه بندی برای بوت استرپ تاریخ : 2014/02/9
7,663مدیریت ساده برچسب ها به صورت جی کوئری تاریخ : 2014/02/15
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file