vk | vk | membuat auto update fb lewat developer fb | how to combine images in gimp | debian ubuntu suse
 


 

jui_pagination (v2.0.0)


Share:

Theme switch using jui_theme_switch.

Click on Preferences link (right side of navigation panel) to display or hide additional elements.

Nav pages Mode
Slider position
Test some Options
visiblePageLinks:
currentPage:
totalPages:

HTML (head section)

	<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
	<link rel="stylesheet" type="text/css" href="http://pontikis.github.com/jui_pagination/v2.0.0/jquery.jui_pagination.css"/>
	<!-- custom classes -->
	<link rel="stylesheet" href="index.css">

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
	<!-- if touch event support is needed (mobile devices) -->
	<script type="text/javascript" src="http://pontikis.github.com/lib/jquery.ui.touch-punch/v0.2.2/jquery.ui.touch-punch.min.js"></script>

	<script type="text/javascript" src="http://pontikis.github.com/jui_pagination/v2.0.0/jquery.jui_pagination.min.js"></script>
	<script type="text/javascript" src="http://pontikis.github.com/jui_pagination/v2.0.0/i18n/en.js"></script>
    

HTML (body)

	<div id="demo_pag1"></div>

	<p id="result"></p>
    

JS code

	$(function() {

		$("#demo_pag1").jui_pagination({
			currentPage: 8,
			visiblePageLinks: 5,
			totalPages: 103,
			containerClass: 'container1',

			useSlider: true,
			sliderInsidePane: true,
			sliderClass: 'slider1',

			disableSelectionNavPane: true,

			navRowsPerPageClass: 'rows-per-page1  ui-state-default ui-corner-all',
			navGoToPageClass: 'goto-page1 ui-state-default ui-corner-all',

			onChangePage: function(event, page_num) {
				if(isNaN(page_num) || page_num <= 0) {
					alert('Invalid page' + ' (' + page_num + ')');
				} else {
					$("#result").html('Page changed to: ' + page_num);
				}
			},
			onSetRowsPerPage: function(event, rpp) {
				if(isNaN(rpp) || rpp <= 0) {
					alert('Invalid rows per page' + ' (' + rpp + ')');
				} else {
					alert('rows per page successfully changed' + ' (' + rpp + ')');
					$(this).jui_pagination({
						rowsPerPage: rpp
					})
				}
			},
			onDisplay: function() {
				var showRowsInfo = $(this).jui_pagination('getOption', 'showRowsInfo');
				if(showRowsInfo) {
					var prefix = $(this).jui_pagination('getOption', 'nav_rows_info_id_prefix');
					$("#" + prefix + $(this).attr("id")).text('Total rows: XXX');
				}
			}
		});

		$("#result").html('Current page is: ' + $("#demo_pag1").jui_pagination('getOption', 'currentPage'));

	});
    

CSS

	/* demo pag1 ---------------------------------------------------------------- */
	.container1 {
		width: 700px;
		padding: 10px;
		line-height: 1;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.slider1 {
		width: 400px;
		margin: 10px auto;
	}

	.rows-per-page1 {
		display: inline-block !important;
		background: url("images/page.png") no-repeat left center !important;
		padding: 0px 0px 0px 20px !important;
		margin: 3px 10px 3px 10px !important;
		width: 30px;
		vertical-align: middle;
		height: 18px !important;
	}

	.goto-page1 {
		display: inline-block !important;
		background: url("images/bullet_go.png") no-repeat left center !important;
		padding: 0px 0px 0px 20px !important;
		margin: 3px 10px 3px 10px !important;
		width: 30px;
		vertical-align: middle;
		height: 18px !important;
	}
    

Click on Preferences link (right side of navigation panel) to display or hide additional elements.

Nav pages Mode
Slider position

HTML (head section)

	<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
	<link rel="stylesheet" type="text/css" href="http://pontikis.github.com/jui_pagination/v2.0.0/jquery.jui_pagination.css"/>
	<!-- custom classes -->
	<link rel="stylesheet" href="index.css">

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
	<!-- if touch event support is needed (mobile devices) -->
	<script type="text/javascript" src="http://pontikis.github.com/lib/jquery.ui.touch-punch/v0.2.2/jquery.ui.touch-punch.min.js"></script>

	<script type="text/javascript" src="http://pontikis.github.com/jui_pagination/v2.0.0/jquery.jui_pagination.min.js"></script>
	<script type="text/javascript" src="http://pontikis.github.com/jui_pagination/v2.0.0/i18n/en.js"></script>
    

HTML (body)

	<div id="demo_pag2"></div>

	<p id="result2"></p>
    

JS code

	$(function() {

		$("#demo_pag2").jui_pagination({
			currentPage: 7,
			visiblePageLinks: 6,
			totalPages: 24,
			containerClass: 'container2',

			navItemHoverClass: '',

			useSlider: true,
			sliderElementID: 'slider2',
			sliderClass: 'slider2_user_defined',
			sliderOrientation: 'vertical',
			sliderInsidePane: false,

			disableSelectionNavPane: true,

			navRowsPerPageClass: 'rows-per-page1  ui-state-default ui-corner-all',
			navGoToPageClass: 'goto-page1 ui-state-default ui-corner-all',

			onChangePage: function(event, page_num) {
				$("#result2").html('Page changed to: ' + page_num);
			}

		});

		$("#result2").html('Current page is: ' + $("#demo_pag2").jui_pagination('getOption', 'currentPage'));

	});
    

CSS

	/* demo pag2 ---------------------------------------------------------------- */
	.wrap2 {
		overflow: auto;
		width: 850px;
		margin-top: 20px;
	}

	.container2 {
		width: 780px;
		padding: 10px;
		line-height: 1;
	}

	.navpane2 {
		width: 790px;
		margin-top: 10px;
		margin-left: 5px;
		margin-bottom: 10px;
	}

	.list2 {
		width: 800px;
		height: 200px;
		float: left;
	}

	.slider2_inside {
		display: inline-block;
		width: 20%;
		margin: auto 10px;
		vertical-align: middle;
	}

	.slider2_outside {
		width: 85%;
		margin: 10px auto;
	}

	.slider2_user_defined {
		height: 170px;
		float: left;
		margin-left: 10px;
		margin-top: 15px;
		margin-bottom: 10px;
	}