Как использовать слайдер jquery ui для создания эффекта пагинации и загрузки контента в <DIV>? - PullRequest
Новая
       9

Как использовать слайдер jquery ui для создания эффекта пагинации и загрузки контента в <DIV>?

3 голосов
/ 14 июня 2010

Я хочу создать скрипт разбиения на страницы, используя виджет слайдера в пользовательском интерфейсе jquery. Пока у меня работает слайдер, но я не знаю, как отправить запрос на сервер для получения нового контента.

Пока это мой HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Slider - Range slider</title>
    <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="jquery.ui.slider.js"></script>      
    <style type="text/css">
        body { padding:5em; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#slider-range").slider({
            min: 1,
            max: 14,
            values: [1],
            slide: function(event, ui) {
                $(".values").html(ui.values[0];);
            }
        });
    });
    </script>
</head>
<body>
<div class="values" style="padding:2em;"></div>
<div id="slider-range"></div>

<div class="info" style="margin-top:2em; background:#CCC;padding:2em;">
Here is where the content will be displayed.
</div>

</body>

Заранее спасибо

1 Ответ

1 голос
/ 14 июня 2010

Ну, вы можете отправить запрос на событие слайдера вашего слайдера, чтобы отправить запрос на сервер, поместив извлеченные данные в div 

  $("#slider-range").slider({
   min: 1,
   max: 14,
   values: [1],
   slide: function(event, ui) {
    var newPage = ui.values[0];
    $(".info").load("content.php", { page: newPage });
                                //load the content into a division
   }
  });

ОБНОВЛЕНО образецof content.php 

<?
     $recordsperpage = 15;
     if(!isset($_POST['page'] or empty($_POST['page']) { $page =1 ; }
     else { $page = $_POST['page']; }

     $limit = $page * $recordsperpage.",".$recordsperpage;
     $query = "SELECT * FROM yourtable LIMIT ".$limit;
     $result = mysql_query($query) or die(mysql_error());
     while($row = mysql_fetch_array($result)) {
          //Display the records in your pattern
     }
?>
?>
...