会员登录 | 会员注册 | 意见建议 | 网站地图

站长资源综合门户

当前位置:首页 > 站长学院 > 建站经验 > ajax获得WordPress边栏信息(二)

ajax获得WordPress边栏信息(二)

时间:2012-01-05 18:02:35   作者:   来源:   点击:

上一次的文章可能说的太迷糊了,所以部分朋友提出了一些疑问(我太偷懒了),所以颠末很很长时间的斟酌,终于决定在今天写第二部分。相对前一篇,本篇是威力增强版,增加的内容主要有:1、如何输入两个参数;2、提供完整的代码。欢迎继续不雅看。

上篇链接:ajax获得WordPress边栏信息(一)

jQuery官方给出的ajax的例子不再叙述,相信很多同学由于英语或其他原因,看了也是有点不太明白肿么回事。我这里主要说说在WordPress里怎样通过它来节制侧边栏的异步获得和输出,就像前一篇所说的那样。还有某些朋友好奇的:目前的ink主题侧栏的点击某项目才调取相关内容。关于这个依然需要3个步调:

1、function.php里写入相应的函数

function AjaxLoad(){if( isset($_GET['action'])){ if($_GET['action'] == 'ajax_slidepage' ){ if($_GET['page'] == 'pagenum2'){ echo '<ul>'; get_most_viewed('',8,0 ,0 ,' 次阅读');//这个相信都知道是什么吧……被阅读最多的文章 echo '</ul><p>'; } else{ echo '<ul>'; get_archives('postbypost', 8); echo '</ul><p>'; } die; }}}addaction('init', 'AjaxLoad');

上面这段函数里,主要完成了两件事:获得action和page的值;显示相应的内容。其中前一步调便是本文重点–两个(或多个)参数的输出。如何确定这个参数呢?这就需要下面的步调完成了:

2、js部分:

function ajaxslidepage(b,c) { $.ajax({ url: 'http://127.0.0.1/?action=ajax_slidepage&page='+c, type: 'get', beforeSend: function() { var loading = '载入中'; $(b).empty().html(loading) }, error: function(a) { $(b).empty().html('载入失败') }, success: function(a) { $(b).empty().html(a); } }); return false};

注意这段语句中action=ajax_slidepage&page=’+c这一行,这就是步调1中$_GET['action']和$_GET['page']的具体所指。

接着定义具体的点击行为:

$('#slider4 .pager a.pagenum')(function() { $('#slider4 .pagenum').removeClass('active'); next = $(this).attr('rel'); next = -next*305; $('#slider4 .overview').animate({'left':next});//点击后的滑动效果 $(this).addClass('active'); var id = $(this).attr('id'); //获得点击的该pager的id var show = id == 'pagenum2'?'#page2':'#page3'; //按照id查找下面对应显示的项目 if($(show).find('ul').length == 0){ //判断,使仅载入一次 ajaxslidepage(show,id); //挪用,在id=xx中显示对应内容 } event.preventDefault(); //阻止默认行为(此处为链接点击)});

3、呼,下面是边栏写入的内容:

(注意,这里集成了侧栏的滑动pager效果,具体见ink主题的newcomments…部分)

<li id="slider4"><ul class="pager"><li><a href="#" class="pagenum" rel="0">NewComments</a></li><li><a href="#" class="pagenum" id="pagenum2" rel="1">HotPosts</a></li><li><a href="#" class="pagenum" id="pagenum3" rel="2">NewPosts</a></li></ul><div class="viewport"><ul class="overview" style="width: 1500px; left: 0px; "><li class="page"><ul class="recentcomments">我用的是最近评论,这个推荐 zww年夜叔的体例 http://zww/archives/24818</ul></li><li class="page" id="page2"></li><li class="page" id="page3"></li></ul></div></li>

我目前用的css代码也贴出来吧:

#slider4 { height: 1%; overflow:hidden; display: block; padding: 0 0 16px 0; margin: 0;}

#slider4 .viewport { width: 308px; border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-bottom:4px solid #e3e3e3;background-color:#fff;height: 277px; overflow: hidden; position: relative; }

#slider4 .pager { overflow:hidden;border:1px solid #ddd; height: 1%; list-style: none; clear: both; margin:0; }

#slider4 .pager .micon{background-position: -147px -40px;margin-top:7px}

#slider4 #pagenum2 .micon{background-position:-72px -40px}

#slider4 #pagenum3 .micon{background-position:-48px -40px}

#slider4 .pager li { float: left; }

#slider4 .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; width:60px;line-height:35px;height:35px;text-indent:-9999px; font-weight: bold; display: block; }

#slider4 .active { color: #3E3E3E; background-color: #BBB;width:158px;text-indent:0; }

#slider4 .overview { list-style: none; position: absolute; width: 308px; left: 0;top: 0; }

分享到:

网友评论

热门建站经验