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

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

سلام.
چند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید.
و امروز هم آموزش ساختش رو با کمک 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="https://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>

 

امیدوارم که توضیحات مفید بوده باشه…
تا درودی دیگر، بدرود…
منبع اصلی : gazpo.com

دیدگاه کاربران در مورد این نوشته

  1. سلام میخواستم ببینم که عیبی نداره بنرتون رو روی سایتم قرار بدم و شماهم لینکمو تبادل کنید خب این سوال اول

    من سایت موزیکمو طراحی کردم و میخوام در عکس و ادامه مطلب که زیرشه یه قاب قرار بدم ممنون زود ج بدید

    توسط آرمان پاسخ

  2. سلام.ممنون

    جایی که گفتین| کد زیر هم نتیجه ی کامل شده ی کدهای بالاست

    اون کد کامل رو باید کجا قرار بدم؟بی زحمت دقیق بگید چون من در حد مبتدی بلدم.ممنون

    توسط hadi پاسخ

    1. سلام، دو راه برای استفاده از این کد دارید:
      1- کل این کد رو قبل از پایان تگ کپی کنید. (این تگ رو میتونید در فایل footer.php وردپرس ببینید)
      2- تگ های رو حذف کنید و محتوای داخلی (کل تابع $(document).ready(function()) رو در یک فایل با فرمت js ذخیره کنید. در نهایت هم باید این فایل رو در قالبتون فراخوانی کنید.

      توسط علی میرزائی پاسخ

  3. سلام
    با تشکر از سایتفوق العادتون
    یه سوال داشتم این که همه این کار ها رو کردم ولی هیچی به هیچی اصلاً چیزی نشون نمیده
    همه رو به دقت انجام دادم!! 🙁
    با تشکر

    توسط مسعود پاسخ

    1. سلام،
      به سؤالات برخی از دوستان که مشکل مشابه شما رو داشتن، در دیدگاه های قبلی پاسخ داده شده. لطفا دیدگاه های قبلی رو مطالعه کنید.

      توسط علی میرزائی پاسخ

  4. سلام
    خیلی خوب بود
    اما یک سوال:
    چه طوری می شه پیام را همون جایی که روی فلش می زنی باز بشه( یعنی دوباره برنگردی بالای صفحه)
    مرسی

    توسط عباس پاسخ

    1. سلام،
      برای این کار میتونید از پروپرتی position:fixed (در css) استفاده کنید.

      توسط علی میرزائی پاسخ

  5. سلام خدمت ومید ه وهمه دوستان.
    من مهخوام بجای این از فورم تماس و همچنان پنل ورد و عضوست استفاده کنم مشود رهنمایی کند یا آوزش آماده کند

    توسط همدی پاسخ

  6. سلام یک مشکلی داشتم چطور میشه این کادر رو زمانی که توش نوشته ای نیست نشون نده اصلا یعنی وقتی قسمت کادر نوشته ای نزاریم موقع بالا اومدن سایت دیگه نشون نده کادر رو آیا میشه چنین کاری کرد؟چطور ؟

    توسط مهدی پاسخ

    1. بله، میتونید یک متغیر php تعریف کنید و بعد یک دستور شرطی بذارید که اگه مقدار null داشت چیزی رو نشون نده و اگه حاوی متن بود پیکره بندی html رو بارگذاری کنه. به همین سادگی 🙂

      توسط علی میرزائی پاسخ

      1. مرسی اما خوب برای ما که آشنایی با زبان برنامه نویسی و دستورات به طور کامل نداریم سخته متاسفاته اگر امکانش هست بگید دستورش چیه و کجا باید قرار داد ممنون میشم..فکر کنم دستور مفیدی باشه که شاید بقیه دوستان هم بقیه به کارشون بیاد چون کادر اعلانات هست همیشه هم خوب مسلما نیاز به اعلانات نیست.. اگر بتونید کمک کنید ممنون میشم… 🙂

        توسط مهدی پاسخ

        1. این کد رو امتحان کنید:
          <?php
          $content="";
          if ($content!=""){
          ?>
          <div class="note-bar">
          <p><?php echo $content; ?></p>
          <a href="#" id="hidebar" class="close">
          <img src="<?php bloginfo('template_directory'); ?>/icon-close.png">
          </a>
          </div>
          <div class="open-button">
          <a href="#" id="showbar">
          <img src="<?php bloginfo('template_directory'); ?>/icon-open.png" >
          </a>
          </div>
          <?php } ?>
          * با تعیین یک رشته به متغیر $content، تابلو فعال میشه.

          توسط علی میرزائی پاسخ

      2. این دستورش رو می تونید بگید ما آشنایی کامل نداریم ممنون میشم

        توسط مهدی پاسخ

  7. سلام من تمامی دستوارت رو انجام میدم و اون کادر نمیاد و فقط نوشته نشون داده میشه چیزی رو نباید دانلود کنیم ؟ الان در سایت انگاری جای 2 تا عکس رو نمی تونه بشناسه ؟
    http://up.download.ir/di/M6JY/boxerror.jpg
    و کلا کادر به این شکل در اومده و دستورات طبق گفته شما انجام دادم مشکل از کجاست ممنون از شما

    توسط مهدی پاسخ

    1. سلام،
      احتمالا استایل دهی رو به درستی انجام ندادید!!! یکبار دیگه کلیه مراحل رو ریز به ریز دنبال کنید.
      در مورد تصاویر هم آیکون های فراخوانی شده رو از بخش دمو دانلود و سپس آدرس دهیشون کنید.

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید