jQuery动态生成分页列表代码.zip资源-CSDN文库

共7个文件

js：3个

css：3个

html：1个

版权申诉

jquery

jquery插件

jquery特效

31 浏览量 2023-09-26 01:44:59 上传评论收藏 44KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery动态生成分页列表代码.zip （7个子文件）

template.js 20KB

cPager.js 8KB

jquery-1.11.0.min.js 94KB

css

demo.css 500B

normalize.css 2KB

cPager.css 1KB

index.html 3KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery动态生成分页列表代码</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css">  <link rel="stylesheet" type="text/css" href="css/cPager.css"> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; } .container{ width: 800px; max-width: 100%; margin: 30px auto; } ul li.li-item{ list-style: none; line-height: 35px; border-bottom: 1px solid #eee; font-family: 微软雅黑; animation: fadeIn 1s 1 0s; -webkit-animation:fadeIn 1s 1 0s; -moz-animation:fadeIn 1s 1 0s; -ms-animation:fadeIn 1s 1 0s; -o-animation:fadeIn 1s 1 0s; } /**淡入淡出过渡效果**/ @keyframes fadeIn { 0% { opacity: 0; /*初始状态透明度为0*/ } 50% { opacity: 0.5; /*中间状态透明度为0.5*/ } 100% { opacity: 1; /*结尾状态透明度为1*/ } } @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态透明度为0*/ } 50% { opacity: 0.5; /*中间状态透明度为0.5*/ } 100% { opacity: 1; /*结尾状态透明度为1*/ } } @-moz-keyframes fadeIn { 0% { opacity: 0; /*初始状态透明度为0*/ } 50% { opacity: 0.5; /*中间状态透明度为0.5*/ } 100% { opacity: 1; /*结尾状态透明度为1*/ } } @-ms-keyframes fadeIn { 0% { opacity: 0; /*初始状态透明度为0*/ } 50% { opacity: 0.5; /*中间状态透明度为0.5*/ } 100% { opacity: 1; /*结尾状态透明度为1*/ } } @-o-keyframes fadeIn { 0% { opacity: 0; /*初始状态透明度为0*/ } 50% { opacity: 0.5; /*中间状态透明度为0.5*/ } 100% { opacity: 1; /*结尾状态透明度为1*/ } } .li-item { margin: auto 20px; } </style> </head> <body><script src="/demos/googlegg.js"></script> <div class="container">  <ul id="listShow"></ul>  <div class="turn-page" id="pager"></div>  <textarea id="listTemplate" style="display: none;"> {for item in data} <li class="li-item hide">${item.name}</li> {/for} </textarea> </div> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>  <script type="text/javascript" src="js/template.js"></script>  <script type="text/javascript" src="js/cPager.js"></script> <script type="text/javascript"> $(document).ready(function() { var json = { data: [] }; for (var i = 1; i <= 350; i++) { json.data.push({ name: "姓名--000" + i }); } //渲染模板 $("#listShow").html(TrimPath.processDOMTemplate("listTemplate", json)); //调用客户端分页 $(this).cPager({ pageSize: 8, //每一页显示的记录条数 pageid: "pager", //分页容器ID itemClass: "li-item" //个体元素名称 }); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><br><br> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.lanrenzhijia.com" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉