no-img
اِمیلاسلام کاربر مهمان. امروز سه شنبه ۲۱ آبان ۱۳۹۸


ادامه مطلب

انتشار؛ ۲۴ مرداد ۱۳۹۸،
89 روز پیش
نمایش متون دلخواه به صورت لایت باکس
امتیاز 5.00 ( 6 رای )
حمایت از emila.ir

نمایش متون دلخواه به صورت لایت باکس

انتشار؛ ۲۴ مرداد ۱۳۹۸ - 89 روز پیش

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

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

توضیحات:

خط اول، لینکی را با نامی دلخواه و قابل ویرایش برای ما میسازد که با کلیک بر روی ان، محتویات کلاس box که شامل متنی دلخواه است به نمایش در می آید.

* توجه : در کلاس box کدی هم وجود دارد که به وسیله ان (با دخالت کدهای jQuery  و css) می توانیم تصویر یک ضربدر را جهت زیبایی بیشتر در گوشه بالای سمت راست به نمایش در اوریم که با کلیک بر روی ان، باکس حاوی متون ما بسته خواهد شد.

برای دانلود عکس کوچک ضربدر کلیک کنید.

* توجه : حتما پس از آپلود تصویر بالا، به آدرس فراخوانی ان در کد مربوطه، دقت داشته باشید.

کلاس backdrop هم با کمک جی کوئری تصویر پس زمینه را تیره رنگ می کند.

<a href="#" class="lightbox">نمایش متن</a>
<div class="backdrop"></div>
<div class="box">	<a href="#" class="close"><img src="<?php bloginfo('template_directory'); ?>/images/close_pop.png" class="btn_close" title="پنجره را ببند" alt="Close" /></a>
سلام این یک متن آزمایشی برای امتحان لایت باکس است.</div>

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

.backdrop {	position:absolute;	top:0px;	left:0px;	width:100%;	height:100%;	background:#000;	opacity: .0;	filter:alpha(opacity=0);	z-index:50;	display:none;
}
.box {	position:absolute;	top:20%;	left:30%;	width:500px;	height:300px;	background:#ffffff;	z-index:51;	padding:10px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;	border-radius: 5px;	-moz-box-shadow:0px 0px 5px #444444;	-webkit-box-shadow:0px 0px 5px #444444;	box-shadow:0px 0px 5px #444444;	display:none;
}
.close {	float:right;	margin-right:2px;	cursor:pointer;
}

اکنون نوبت به آخرین مرحله است، یعنی استفاده از کدهای جی کوئری.
همانطور که می دانید ابتدا باید کتابخونه جی کوئری را در قالبمان فراخوانی کنیم.
پس کد زیر را بین دو تگ head در سربرگ (header.php) قرار دهید.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

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

اگر خواستید از ازدحام کدها در سربرگ جلوگیری کنید، راه بهتری هم وجود دارد و ان هم این است که کد زیر را با فرمت js در قالبتان ذخیره و سپس در سربرگ فراخوانی کنید.

<script type="text/javascript">	$(document).ready(function(){	$('.lightbox').click(function(){	$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');	$('.box').animate({'opacity':'1.00'}, 300, 'linear');	$('.backdrop, .box').css('display', 'block');	});	$('.close').click(function(){	close_box();	});	$('.backdrop').click(function(){	close_box();	});	});	function close_box()	{	$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){	$('.backdrop, .box').css('display', 'none');	});	}
</script>

کار تمام است. نمونه ی کار در qrcode همین مطلب قابل مشاهده است.

منبع : alimir.ir


موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=17419
designer