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

翻页文件一次加载了全部的内容，因而不是很适合大型的网站，而适用于数据比较少的情况。本例未使用数据库

服务器端编程语言（Professional Hypertext Preprocessor的缩写）代码复制代码代码如下： div class=' container ' ul id=' content '？PHP for($ I=1；$ i=53$i ){？里斯潘？php echo $i？/span/li？php }？/ul div class=' holder '/div/div JAVAScript代码脚本类型='text/javascript' $(文档)。ready(function() { $('div.holder ')).jPages({ containerID : ' content '，perp age : 6 })；});/脚本[/代码] CSS代码复制代码代码如下：车身{文本-对齐：左侧；方向ltrfont-family:tahoma，verdana，arial，sans-serif；font-size : 11px} .容器{宽度： 370像素高度： 100%;margin : 0 auto }/* @ @ Demo */ul { margin : 0；padd : 20px 0px } ul Li { list-style-type : none；显示器：内联块；线高： 100像素；文本对齐：中心；字体粗细：粗体；宽度： 100像素；高度： 100像素；余量： 10px背景# CCC } ul Li span { color : # fffpadding : 3px }/* @ @分页*/。支架{ margin : 5px 0；} .holder a { font-size : 12px光标：指针；margin: 0 5pxcolor: # 333}。持有人a :悬停{背景色： # 222；color: # fff}。持有人a . jp-上一份{页边空白-右： 15px} .持有人a . jp-next {左边距： 15px} .holder a.jp-current，a . jp-current :悬停{ color : # ed4e 2a字体粗细：粗体；} .holder a.jp-disabled，a . jp-disabled :悬停{ color : # BBB} .持有人a.jp-current，a.jp-current:hover，holder a.jp-disabled，a . jp-disabled :悬停{光标：默认；背景：无；} .支架跨度{ margin: 0 5px}本例还使用了一个js jquery.pages.js请到演示页面查看源码