| 标题 | 如何利用ajax获取WordPress边栏信息 |
| 内容 | 上一次的文章可能说的太含糊了，所以部分朋友提出了一些疑问（我太偷懒了），所以经过很很长时间的考虑，终于决定在今天写第二部分。相对于前一篇，本篇是威力加强版，增加的内容主要有：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').click(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> <li><a href="#" rel="0">NewComments</a></li> <li><a href="#" id="pagenum2" rel="1">HotPosts</a></li> <li><a href="#" id="pagenum3" rel="2">NewPosts</a></li> </ul> <div> <ul> <li> <ul> 我用的是最近评论，这个推荐 zww大叔的方法 http://zww.me/archives/24818 </ul> </li> <li id="page2"></li> <li 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; } #slider4 .overview .page{ float： left; height： 265px; width： 310px;line-height:23px} #page2，#page3{padding-top:7px} #slider4 .page ul li{padding:4px 6px 4px 12px;color：#9a9a9a;list-style:circle inside;} 其实主要的就是步骤1和2，这里用到的主要是ajax的get方法，当然还有post方法，这个还没搞清楚区别，留待以后分析。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。