我正在尝试做一个画廊排序的事情,将帖子分成多个页面并用jQuery对它们进行分页。有没有人尝试类似的东西,你能帮我设置一些指导方针吗?
像这样的东西和网站上的类似画廊:http://hitfix.com/galleries/most-anticipated-tv-premieres-and-returns-of-2012
我已经设法做了类似的东西,但没有jQuery,我知道当网站每次都要为每个页面重新加载时,用户会感到恼火。
编辑: 我会在此处添加一个后续问题:
我可以使用哪些功能来获取帖子中单个页面的内容? 假设我想将我的帖子分成5页 - 我怎样才能获得第3页的内容?
答案 0 :(得分:0)
您可以使用各种slider
/ slideshow
插件但如果您想自己制作,那么您可以设置导航栏,就像您链接到的网站一样单击数字,您可以对输出所需信息的PHP脚本进行AJAX调用:
HTML -
<ul id="navigation">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
<div id="page"></div>
CSS -
#navigation li {
display : inline-block;
/*Fix display:inline-block in IE7*/
*display : inline;
zoom : 1;
}
的jQuery -
$(function () {
//cache the `#page` element as it will be needed later
var $page = $('#page');
//bind a `click` event handler to all the `<li>` elements that are children of the `#navigation` ul element
$('#navigation').children().on('click', function (event) {
event.preventDefault();
//you could display a loading animation/message here while the new content is being returned from the server
//when making the AJAX call you need to send some data to identify the "page" to output, I used the `id` key and set it's value to the index of the `<li>` element clicked in respect to all the other `<li>`s
$.get('path/to/server-side.php', { id : $(this).index() }, function (serverResponse) {
//now set the `#page` element's HTML to the response from the server
$page.html(serverResponse);
//if you played a loading animation/message you can hide it now
}
});
});
这是一个演示:http://jsfiddle.net/jGujw/(请注意,我无法使用AJAX函数进行测试,因此我将一些服务器响应存储在一个数组中)
也可以通过在AJAX请求中反复抓取同一页面进行分页,并解析serverReponse
以仅将所需元素附加到DOM中。
请注意,.on()
是jQuery 1.7中的新增内容,如果您使用的是旧版本,则.bind()
与{{1}}相同。
答案 1 :(得分:0)
在wordpress世界中,你可以访问所有的wordpress ......但这是你为了获得这种可见性而做的事情。以下是我在主页上使用的代码段,以获取最近的3篇帖子并显示其中的代码段。如果你不在wordpress的范围内,你需要找到一种方法来包含一些wordpress文件。
我相信我提供的内容和一些谷歌搜索可以让你整理出来......如果$myposts
有3个帖子数组作为成员,你可以选择。
<!-- language: php -->
<? $myposts = get_posts('numberposts=3');
foreach($myposts as $post) :
setup_postdata($post); ?>
<h2 id="page_title"><a class="noblock" href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="ccw_light location"><small><?php the_time('l, F jS, Y') ?></small></p>
<br style="line-height:5px">
<div class="content_text" id="noblock">
<?php the_content('... continues','','') ?>
<span class="right"><small>Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong> |</strong>'); ?></small>
</span>
</div>
</div>
<br> <!-- <?php trackback_rdf(); ?> -->
<?php endforeach; ?>