إظهار / إخفاء كل العناصر بشكل منفصل

اذهب الى الأسفل

إظهار / إخفاء كل العناصر بشكل منفصل

مُساهمة من طرف وهبة الساحر في الجمعة 27 مارس 2015 - 20:51


إظهار / إخفاء كل العناصر بشكل منفصل

إظهار / إخفاء كل العناصر بشكل منفصل



إظهار / إخفاء كل العناصر بشكل منفصل
عمل الكود هو: يضع زر لاظهار واخفاء العناصر المستقلة على الرئيسية كما تظهر لديكم فى الصورة هى تقنية رائعة

ملاحظة: الاكواد تعمل ولكن يجب اختيار الكود المناسب لنسخة لمنتداك
صورة للمعاينه

https://i.servimg.com/u/f19/19/08/62/30/dgfgd10.png

الأن نتوجه الى:

لوحة الاداره >> عناصر إضافيه >> HTML و JAVASCRIPT

إدارة أكواد Javascript
تفعيل نظام إدارة أكواد Javascript : نعم
إنشاء كود جديد
العنوان * : أي شيء تريد
أضف الكود الى: الصفحة الرئيسية
ثم نضع الكود التالي:

phpBB2
الكود:

var image_widget_src = "http://i73.servimg.com/u/f73/18/10/89/49/th/tog-wi10.png";

$(function(){
  $('#left .forumline,#right .forumline').find('tr:eq(0)').addClass('bef-tog');
  $('<img class="tog-widget" style="float: right; height: 17px; width: 17px; margin-top: -23px; margin-right: 3px; cursor: pointer;"></img>').insertAfter('.bef-tog');
  $(".tog-widget").each(function(){
    $(this).attr("src", image_widget_src );
    $(this).click(function(){
      $(this).next().slideToggle("slow");
    });
  });
});

phpBB3
الكود:

var image_widget_src = "http://i73.servimg.com/u/f73/18/10/89/49/th/tog-wi10.png";

$(function(){
  $(".module .h3").each(function(){
    $(this).insertBefore($(this).parent());
    $(this).css("padding-right","20px");
  });
  $('<img class="tog-widget" style="float: right; height: 17px; width: 17px; margin-top: -23px; cursor: pointer;"></img>').insertBefore('.module .inner');
  $(".tog-widget").each(function(){
    $(this).attr("src", image_widget_src );
    $(this).click(function(){
      $(this).next().slideToggle("slow");
    });
  });
});

PunBB
الكود:

var image_widget_src = "http://i73.servimg.com/u/f73/18/10/89/49/th/tog-wi10.png";

$(function(){
  $('<img class="tog-widget" style="float: right; height: 17px; width: 17px; margin-top: -23px; margin-right: 3px; cursor: pointer;"></img>').insertAfter('.module.main .main-head');
  $(".tog-widget").each(function(){
    $(this).attr("src", image_widget_src );
    $(this).click(function(){
      $(this).next().slideToggle("slow");
    });
  });
});

Invision
الكود:

var image_widget_src = "http://i73.servimg.com/u/f73/18/10/89/49/th/tog-wi10.png";

$(function(){
  $('<img class="tog-widget" style="float: right; height: 17px; width: 17px; margin-top: -23px; margin-right: 3px; cursor: pointer;"></img>').insertAfter('.module .maintitle');
  $(".tog-widget").each(function(){
    $(this).attr("src", image_widget_src );
    $(this).click(function(){
      $(this).next().slideToggle("slow");
    });
  });
});

ويمكنك تغيير الصورة الى اى صورة اخرى لتناسب منتداك

https://i.servimg.com/u/f73/18/10/89/49/th/tog-wi10.png

تم الشرح بواسطتى
وهبة الساحر
المتطوع المساعد

ارجوا ان اكون قد افدتكم
انتهي الموضوع




عدل سابقا من قبل وهبة الساحر في الإثنين 30 مارس 2015 - 16:08 عدل 1 مرات
avatar
وهبة الساحر
 
 

ذكر
عدد المساهمات : 9862
معدل النشاط : 12401
السُمعة : 125

http://3arb-way.a7larab.net/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى