[شرح]استخدام مكتبة الـJquery لعمل قائمة منزلقة جميلة

تاريخ التسجيل : 01/01/1970

السلام عليكم ورحمة الله

درسنا اليوم هو (( استخدام مكتبة الـJquery لعمل قائمة منزلقة جميلة ))

[center]شاهد تقسيم العناصر في القائمة المنزلقة لكي تسهل عليك فهم طريقة التوزيع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ملاحظة :[center] ترتيب العناصر داخل الوسم tapMenu# يجب ان يكون بنفس ترتيب محتوى الوسم boxBody.

[center]نلقي نظره عن كثب على كود Html
نلاحظ ان القائمة المنزلقة اعطيناها الوسم box.
وبداخل
الوسم بداية منطقة الايقونات العلوية (( “id=”tabMenu )) ونسقنا الايقونات
داخل (( li )) باستخدام الـCss وجعلنا لكل (( li )) خلفية خاصة به
باستخدام خصائص الـCss التي ساوضحها في الجزء القادم ..
بعدها ياتي التاطير العلوي للمحتوى المنزلق (( boxTop ))
يليه المحتوى المنزلق ويرتبط ترتيب هذا المحتوى حسب ترتيب الايقونات بداخل الـtabMenu
واخيرا يــأتي التاطير السفلي واعطيناه الوسم (( boxBottom))

[/center][/center]

Code:

<div class="box">

<ul id="tabMenu">
<li class="posts selected">li>
<li class="comments">li>
<li class="category">li>
<li class="famous">li>
<li class="random">li>
ul>

<div class="boxTop">div>

<div class="boxBody">

<div id="posts" class="show">
<ul>
<li>Post 1li>
<li>Post 2li>
<li class="last">Post 3li>
ul>
div>

<div id="comments">
<ul>
<li>Comment 1li>
<li>Comment 2li>
<li class="last">Comment 3li>
ul>
div>

<div id="category">
<ul>
<li>Category 1li>
<li>Category 2li>
<li class="last">Category 3li>
ul>
div>

<div id="famous">
<ul>
<li>Famous post 1li>
<li>Famous post 2li>
<li class="last">Famous post 3li>
ul>
div>

<div id="random">
<ul>
<li>Random post 1li>
<li>Random post 2li>
<li class="last">Random post 3li>
ul>
div>

div>

<div class="boxBottom">div>

div>

طبعا زي ما شرحت اكواد الـHtml قمنا باعطاء كل عنصر وسم خاص به .. وجب علينا تنسيق كل وسم عن طريق خصائص الـCss
وهنا كود الـCss الخاص بالقائمة المنزلقة … بامكانك طبعا تغير مكان القائمة المنزلقة وبسهولة

Code:

<style>

a {
color:#ccc;
text-decoration:none;
}

a:hover {
color:#ccc;
text-decoration:none;
}

#tabMenu {
margin:0;
padding:0 0 0 15px;
list-style:none;
}

#tabMenu li {
float:left;
height:32px;
width:39px;
cursor:pointer;
cursor:hand;
}

/* this is the button images */
li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {
width:227px;
}

.boxTop {
background:url(images/boxTop.gif)no-repeat;
height:11px;
clear:both;
}

.boxBody {
background-color:#282828;
}

.boxBottom {
background:url(images/boxBottom.gif) no-repeat;
height:11px;
}

.boxBody div {
display:none;
}

.boxBody div.show {
display:block;
}

.boxBody #category a {
display:block;
}

/* styling for the content*/
.boxBody div ul {
margin:0 10px 0 25px;
padding:0;
width:190px;
list-style-image:url(images/arrow.gif);
}

.boxBody div li {
border-bottom:1px dotted #8e8e8e;
padding:4px 0;
cursor:hand;
cursor:pointer;
}

.boxBody div ul li.last {
border-bottom:none
}

.boxBody div li span {
font-size:8px;
font-style:italic;
color:#888;
}

/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

style>
Javascript

طبعا هذا كود الـJavascript ومن المعروف ان اكواد الـJavascript توضع داخل الـhead في بداية صفحة الـHtml
[b]ملاحظة :
من الضروري تحميل مكتبة الـjquery لكي تعمل القائمة المنزلقة …

Code:

//jquery-1.3.1 انا استخدمت المكتبة
<script type="text/javascript" src="js/jquery-1.3.1.min.js">

Code:

<script type="text/javascript">

$(document).ready(function() {

//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//perform the actions when it's not selected
if (!$(this).hasClass('selected')) {

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//After cleared all the LI, reassign the class to the selected tab
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV index based on the Navigation UL index
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it,
//if you have better ideas to toggle it, please comment
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#535353');
$(this).children().animate({paddingRight:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingRight:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#535353');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

انتهى الدرس
مرفقات الدرس حملوها من هنا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[/b][/center]

» 5- قائمة الادوات في فوتوشوب
» كيف اعمل قائمة منسدلة
» شرح استخدام اسطوانات الانقاذ
» أكبر مكتبة سكربتات ، فقط على منتديات مجاني هدية للجميع
» مكتبة البرامج و الموسوعات الإسلامية