我正在尝试在wordpress插件中为自己添加额外的功能，但我不明白我该怎么做，我对jQuery不太好..
我正在尝试添加工具提示，但我不知道如何，请你们指导我。
我在脚本中添加了以下几行：
wp_enqueue_script( 'jquery_ui_tooltip', CHILD_URL . '/widgets/genesis-tabs/jquery-ui.js', false, '1.9.2' );
和
wp_register_style( 'jquery_ui_styles', CHILD_URL . '/widgets/genesis-tabs/jquery-ui.css' );
wp_enqueue_style( 'jquery_ui_styles' );
这些是插件的代码
<?php
add_action( 'wp_head', 'head_slideshow', 1 );
function head_slideshow() {
// javascript
wp_enqueue_script( 'tabs_script', CHILD_URL . '/widgets/genesis-tabs/tabs.js', array( 'jquery' ), '1.3.2' );
wp_enqueue_script( 'jquery_ui_tooltip', CHILD_URL . '/widgets/genesis-tabs/jquery-ui.js', false, '1.9.2' );
// styles
wp_register_style( 'tabs_styles', CHILD_URL . '/widgets/genesis-tabs/style.css' );
wp_register_style( 'jquery_ui_styles', CHILD_URL . '/widgets/genesis-tabs/jquery-ui.css' );
wp_enqueue_style( 'tabs_styles' );
wp_enqueue_style( 'jquery_ui_styles' );
}
add_action( 'widgets_init', 'TabsWidgetRegister' );
function TabsWidgetRegister() {
register_widget( 'TabsWidget' );
}
class TabsWidget extends WP_Widget {
function TabsWidget() {
$widget_ops = array( 'classname' => 'tabs-widget', 'description' => __('Genesis - Home Featured') );
$control_ops = array( 'width' => 300, 'height' => 250, 'id_base' => 'tabs-widget' );
$this->WP_Widget( 'tabs-widget', __('Genesis - Home Featured'), $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
?>
<!-- .home-left -->
<div class="carousel-slider-preview">
<?php
$args = array (
'post_type' => 'post',
'cat' => $instance['posts_cat'],
'showposts' => $instance['posts_num'],
'orderby' => $instance['orderby'],
'order' => $instance['order']
);
$posts_list = new WP_Query($args);
$i = 1;
if($posts_list->have_posts()) : while($posts_list->have_posts()) : $posts_list->the_post();
?>
<!-- .tab_content -->
<div id="tab<?php echo $i; ?>" class="tab_content">
<!-- .image -->
<div class="image">
<a href="#tab<?php echo $i; ?>"><?php genesis_image("format=html&size=Slider"); ?></a>
</div>
<!-- .text -->
<div>
<?php
if ( !empty( $instance['show_byline'] ) && !empty( $instance['post_info'] ) ) :
printf( '<p class="byline post-info">%s</p>', do_shortcode( esc_html( $instance['post_info'] ) ) );
endif;
if(!empty($instance['show_title'])) :
printf( '<h2><a href="%s" title="%s">%s</a></h2>', get_permalink(), the_title_attribute('echo=0'), the_title_attribute('echo=0') );
endif;
if(!empty($instance['show_content'])) :
if($instance['show_content'] == 'excerpt') :
the_excerpt();
elseif($instance['show_content'] == 'content-limit') :
the_content_limit( (int)$instance['content_limit'], esc_html( $instance['more_text'] ) );
else :
the_content( esc_html( $instance['more_text'] ) );
endif;
endif;
?>
</div>
<!-- end .home_left_content -->
</div>
<!-- end .tab_content -->
<?php
$i += 1;
endwhile;
endif;
?>
</div>
<!-- end .home-left -->
<div class="clear"></div>
<!-- .carousel-slider-thumbs -->
<div class="carousel-slider-thumbs">
<ul class="tabs">
<?php
$i = 1;
if($posts_list->have_posts()) : while($posts_list->have_posts()) : $posts_list->the_post();
?>
<li><a href="#tab<?php echo $i; ?>"><?php genesis_image("format=html&size=Small"); ?></a></li>
<?php
$i += 1;
endwhile;
endif;
?>
</ul>
</div>
<!-- end .carousel-slider-thumbs -->
<div class="clear"></div>
<?php
echo $after_widget;
}
function form( $instance ) {
// ensure value exists
// 'heading' => '', ( Extended by Muzammil Hussain )
$instance = wp_parse_args( (array)$instance, array(
'heading' => 'Featured Area',
'title' => '',
'show_title' => 0,
'posts_cat' => '',
'posts_num' => 0,
'orderby' => '',
'order' => '',
'show_byline' => 0,
'post_info' => '[post_date] ' . __('By', 'genesis') . ' [post_author_posts_link] [post_comments]',
'show_content' => 'excerpt',
'content_limit' => '',
'more_text' => __('[Read More...]', 'genesis')
) );
?>
<p>
<label for="<?php echo $this->get_field_id( 'heading' ); ?>"><?php _e('Title:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id( 'heading' ); ?>" name="<?php echo $this->get_field_name( 'heading' ); ?>" value="<?php echo $instance['heading']; ?>" class="widefat" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'posts_num' ); ?>"><?php _e('Number of Posts to Show:'); ?></label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'posts_num' ); ?>" name="<?php echo $this->get_field_name( 'posts_num' ); ?>" value="<?php echo $instance['posts_num']; ?>" style="width:30px;" />
</p>
<p>
<label for="<?php echo $this->get_field_id('orderby'); ?>"><?php _e('Order By'); ?>:</label>
<select class="widefat" id="<?php echo $this->get_field_id('orderby'); ?>" name="<?php echo $this->get_field_name('orderby'); ?>">
<option style="padding-right:10px;" value="date" <?php selected('date', $instance['orderby']); ?>><?php _e('Date'); ?></option>
<option style="padding-right:10px;" value="title" <?php selected('title', $instance['orderby']); ?>><?php _e('Title'); ?></option>
<option style="padding-right:10px;" value="parent" <?php selected('parent', $instance['orderby']); ?>><?php _e('Parent'); ?></option>
<option style="padding-right:10px;" value="ID" <?php selected('ID', $instance['orderby']); ?>><?php _e('ID'); ?></option>
<option style="padding-right:10px;" value="comment_count" <?php selected('comment_count', $instance['orderby']); ?>><?php _e('Comment Count'); ?></option>
<option style="padding-right:10px;" value="rand" <?php selected('rand', $instance['orderby']); ?>><?php _e('Random'); ?></option>
</select>
</p>
<p>
<label for="<?php echo $this->get_field_id('order'); ?>"><?php _e('Sort Order'); ?>:</label>
<select class="widefat" id="<?php echo $this->get_field_id('order'); ?>" name="<?php echo $this->get_field_name('order'); ?>">
<option style="padding-right:10px;" value="DESC" <?php selected('DESC', $instance['order']); ?>><?php _e('Descending (3, 2, 1)'); ?></option>
<option style="padding-right:10px;" value="ASC" <?php selected('ASC', $instance['order']); ?>><?php _e('Ascending (1, 2, 3)'); ?></option>
</select>
</p>
<p>
<input class="checkbox" id="<?php echo $this->get_field_id('show_title'); ?>" type="checkbox" name="<?php echo $this->get_field_name('show_title'); ?>" value="1" <?php checked(1, $instance['show_title']); ?>/> <label for="<?php echo $this->get_field_id('show_title'); ?>"><?php _e('Show Post Title', 'genesis'); ?></label>
<br>
<input class="checkbox" id="<?php echo $this->get_field_id('show_byline'); ?>" type="checkbox" name="<?php echo $this->get_field_name('show_byline'); ?>" value="1" <?php checked(1, $instance['show_byline']); ?>/> <label for="<?php echo $this->get_field_id('show_byline'); ?>"><?php _e('Show Post Byline'); ?></label>
</p>
<p>
<input type="text" id="<?php echo $this->get_field_id('post_info'); ?>" name="<?php echo $this->get_field_name('post_info'); ?>" value="<?php echo esc_attr($instance['post_info']); ?>" style="width: 99%;" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'posts_cat' ); ?>"><?php _e('Category:'); ?></label>
<?php wp_dropdown_categories(array('name' => $this->get_field_name('posts_cat'), 'selected' => $instance['posts_cat'], 'orderby' => 'Name' , 'hierarchical' => 1, 'show_option_all' => __("All Categories"), 'hide_empty' => '0')); ?>
</p>
<p>
<label for="<?php echo $this->get_field_id('show_content'); ?>"><?php _e('Content Type', 'genesis'); ?>:</label>
<select class="widefat" id="<?php echo $this->get_field_id('show_content'); ?>" name="<?php echo $this->get_field_name('show_content'); ?>">
<option value="content" <?php selected('content' , $instance['show_content'] ); ?>><?php _e('Show Content', 'genesis'); ?></option>
<option value="excerpt" <?php selected('excerpt' , $instance['show_content'] ); ?>><?php _e('Show Excerpt', 'genesis'); ?></option>
<option value="content-limit" <?php selected('content-limit' , $instance['show_content'] ); ?>><?php _e('Show Content Limit', 'genesis'); ?></option>
<option value="" <?php selected('' , $instance['show_content'] ); ?>><?php _e('No Content', 'genesis'); ?></option>
</select>
<br />
<br />
<label for="<?php echo $this->get_field_id('content_limit'); ?>"><?php _e('Limit content to', 'genesis'); ?></label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id('image_alignment'); ?>" name="<?php echo $this->get_field_name('content_limit'); ?>" value="<?php echo esc_attr(intval($instance['content_limit'])); ?>" size="3" /> <?php _e('characters', 'genesis'); ?>
</p>
<p>
<label for="<?php echo $this->get_field_id('more_text'); ?>"><?php _e('More Text (if applicable)', 'genesis'); ?>:</label>
<input class="widefat" type="text" id="<?php echo $this->get_field_id('more_text'); ?>" name="<?php echo $this->get_field_name('more_text'); ?>" value="<?php echo esc_attr($instance['more_text']); ?>" />
</p>
<?php
}
}
?>
及其jQuery文件是：
var $jq=jQuery.noConflict();
$jq(document).ready(function(){
$jq(".tab_content").hide();
$jq("ul.tabs li:first").addClass("active").show();
$jq(".tab_content:first").show();
$jq("ul.tabs li").click(function(){
$jq("ul.tabs li").removeClass("active");
$jq(this).addClass("active");
$jq(".tab_content").hide();
var activeTab = $jq(this).find("a").attr("href");
$jq(activeTab).fadeIn();
return false
})
});
我试图在工具提示中显示每个图像的描述当有人鼠标悬停在标签上的小图片时，
答案 0 :(得分：0)
如果您正在使用jQuery UI工具提示，我认为功能就像将其添加到整个文档一样简单，并且它将使用任何元素的title属性作为提示。在jQuery文件中，在$jq(document).ready(function(){
$jq(document).tooltip();
然后，确保所有图片都有标题属性。
<img src="someimage.jpg" title="Here is a great image">