伟景博客 » jquery http://pengfubing.com 专注于膜技术，水处理，节能减排，循环经济，Wordpress，留学生活等 Mon, 12 Jul 2010 23:21:43 +0000 en hourly 1 http://wordpress.org/?v=3.0 用 jQuery 实现灵活的 tab 切换效果zz http://pengfubing.com/content/wordpress/jquery-tab-zz.html http://pengfubing.com/content/wordpress/jquery-tab-zz.html#comments Fri, 08 Jan 2010 06:56:57 +0000 Welkin http://pengfubing.com/?p=458 原文链接：http://www.xiaorsz.com/jquery-realize-tab-switch-effect/

Tab 切换效果现在网上到处都是，特别是一些大型的门户，为了在有限的空间内呈现更多的内容，往往都采取了这种方式。腾讯的迷你首页就非常的典型。我以前用的 wordpresss 皮肤 iNove 中，其实也有这样的效果，就在 Trackbacks 和 Comments 的切换处，就是一个简单的应用。

寒假期间也给自己的博客搞了个，是用的 jQuery 实现的，实现的代码是从网上收集来的，自己感觉是非常不错的代码，非常简单，但不失灵活，而且很好的做到了表现和行为的分离。现在就跟大家分享一下，建议已经引入 jQuery 框架的同志们使用，如果因为这么几行代码而专门引入 jQuery ，感觉有点太夸张了，其实这样的 JS 代码网上多的是，随便 google 一下就 N 多了！！

效果预览

tab 效果

实例见文章的结尾处相关文章的部分。

实现思路

大家看源代码就应该能看到了，我这里三部分内容其实在页面加载的时候都加载了，只是只显示了一块，另外的两块隐藏。然后用 JS 和 CSS 来对鼠标动作进行响应，来达到所想来的效果。这个是 tab 切换效果的基本思路。当然同一些大型门户不同，他们的 tab 都实现了异步传输，即在页面加载的时候并不会加载，而是在需要的时候才从服务器进行传输并显示，这样在技术上显然会比较复杂，对于小网站来说，的确没多少 必要！！

具体代码

这里只展示下我用到的代码并进行一些解释，大家可根据实现情况进行修改。

首先看 HTML

<div class=”tab”>
<p>
<span id=”tab1″>tab1</span>
<span id=”tab2″>tab2</span>
<span id=”tab3″>tab3</span></p>
<ul class=”tab1″>以 LI 形式呈现的 tab1 的内容</ul>
<ul class=”tab2″>以 LI 形式呈现的 tab2 的内容</ul>
<ul class=”tab3″>以 LI 形式呈现的 tab3 的内容</ul>
</div>

看下其实挺简单，一个 P 里三个 span ，然后对应三个 ul 列表，只需要对应的 span 的 ID 和 ul 的 class 一致就可以了。至于 ul 中的内容，就因人而异了！！

我这里是用了两个插件：WordPress Related Posts 和 WP-PostViews Plus 来调用相关文章和热门文章的。于是，我是代码是这样的：

<div class=”entry-foot”>
<p>
<span id=”related_post”>相关文章</span>
<span id=”mhot”>本月热门</span>
<span id=”allhot”>点击排行</span></p>
<?php wp23_related_posts();?>
<ul class=”mhot”><?php get_timespan_most_viewed(‘post’, 5, 30, true, true, 0)?></ul>
<ul class=”allhot”><?php get_most_viewed(‘post’, 5, 30, true, true, 0)?></ul>
</div>

CSS代码

.entry-foot{background-color:#FAFAFA;margin:5px 8px;padding:5px 10px;}
.entry-foot p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:6px;padding:2px 5px;}
.entry-foot p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.entry-foot p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.entry-foot li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.entry-foot .mhot,.entry-foot.allhot{display:none;}

样式大家可以自己去设置，其中 .current 的样式就是鼠标移主去时 span 的样式了！

jQuery 代码

$(document).ready(function(){
$(“.entry-foot span:first”).addClass(“current”);  //为第一个span添加 .current 的样式，默认选中
$(“.entry-foot ul:not(:first)”).hide();  //ul 不是第一个时隐藏
$(“.entry-foot span”).mouseover(function(){  //鼠标移到 span 上时触发函数
$(“.entry-foot span”).removeClass(“current”);  //为第一个 span 移除 .current 样式
$(this).addClass(“current”);  //为触发的 span 添加样式
$(“.entry-foot ul”).hide();  //隐藏 ul
$(“.”+$(this).attr(“id”)).fadeIn(“slow”);  //这句是核心，class(.) 和触发 span 的ID 一致的 fadeIn(渐显)
});});

完了，怎么样，应该挺容易理解的吧！本文只是提供一个思路或是方法，具体的代码大家可以根据自己的实际情况来写。有问题请留言，我会尽量答复。

相关文章

]]> http://pengfubing.com/content/wordpress/jquery-tab-zz.html/feed 6 jQuery实现Tab切换效果 http://pengfubing.com/content/wordpress/jquery-tab.html http://pengfubing.com/content/wordpress/jquery-tab.html#comments Fri, 08 Jan 2010 06:54:57 +0000 Welkin http://pengfubing.com/?p=454

原文链接：http://immmmm.com/add-jquery-tab-switch-effect.html

啥是“Tab 切换效果”，这都不知道那肯定落伍了！其实实现这个有很多方法，随手一搜就是一大把。不过，既然已经加载了jQuery，那就物尽其用，参考了这篇文章《用 jQuery 实现灵活的 tab 切换效果》。

老规矩，三块代码放了先：

<div id="sidebar-tab">
	<div id="tab-title">
		<h3><span id="tab-1" class="current">最新评论</span><span id="tab-2">近期热评</span><span id="tab-3">随机文章</span></h3>
	</div> /* Tab的标题，采用span标签，分别加上了id，并给第一个加上class="current" */
	<div id="tab-content">
		<ul class="tab-1"><?php wkc_recent_comments('number=10&length=25'); ?></ul>
		<ul class="tab-2"><?php wkc_most_commented_posts('number=10&days=300'); ?></ul>
		<ul class="tab-3"><?php wkc_random_posts('number=10&length=40'); ?></ul>
	</div> /* Tab的内容，分别加上了与标题对应的class；其中tab-content ul内的函数是调用WP Kit cn插件的 */
</div>
#sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;}
#tab-title .current{color:#356aa0;border-bottom:0px;padding:5px 14px;} /* 当前选中标题时的样式 */
#tab-title h3{color:#666;font-size:15px;font-weight:400;}
#tab-1,#tab-2,#tab-3{padding:5px 7px;border-bottom:1px solid #ccf;cursor:pointer;}
#tab-2{border:1px solid #ccf;border-top:none;}
.tab-2,.tab-3{display:none;} /* 这句是用让class=“tab-2”“tab-3”的先隐藏，用CSS控制的好处是没有延迟；如果用jQuery控制会出现只有当页面全部加载完后，tab-2tab-3中的内容才隐藏 */
#tab-content ul{padding:5px 10px;overflow:hidden;}
#tab-content ul li{padding-top:5px;height:20px;}
$('#tab-title span').mouseover(function(){ //鼠标移至id="tab-title"下的span标签时，触发
	$(this).addClass("current").siblings().removeClass(); //给当前的添加class="current"，并且让其同辈元素（即其余#tab-title span）移除class="current"；
	$("."+$(this).attr("id")).show().siblings().hide(); //让class="鼠标移至的span的id"（即tab-content中对应ul中的内容）显示，并且让其同辈元素（即#tab-content ul）隐藏；
});

OK，代码就这些，使用前提是加载了jQuery。这次折腾是html、css、jQuery代码三管齐下，才做出来这么一个东东，效果还行！

相关文章

]]> http://pengfubing.com/content/wordpress/jquery-tab.html/feed 1 用WordPress内置jQuery制作Tabs滑动效果 http://pengfubing.com/content/wordpress/wordpress-jquery-tabs.html http://pengfubing.com/content/wordpress/wordpress-jquery-tabs.html#comments Fri, 08 Jan 2010 06:37:30 +0000 Welkin http://pengfubing.com/?p=450 原文链接：http://wanwp.com/tips-tricks/howto-use-builtin-jquery-make-a-tabs-effect/

Tabs滑动效果是冰古比较喜欢用在WordPress插件设置页上的一个流行元素。因为它可以有效地压缩页面的长度，避免用户拉动才能看到内容；还有就是这个效果很coooool，你不觉得吗？

jQuery可以很方便地制作出流行的Tabs滑动效果，于是我们也就可以利用WordPress内置的jQuery快捷地在你的插件或主题中加入Tabs滑动效果。以下就看看如何在插件的设置页中加入该效果吧。

首先是准备设置页的HTML

    function test_setting_page() {
        echo <<<TABS
<div id="wrapper">
    <ul>
        <li><a href="#setting"><span>设置</span></a></li>
        <li><a href="#uninstall"><span>卸载</span></a></li>
    </ul>
    <div id="setting">
        <p>这里就是设置内容</p>
    </div>
    <div id="uninstall">
        <p>这里是卸载内容</p>
    </div>
</div>
TABS;
    }

这里用一个id为wrapper的div包裹设置页中要用到的HTML代码。跟着是ul列表，列表中的li就是Tabs滑动效果中的Tab。li中 的#setting和#uninstall对应下面id为setting和uninstall的div，也就是说点击#uninstall对应的Tab就 出现id为uninstall的div里的内容。需要更多的tab，按照这样的格式添加就可以了。
现在的效果：
用WordPress内置jQuery制作Tabs滑动效果

接下来，我们为它添加必须的jQuery

    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');

    add_action('admin_footer', 'test_setting_js');
    function test_setting_js() {
        echo <<<JS
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#wrapper").tabs();
});
</script>
JS;
    }

三个wp_enqueue_script载入Tabs效果中要用到的jQuery库，跟着在后台的底部加上一小段jQuery调用代码（注：这里不能使用$，而用jQuery代替），其中的#wrapper就是上面HTML中的div。
现在的效果：
用WordPress内置jQuery制作Tabs滑动效果

最后用CSS美化一下Tabs

    add_action('admin_head', 'test_setting_css');
    function test_setting_css() {
        echo '<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />';
    }

CSS都应该添加到head标签里，所以是将CSS添加到后台头部的。虽然WordPress内置了jQuery库，但却没有内置美化用的CSS，所以要自己添加CSS，当然jquery官方提供了很多美化CSS，你选择一个就可以了，不过最好还是将该CSS保存为本地文件，而不是像这里用外链调用。
最后效果：
用WordPress内置jQuery制作Tabs滑动效果

上面例子的完整代码

参考：UI/API/1.7.1/Tabs

相关文章

]]> http://pengfubing.com/content/wordpress/wordpress-jquery-tabs.html/feed 0