نمایش مطالب مهم

نمایش مطالب مهم

در این آموزش ما قصد داریم تا با استفاده از CSS و Jquery یک مجموعه از راهنمایی های بازشونده(Slideout)را ایجاد کنیم که شما میتونید از آن برای نمایش محصولات و یا هر چیز دیگری استفاده کنید

برای مشاهده لینک وارد شود

ایده اصلی این پلاگین ایجاد یک بازشونده برای نمایش مطالب و رویدادهای مهم است که هر مطلب میتواند در یکی از گوشه های صفحه به دلخواه باز شود.
برای ایجاد المان های بازشونده(slideout) شما باید یک تگ pیکسان برای هر المان در صفحه ایجاد کنید،اینکار باعث میشود که تمام محتویات به صورت یکسان توسط موتور های جست و جو بررسی شود.متن های واردشده نیز توسط کد های جی کوئری هنگام بارگذاری صفحه با تمام محتویاتشان که شامل عنوان،کلاس ها و استایل ها جایگزین میشوند.

i31

در ابتدا اجازه دهید به ساختار پارگرافهایی که شما قرار است در صفحه قرار دهید نگاهی بیاندازیم.

This slideout is going to open to the bottom-right (the default).

This slideout is going to open to the top-left.

This slideout is going to open to the top-right.

همان طور که مشاهده می کنید هر تگی شامل یک عنوان،یک استایل و یک کلاس است.استایل ها شامل تمام تنظیمات مربوط به نحوه نمایش مطالب است و کلاس ها نیز برای اضافه کردن گزینه های بیشتری برای نمایش هر چه بهتر مطالب است
slideout markup

The title of the slideout

Slideout Content

i31

 

خوب حالا اجازه دهید نگاهی به کدهای CSS بیاندازیم.
styles.css – Part 1

.slideOutTip{
/* The main wrapping div of the slideout tips */
position:absolute;
padding:3px;
top:0;
left:0;
background-color:#111;
font-size:13px;
color:white;
overflow:hidden;
height:22px;
}
.slideOutTip:hover{
/* Applying a CSS3 outer glow on hover */
-moz-box-shadow:0 0 1px #999;
-webkit-box-shadow:0 0 1px #999;
box-shadow:0 0 1px #999;
}

/* The holder for the title and the icon: */
.tipVisible{ cursor:pointer; height:22px; }

.tipTitle{
float:left;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
white-space:nowrap;
line-height:22px;
padding-right:5px;
}

.tipIcon{
width:20px;
height:20px;
float:left;
background-color:#61b035;
border:1px solid #70c244;
margin-right:8px;

/* CSS3 Rounded corners */

-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
}

tipVisible شامل تگ های عنوان و آیکون است که ما محل نمایش آن را در سمت چپ قرار دادیم.این ها تگ هایی هستند که فقط هنگام بارگذاری صفحه برای کاربران نمایش داده می شوند.
styles.css – Part 2

/* Three color themes */
.green .tipIcon{ background-color:#61b035; border:1px solid #70c244; }
.blue .tipIcon{ background-color:#1078C7; border:1px solid #1e82cd; }
.red .tipIcon{ background-color:#CD3A12; border:1px solid #da421a; }

.plusIcon{
/* The plus icon */
width:13px;
height:13px;
background:url('img/plus.gif') no-repeat center center;
margin:4px;

/* Defining a CSS3 animation. Currently only works in Chrome and Safari */
-webkit-transition: -webkit-transform 0.2s linear;
-moz-transition: -moz-transform 0.2s linear;
transition: transform 0.2s linear;
}

.slideOutTip.isOpened{ z-index:10000; }

.slideOutTip.isOpened .plusIcon{
/* Applying a CSS3 rotation to the opened slideouts*/
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Special rules for the left and top - opening versions */

.openLeft .tipIcon{
/* Floating the title and the icon to the right */
margin:0 0 0 8px;
float:right;
}
.openLeft .tipTitle{ float:right; padding:0 0 0 5px; }
.openLeft .slideOutContent{ margin-top:22px; }
.openLeft.openTop .slideOutContent{ margin-top:0; }

.slideOutContent{
/* Hiding the div with the slide out content: */
display:none;
padding:10px;
font-size:11px;
}

/* Hiding the original paragraphs if they have not been replaced (JS disabled): */

.main > p{ display:none; }

بازشونده به طور پیش فرض در قسمت پایین-سمت راست باز میشود که شما میتونید با استفاده از کلاس openLeft یا openTop محل آن را تغییر دهید.
در اینجا ما تعدادی از قوانین CSS استفاده کردیم تا به صفحه پلاگینمان زیبایی دو چندان ببخشیم که از آن جمله میتوان به border-radius و box-shadow و transform:rotate(45deg) p اشاره کرد.
شما اگر این پلاگین را با استفاده از مرورگر سافاری باز کنید مشاهده خواهید کرد که چرخش مطالب با انیمیشن خاصی انجام میشود که دلیل آن استفاده از خاصیت transition است.

i31

jQuery
هنگامی که صفحه در حال بارگذاری است Jquery با استفاده از یک حلقه تمام پاراگرافهای موجود در تگ اصلی div با مطالب بازشونده جایگزین می کند.سپس منتظر اجرای ایونتی برای نمایش مطالب می ماند.
script.js – Part 1

$(document).ready(function(){
/* The code here is executed on page load */

/* Replacing all the paragraphs */
$('.main p').replaceWith(function(){

/*
The style, class and title attributes of the p
are copied to the slideout:
*/

return '\
\ \

\

\

‘+$(this).attr(‘title’)+’

\

\ \

\ ‘+$(this).html()+’ \

\

'; }); $('.slideOutTip').each(function(){ /* Implicitly defining the width of the slideouts according to the width of its title, because IE fails to calculate it on its own. */ $(this).width(40+$(this).find('.tipTitle').width()); }); /* Listening for the click event: */ $('.tipVisible').bind('click',function(){ var tip = $(this).parent(); /* If a open/close animation is in progress, exit the function */ if(tip.is(':animated')) return false; if(tip.find('.slideOutContent').css('display') == 'none') { tip.trigger('slideOut'); } else tip.trigger('slideIn'); });

از نسخه ۱.۴ جی کوئری به بعد،متد ()replaceWith توابع را به صورت پارامتر دریافت می کند.این امکان بسیار مفید است و به ما در تولید نشانه گذاری بسیار کمک می کند.
this به المان ها اشاره می کند بنابراین ما به آسانی میتونیم مقادیر مختلف پاراگراف ها را دریافت کنیم.
script.js – Part 2

$('.slideOutTip').bind('slideOut',function(){

var tip = $(this);
var slideOut = tip.find('.slideOutContent');

/* Closing all currently open slideouts: */
$('.slideOutTip.isOpened').trigger('slideIn');

/* Executed only the first time the slideout is clicked: */
if(!tip.data('dataIsSet'))
{
tip .data('origWidth',tip.width())
.data('origHeight',tip.height())
.data('dataIsSet',true);

if(tip.hasClass('openTop'))
{
/*
If this slideout opens to the top, instead of the bottom,
calculate the distance to the bottom and fix the slideout to it.
*/

tip.css({
bottom : tip.parent().height()-(tip.position().top+tip.outerHeight()),
top : 'auto'
});

/*
Fixing the title to the bottom of the slideout,
so it is not slid to the top on open:
*/
tip.find('.tipVisible').css({position:'absolute',bottom:3});

/*
Moving the content above the title, so it can
slide-open to the top:
*/
tip.find('.slideOutContent').remove().prependTo(tip);
}

if(tip.hasClass('openLeft'))
{
/*
If this slideout opens to the left, fix it to the right so
the left edge can expand without moving the entire div:
*/
tip.css({
right : Math.abs(tip.parent().outerWidth()-(tip.position().left+tip.outerWidth())),
left : 'auto'
});

tip.find('.tipVisible').css({position:'absolute',right:3});
}
}

/* Resize the slideout to fit the content, which is then faded into view: */

tip.addClass('isOpened').animate({
width : Math.max(slideOut.outerWidth(),tip.data('origWidth')),
height : slideOut.outerHeight()+tip.data('origHeight')
},function(){
slideOut.fadeIn();
});

ما دو ایونت دلخواه به بازشونده اضافه می کنیم:slideIn و sldieOut.این یک روش راحت برای باز و بسته کردن ایونت ها می باشد.
بسته به بازشده در راست یا چپ کلاس ها به ایونت ها نسبت داده می شوند،ما تعدادی امکانات بصورت دلخواه به آنها اضافه کردیم.
سپس ما کلاس isOpened به بازشونده اختصاص می دهیم.این کلاس تنها مشخص کننده باز بودن بازشونده نیست بلکه برای اختصاص ۱۰۰۰۰ ایندکس برای قرارگیری در ابتدای صفحه نیز به کار برده میشود.
script.js – Part 3

}).bind('slideIn',function(){ // Binding the slideIn event to .slideOutTip
var tip = $(this);

/* Hide the content and restore the original size of the slideout: */

tip.find('.slideOutContent').fadeOut('fast',function(){
tip.animate({
width : tip.data('origWidth'),
height : tip.data('origHeight')
},function(){
tip.removeClass('isOpened');
});
});

});

}); /* Closing $(document).ready() */

در بالا کد مربوط به بسته شدن اسلاید بازشده و برگرداندن آن به حالت اصلی قرار داده شده است.
پایان

+7
-1


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


دو × 3 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>