How to use jquery ui slider to create a pagination effect and load the content in a <DIV>?
- by jsust
I want to create a pagination script using jquery UI's slider widget. So far I have got the slider working but I dont know how to send request to the server to fetch new content.
So far I have a working slider
<!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>
Thanks in Advance
