Существуют всевозможные плагины slider
/ slideshow
, которые вы можете использовать для этого, но если вы хотите сделать это самостоятельно, вы можете настроить панель навигации, например, сайт, на который вы ссылались, и при нажатии на одно из чисел. Вы можете сделать AJAX-вызов PHP-скрипта, который выводит нужную информацию:
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()
, если вы используете более старую версию.