عمل إضافة مميزة بقنية jQuery

07‏/08‏/2010

هناك العديد من إضافات jQuery تقدم حلول تختصر على مطور الويب

و تعطيه فرصة لتقديم عمل مبني على مكتبة رائعة

يمكن أن ستفيد منه مطورين ومصممين آخرين لكي يجدوا ضالتهم.

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

تم قرائته في هدا الموقع

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

مثال (Demo)

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " تحرير HTML "

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

ثالثا : ضع علامة في خانة توسيع القوالب .

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



]]></b:skin>

و ضع فوقه او اسفله هدا الكود

`<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); }); </script>`

الان كود الستايل وهوال css

نبحث عن الوسم التالي



]]></b:skin>

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

{

    margin: 10px auto;

    width: 570px;

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

}

.accordion {

    width: 480px;

    border-bottom: solid 1px #c4c4c4;

}

.accordion h3 {

     background: #e9e7e7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JqWJcGT1kxWYFq5nLhwtX8cKI8Bn_IRb9x3GFwGIMnT0LHlbFnMWq4AKU91qFmtEFEW405i8bEKh8CX2e87aWdY_3pX-AZ13jZyYE8p4GP0iL-eYhMvEhDEbZWoGnf30iuyqP9_cilh5/s320/arrow-square.gif) no-repeat right -51px;

    padding: 7px 15px;

    margin: 0;

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

    border: solid 1px #c4c4c4;

    border-bottom: none;

    cursor: pointer;

}

.accordion h3:hover {

    background-color: #e3e2e2;

}

.accordion h3.active {

    background-position: right 5px;

}

.accordion p {

    background: #f7f7f7;

    margin: 0;

    padding: 10px 15px 20px;

    border-left: solid 1px #c4c4c4;

border-right: solid 1px #c4c4c4;

}

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

تطبيق الإضافة

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

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

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



<div style="text-align: center;">
 
 <div class="accordion">
 
 <h3>
 
 mozilla browser</h3>
 
 <p>امن للغاية
 
 يدعم اكثر من نافذة في نفس الصفحة
 
 به مجموعة برامج ملحقة به
 
 مثل برنامج فتح الإيميل
 
 عيوب المتصفح موزيلا
 
 الواجهة نوعا ما معقدة</p>
 
 <h3>
 
 lynx browser</h3>
 
 <p>
 
 امن
 
 سريع لانه لا يحمل الصور
 
 لا ياخذ باند ويدث كبير
 
 سهل الاستخدام
 
 تفتح اكثر من موقع في نفس النافذة
 
 تجعل بعض الاختصارات التي نحتاجها كثيرا
 
 والتي تكون موجودة في مكان بعيد "اختيار بداخل قائمة بداخل قائمة" متاحة امامك 
 
 عيوب المتصفح لينكس
 
 معقد جدا</p>
 
 <h3>
 
 internet explorer
 
 </h3>
 
 <p>
 
 تعارضه الكبير مع معظم البرامج
 
 و يستهلك كثيرا الداكرة
 
 و العديد من المواقع لم تعدل توافقها مع هذا الاصدار .</p>
 
 <h3>
 
 Netescape</h3>
 
 <p>
 
 الواجهة نوعا ما معقدة</p>
 
 <h3>
 
 opera browser</h3>
 
 <p>
 
 المتصفح المثالي </p>
 
 </div>
 
 </div>