当前位置:  编程技术>jquery

div li多行多列的无刷新分页代码

    来源: 互联网  发布时间:2014-09-03

    本文导语:  本文主要内容: div li多行多列的无刷新分页 注意: 1,翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用于数据比较少的情况。 2,只为演示,未使用数据库。   1,html与php代码部分   代码示例: ...

本文主要内容:
div li多行多列的无刷新分页

注意:
1,翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用于数据比较少的情况。
2,只为演示,未使用数据库。
 
1,html与php代码部分
 

代码示例:







2,js代码部分
 

代码示例:

$(document).ready(function() {
$("div.holder").jPages({
containerID : "content",
perPage: 6
});
});

3,css部分
 

代码示例:
body {
text-align: left;
direction: ltr;
font-family:tahoma,verdana,arial,sans-serif;
font-size: 11px;
}
.container {
width: 370px;
height: 100%;
margin: 0 auto;
}
/*
@@ Demo
*/
ul {
margin: 0;
padding: 20px 0px;
}
ul li {
list-style-type: none;
display: inline-block;
line-height: 100px;
text-align: center;
font-weight: bold;
width: 100px;
height: 100px;
margin: 10px;
background: #ccc;
}
ul li span {
color: #fff;
padding: 3px;
}
/*
@@ Pagination
*/
.holder { margin: 5px 0; }
.holder a {
font-size: 12px;
cursor: pointer;
margin: 0 5px;
color: #333;
}
.holder a:hover {
background-color: #222;
color: #fff;
}
.holder a.jp-previous { margin-right: 15px; }
.holder a.jp-next { margin-left: 15px; }
.holder a.jp-current, a.jp-current:hover {
color: #ed4e2a;
font-weight: bold;
}
.holder a.jp-disabled, a.jp-disabled:hover { color: #bbb; }
.holder a.jp-current, a.jp-current:hover,
.holder a.jp-disabled, a.jp-disabled:hover {
cursor: default;
background: none;
}
.holder span { margin: 0 5px; }

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 难!!!在jsp文件的java代码片段中控制该网页上DIV的属性以达到隐藏或显示某div的目的???
  • jquery 页面滚动到指定DIV的代码
  • Jquery在指定DIV加载HTML示例代码
  • asp去掉html,保留img br p div的正则实现代码
  • beyond_xiruo(希偌):请问我要删除某个DIV,那在<%.....%>之间的代码该怎么写???多谢!
  • div层跨越iframe帧显示在上面的解决方法附代码
  • jQuery使任意div随意隐藏的代码举例
  • Jquery判断div是否为空以实现显示或隐藏的代码
  • jquery让返回的内容显示在特定div里(代码少而精悍)
  • Jquery全屏遮罩层DIV的实现代码
  • div+css模拟表格效果代码
  • DIV+CSS网页另类上下布局的实例代码
  • jquery下div 的resize事件示例代码
  • 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
  • jquery div拖动效果示例代码
  • jquery div拖拽宽度的代码分享
  • DIV+CSS实现的滑动门菜单特效代码
  • jquery+div+css二级菜单的实现代码
  • div布局的自由伸展三栏式版面的代码
  • 脚本控制三行三列自适应高度DIV布局的代码
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • 如何动态修改层(<div ....> </div>)的显示与否?
  • java命名空间javax.swing.text.html类html.tag的类成员方法: div定义及介绍
  • 父div高度不能自适应子div高度的解决方案
  • java命名空间javax.management类query的类成员方法: div定义及介绍
  • jQuery拖动div、移动div与弹出层实例
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k1div2luminance定义及介绍
  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k2div2chrominance定义及介绍
  • jQuery拖动div、移动div、弹出层实现原理及示例
  • 在div中使用css让文字底部对齐的方法


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3