JS分页表格插件


JS分页表格插件
JS分页表格插件以及分页表格等js/jquery网页特效代码下载。

1. 引入CSS

<link href="uiduck/css/uiduck.css" type="text/css" rel="stylesheet">
<link href="uiduck/css/table.css" type="text/css" rel="stylesheet">

2. 引入JS

<script language="Javascript" src="uiduck/js/jquery.min.js"></script>
<script language="Javascript" src="uiduck/js/json2.js"></script>
<script language="Javascript" src="uiduck/js/uiduck.js"></script>

3. HTML代码

	<div style="width: 80%;padding: 0 10%;padding-bottom: 200px;">
		<div style="padding-top: 3%;padding-bottom: 2%;">
			<h1 class="" style="font-size:72px;">uiduck </h1>
			<h1 class="">前端表格插件,功能强大,支持前后端分页,模板语法,可接入三方UI库。</h1>
		</div>
		<div style="padding-bottom: 2%;">
			<button class="uiduck-btn-normal" onClick=viewDocument();>使用文档</button>
			<button class="uiduck-btn-normal" onClick=netData();>网络数据</button>
			<button class="uiduck-btn-normal" onClick=localData();>本地数据</button>
			<button class="uiduck-btn-normal" onClick=changeTheme();>随机切换主题</button>
			<button class=" uiduck-btn-normal" onClick=changeLoading();>随机切换加载动画</button>
			<button class="uiduck-btn-normal" onClick=changeShade();>遮罩层</button>
			<button class="uiduck-btn-normal" onClick=changeBlur();>背景模糊</button>
			<button class="uiduck-btn-normal" onClick=simplePage();>简洁分页</button>
			<button class="uiduck-btn-normal" onClick=fullPage();>完整分页</button>
			<button class="uiduck-btn-normal" onClick=highlight();>关键词高亮</button>
			<button class="uiduck-btn-normal" onClick=changeLanguage();>多语言随机切换</button>
			<button class="uiduck-btn-normal" onClick=autoNext();>自动翻页</button>
			<button class="uiduck-btn-normal" onClick=newVersion();>获取最新版本</button>
		</div>
		<!--以下为两个必须div元素-->
		<script type="text/html" id="barDemo">
			<button class="uiduck-btn" onClick=getRow(this);>获取此行数据</button>
		</script>
		<div id="ud-top" style="display: none;">
			<h3>当前设置为微信字段,通过ud-keyWord属性指定相关列的key</h3>
			<input id="search" ud-keyWord="wechat" class="uiduck-input" /><button class="uiduck-btn"
				onClick=setData();>搜索</button>
		</div>
		<div id="table"></div>
	</div>

相关推荐

发表评论

相关文章