ساخت تب بار جی کوئری در وردپرس

<?php /* Plugin Name: wprahnama jQuery Tabber Widget Plugin URI: http://www.wprahnama.com Description: A simple jquery tabber widget. Version: 1.0 Author: wprahnama Author URI: http://www.wprahnama.com License: GPL2 */ // creating a widget class wprTabberWidget extends WP_Widget { function wprTabberWidget() { $widget_ops = array( 'classname' => 'wprTabberWidget', 'description' => 'Simple jQuery Tabber Widget' ); $this->WP_Widget( 'wprTabberWidget', 'wprahnama Tabber Widget', $widget_ops ); } function widget($args, $instance) { // widget sidebar output function wpr_tabber() { // Now we enqueue our stylesheet and jQuery script wp_register_style('wpr-tabber-style', plugins_url('wpr-tabber-style.css', __FILE__)); wp_register_script('wpr-tabber-widget-js', plugins_url('wpr-tabber.js', __FILE__), array('jquery')); wp_enqueue_style('wpr-tabber-style'); wp_enqueue_script('wpr-tabber-widget-js'); // Creating tabs you will be adding you own code inside each tab ?> <ul class="tabs"> <li class="active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <?php // Enter code for tab 1 here. ?> </div> <div id="tab2" class="tab_content" style="display:none;"> <?php // Enter code for tab 2 here. ?> </div> <div id="tab3" class="tab_content" style="display:none;"> <?php // Enter code for tab 3 here. ?> </div> </div> <div class="tab-clear"></div> <?php } extract($args, EXTR_SKIP); // pre-widget code from theme echo $before_widget; $tabs = wpr_tabber(); // output tabs HTML echo $tabs; // post-widget code from theme echo $after_widget; } } // registering and loading widget add_action( 'widgets_init', create_function('','retu register_widget("wprTabberWidget");') ); ?>

(function($) { $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); //$(activeTab).fadeIn(); if ($.browser.msie) {$(activeTab).show();} else {$(activeTab).fadeIn();} retu false; }); })(jQuery);

ul.tabs { position: relative; z-index: 1000; float: left; border-left: 1px solid #C3D4EA; } ul.tabs li { position: relative; overflow: hidden; height: 26px; float: left; margin: 0; padding: 0; line-height: 26px; background-color: #99B2B7; border: 1px solid #C3D4EA; border-left: none; } ul.tabs li a{ display: block; padding: 0 10px; outline: none; text-decoration: none; } html ul.tabs li.active, html ul.tabs li.active a:hover { background-color: #D5DED9; border-bottom: 1px solid #D5DED9; } .widget-area .widget .tabs a { color: #FFFFFF; } .tab_container { position: relative; top: -1px; z-index: 999; width: 100%; float: left; font-size: 11px; background-color: #D5DED9; border: 1px solid #C3D4EA; } .tab_content { padding: 7px 11px 11px 11px; line-height: 1.5; } .tab_content ul { margin: 0; padding: 0; list-style: none; } .tab_content li { margin: 3px 0; } .tab-clear { clear:both; }