آداة ثلاثية التبويبات للسايدبار

مــن أكـثــر الادوات الــمـهـمــة لـمــن يــحـتـاجــون مـكــان فــي الـسـايــد بــار حـيــث انـهــا تـجـمــع ثــلاث ادوات فــي آداة واحــده مـمــا يـجـعــل هـنــاك مـسـاحــة لادوات أكـثــر فــي الـسـايــد بــار هــذه الآداة هــي بـتــنـسـيــق حـصــري لـكــن مــدون تــم الإهـتـمــام بــان تـعـمــل الآداة عـلــى الـقـوالــب الـمــتـجـاوبــة دون مـشـاكــل وان تـتـخــذ حـجــم الـسـايــد بــار الـمــشـكـلــة الـوحـيــدة الـتــي قــد تـواجـهــك فــي تـركـيــب تـلــك الآداة هــي ان يـكــون قـالـبــك غـيــر مـهــئ فــي مــنـطـقــة الـسـايــد بــار لإسـتـخــدام تـلــك الآداة، الآداة سـتــعـطـيــك ثــلاث مـسـاحــات داخــل الـتــخـطـيــط يــمـكـنــك ان تـضـيــف بـهــا أي أدوات تــعـجـبــك

المعــاينة

/*teqniweb Tabbed Widget*/
.teqsidebartabs { margin-bottom: 20px; }
.teqsidebartabs .widget { border: 0 none !important; box-shadow: 0 0 0 1px #ddd inset; }
.teqsidebartabs .widget h2 { display: none; }
.tabs-widget { height: 35px; list-style: outside none none; margin: 0; padding: 0; }
.tabs-widget li { float: right; list-style: outside none none; padding: 0; text-align: center; width: 33.3%; }
#teqstab2 { float: left; }
#teqstab2 a { border-left: 0 none; }
.tabs-widget li:first-child { margin: 0 }
.tabs-widget li a { background-color: #000; border-left: 1px solid #444; color: #fff; display: block; font-size: 12px; height: 35px; line-height: 35px; text-transform: uppercase; }
.tabs-widget li a:hover, .tabs-widget li a.tabs-widget-current { background-color: #FB6400; color: #fff; text-decoration: none; }

تــنــســيـق :

• #000 هــو لــون خـلــفـيــة الــتـبــويـبــات.
• #fff لـون الـكـتــابـة .
• #FB6400 لــون الإطــار الـنـشــط أو عـنــد تـمـريــر الـمــاوس.
• الرقم 12 هــو حـجــم خــط الـتــبــويــبــات.
• مـن أراد ان يـسـتـخـدم أيـقـونـة لـكـل تـبـويـب يـضـيـف بـعـد الـكـود الـسـابـق الـكـود الـتـالـي:

  #teqstab1 a { background-image: url("*"); background-position: 98% center; background-repeat: no-repeat; }

  
  مع تغيير * برابط الأيقونة.
هـذا خـاص بـالـتـبـويـب الأول...، لـعـمـل أيـقـونـة لـلـتـبـويـب الـثـانـي كـرر الـكـود مـع تـبـديـل الـرقـم 1 ب 3، والـتـبـويـب الـثـالـث بـتـغـيـيـر الـرقـم 1 بــ 2

التفعيل داخل القالب

1. عـلـيــك ان تـبـحــث فــي قـالـبــك عــن اســم اول آداة لـديــك فــي الـسـايــد بــار، فــوق اســم الآداة سـتـجــد سـطــر أولــه كـلـمــة <b:section، فـوق الـسـطـر سـتـضـيـف الـكـود الـتـالـي :
مــثــال لاحــظ اســم الآداة بــالأصــفــر واســم الــســطــر بـالاحــمــر نــريــد ان نـضــيــف الــكــود فــوق الـســطــر الأحـمــر :



    <div class='teqsidebartabs'>

    <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });});
    </script>

    <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>

    <li id='teqstab1'><a href='#widget-themater_tabs-1432447472-id1'>شائعة</a></li>

    <li id='teqstab2'><a href='#widget-themater_tabs-1432447472-id2'>تعليقات</a></li>

    <li id='teqstab3'><a href='#widget-themater_tabs-1432447472-id3'>تسميات</a></li>

    </ul>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/>
    </div>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>

    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/>

    </div>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>

    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>

    </div>

    <div style='clear: both;'/>
    </div>

لـو قـالــبـك يــدعـم مــنـطــقـة الـســايـدر بـار بـشــكـل مـضــبـوط ســتـعــمـل مــعـك الآداة دون مـشــاكـل ويــمـكــنـك حــيـنــهـا الــعـودة لــصـفــحـة الــتــخـطــيـط وتـركــيـب الإضــافـات الــتـي تــريـد بــهـا.

يــمـكـنـك طـبـعـا تـعـديـل الــكـلـمـات الــعـربـيـة لـكـن لا تـعـدل الــتـرتـيـب، فـقـط الــكـلـمـات.

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!