قائمة عمودية قابلة للطي بتقنية jQuery

07‏/08‏/2010


 


انشاء قائمة عمودية قابلة للطي بتقنية jQuery

يعجبني هذا النوع من القوائم والتي تعتمد على تأثير مميز

مثل Slide تحت تأثيرات jQuery


ويكون شكل قوائم  الشكل عمودي وليس أفقي.

هذا الدرس سأشرح فيه عن كيفية عمل إضافة مميزة بقنية jQuery،
تم قرائته في هدا الموقع 

 


و هو عبارة عن قائمة او اختصار بشكل مميز




مثال (Demo)



 وسأستخدم صورة سريعة لطرح فكرة الدرس،




أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم   " تحرير HTML "
 
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. 

ثالثا : ضع علامة في خانة توسيع القوالب .
 
قبل كل شيء سيكون محتوى الاضافة مخفي بدون الستايل

لدالك عليك البحث عن  هذا الوسم






]]></b:skin>

 


 و نضع قبله تماما هدا الكود 






<style type="text/css">



 {

margin: 10px auto;

    width: 570px;

    font: 75%/120% Arial, Helvetica, sans-serif;

}

p {

padding: 0 0 1em;

}

/* message display page */

.message_list {

list-style: none;

margin: 0;

padding: 0;

width: 383px;

}

.message_list li {

padding: 0;

margin: 0;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT9tPgUCHWhlzdCljwFc34CdtueoKrUUQ-MVhDTsUKKpvwD1ZICtG5544r5hlldVtP0cR1PFJfQBP_P2aiDxXiqiKmBU1C39NDnRvKsUszMN62LTfjWzI-pn9awZrlQd_38IxCj12u_mJy/s320/message-bar.gif) no-repeat;

}

.message_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

}

.message_head .timestamp {

color: #666666;

font-size: 95%;

    position: absolute;

right: 10px;

top: 5px;

}

.message_head cite {

font-size: 100%;

    font-weight: bold;

font-style: normal;

}

.message_body {

padding: 5px 10px 15px;

}

.collapse_buttons {

    text-align: right;

    border-top: solid 1px #e4e4e4;

padding: 5px 0;

    width: 383px;

}

.collapse_buttons a {

margin-left: 15px;

float: right;

}

.show_all_message {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7uBKKOM9rZz1mXakvkkEMuTrqtRpC4lCdyYxhCiZfP2yDDbWuU5cE6qX1VLJ_G-CWXoX8YCYqg0CHx7QL3nBuUFyJlBHhsTXCCnDAdhtYiYGnSi4Nim4p9I4NT2u-dKltNIeDA45LwPx7/s320/tall-down-arrow.gif) no-repeat right center;

padding-right: 12px;

}

.show_recent_only {

display: none;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYiIlsLYHzJ9-ibWR-xg035mYQQoXGgeM31dbAePQ_ellEPTFsYWIRWeLcvgYkVs6bjRdm-jE7D_q2O8k07j77NwMGfcy_AcI1NEXuJCh4TgaBPYlv_okRbolcLe3gFLsyC_oYq4ttrOY/s320/tall-up-arrow.gif) no-repeat right center;

padding-right: 12px;

}

.collpase_all_message {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSNtNL0vDZ7DjPfO6aL32c_uPz7DUY3ASdWqqxtKvq8IHeT-zycfFTHaY1BJBl8pulKfIrPLlD6kd-oAMEjXVLMFU0fmIGa5wyGdikyF1BVIp8JlAI4QHJFvObBmKEyawL0PARZAnyfXg8/s320/collapse-all.gif) no-repeat right center;

padding-right: 12px;

    color: #666666;

}

</style>



 

 

إستخدام مكتبة jQuery في عمل تأثيرات على القوائم

 

 لآن نأتي لجزء التأثيرات وباستخدام مكتبة jQuery،

 

بعد إستدعاء مكتبة jQuery  يمكنك تنفيذ الإنزلاق، 


لاحظ أنك تستطيع إستدعاء المكتبة مباشرة 

عبر الموقع بوضع هذه الشفرة لديك وهو ما سيوفر عليك الوقت:




<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/jquery.js"></script>



أما بالنسبة لعمل الإنزلاق فسيكون عن طريق دالة




<script type="text/javascript">

$(document).ready(function(){

   

//hide message_body after the first one

$(".message_list .message_body:gt(0)").hide();

   

//hide message li after the 5th

$(".message_list li:gt(4)").hide();



   

//toggle message_body

$(".message_head").click(function(){

$(this).next(".message_body").slideToggle(500)

return false;

});



//collapse all messages

$(".collpase_all_message").click(function(){

$(".message_body").slideUp(500)

return false;

});



//show all messages

$(".show_all_message").click(function(){

$(this).hide()
$(".show_recent_only").show()

$(".message_list li:gt(4)").slideDown()

return false;

});


//show recent messages only

    $(".show_recent_only").click(function(){

$(this).hide()

$(".show_all_message").show()

$(".message_list li:gt(4)").slideUp()

return false;

});



});

</script>

ليكون لك الكود الأخير الدي سوف تضعه تحت


</head>

هو


<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

   

    //hide message_body after the first one

    $(".message_list .message_body:gt(0)").hide();

   

    //hide message li after the 5th

    $(".message_list li:gt(4)").hide();



   

    //toggle message_body

    $(".message_head").click(function(){

        $(this).next(".message_body").slideToggle(500)

        return false;

    });



    //collapse all messages

    $(".collpase_all_message").click(function(){

        $(".message_body").slideUp(500)

        return false;

    });



    //show all messages

    $(".show_all_message").click(function(){

        $(this).hide()

        $(".show_recent_only").show()

        $(".message_list li:gt(4)").slideDown()

        return false;

    });



    //show recent messages only

    $(".show_recent_only").click(function(){

        $(this).hide()

        $(".show_all_message").show()

        $(".message_list li:gt(4)").slideUp()

        return false;

    });



});

</script>

 

أخيرا :  استعرض مدونتك ثم احفظ قالبك.


تطبيق الإضافة
قم بكتابة تدوينتك بالطريقة المعتادة

و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,

أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة



<div style="text-align: center;">

<ol class="message_list">

<li>

<p class="message_head"><cite>أمن و حماية</cite></p>

<div class="message_body">

<p>AVGبرنامج قوي جدا وافضل مقاوم للفيروسات</p>

</div>

</li>

<li>

<p class="message_head"><cite>البرمجة</cite></p>

        <div class="message_body">

<p>عبارة عن مجموعة من الأوامر، تكتب وفق مجموعة من القواعد </p>

</div>

</li>

<li>

<p class="message_head"><cite>تبادل الخبرات</cite></p>

        <div class="message_body">

<p>تبادل الخبرات  وحلول مشاكل الحاسوب</p>

</div>

</li>

<li>

<p class="message_head"><cite>برامج الحاسب</cite></p>

        <div class="message_body">

<p>اخر برامج الكمبيوتر</p>

</div>

</li>

<li>

<p class="message_head"><cite>عنوان الرسالة</cite> </p>

        <div class="message_body">

<p>محتوى الرسالة</p>

</div>

</li>

<li>

<p class="message_head"><cite>عنوان الرسالة</cite> </p>

        <div class="message_body">

<p>محتوى الرسالة</p>

</div>

</li>

<li>

<p class="message_head"><cite>عنوان الرسالة</cite> </p>

        <div class="message_body">

<p>محتوى الرسالة</p>

</div>

</li>

<li>

<p class="message_head"><cite>عنوان الرسالة</cite></p>

        <div class="message_body">

<p>محتوى الرسالة</p>

        </div>

    </li>

    <li>

<p class="message_head"><cite>عنوان الرسالة</cite></p>

        <div class="message_body">

<p>محتوى الرسالة</p>

</div>

</li>

</ol>

<p class="collapse_buttons"><a href="#" class="show_all_message">اضهار كل الرسائل</a> <a href="#" class="show_recent_only">Show 5 only</a> <a href="#" class="collpase_all_message">اخفاء الكل</a></p>

</div>

سيكون الشكل الأخير جاهز بسهولة
 

كل الشكر ل



 



أي استفسار في الموضوع فالتتفضل..سيكون مفيد اا لك