Skip to content

Z
zui

易企天创 / zui
11 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 92f0517d 编写于 作者: C Catouse
浏览文件
操作

+ added datatable example. 

 * updated example ui.
上级 a6f3b942
显示空白变更内容
内联 并排
Showing with 345 addition and 16 deletion
docs/example/datatable.html 0 → 100644
浏览文件 @ 92f0517d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI，一个简单吸引人的前端框架。">
<meta name="author" content="Zentao">
<title>ZUI - 开源HTML5跨屏框架</title>
<link href="../css/zui.min.css" rel="stylesheet">
<link href="../css/example.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../../assets/html5shiv.js"></script>
<script src="../../assets/respond.js"></script>
<![endif]-->
</head>
<body>
<article>
<h1>Datatable</h1>
<div class="segment">
<div id="dtFromData"></div>
<table class="table table-bordered table-striped" id="datatable">
<thead>
<tr>
<th class='text-center' data-col-class='text-center'>Lorem.</th>
<th class='text-primary'>Saepe?</th>
<th style="color: #999">Necessitatibus.</th>
<th>Minus.</th>
<th class='flex-col' data-width='100'>Veritatis?</th>
<th class='flex-col' data-width='300'>Nulla.</th>
<th class='flex-col' data-width='200'>Hic.</th>
<th>Voluptatem.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Obcaecati.</td>
<td>Corporis.</td>
<td>Ipsam.</td>
<td>Voluptatibus!</td>
<td>Consequatur.</td>
<td>Accusamus!</td>
<td>Obcaecati.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Sit!</td>
<td>Sit.</td>
<td>Iure.</td>
<td>Minima!</td>
<td>Eveniet!</td>
<td>Qui.</td>
<td>Non.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Nam!</td>
<td>Sequi.</td>
<td>Laborum?</td>
<td>Deleniti.</td>
<td>Amet.</td>
<td>Eligendi.</td>
<td>Praesentium!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quibusdam?</td>
<td>Sapiente!</td>
<td>Nihil!</td>
<td>Doloribus.</td>
<td>Aliquid.</td>
<td>Magnam.</td>
<td>Consectetur?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Suscipit.</td>
<td>Nemo.</td>
<td>Quasi.</td>
<td>Cupiditate.</td>
<td>Reprehenderit!</td>
<td>Aspernatur.</td>
<td>Quos.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Vel!</td>
<td>Voluptatibus.</td>
<td>Reprehenderit.</td>
<td>Fugit.</td>
<td>Vero!</td>
<td>Sed.</td>
<td>Molestias.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Vitae.</td>
<td>Blanditiis.</td>
<td>Perspiciatis.</td>
<td>Officiis.</td>
<td>Doloremque.</td>
<td>Molestiae?</td>
<td>Vitae.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Quod.</td>
<td>Nostrum.</td>
<td>Optio.</td>
<td>Minus.</td>
<td>Molestiae!</td>
<td>Animi.</td>
<td>Dolorum?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Reiciendis.</td>
<td>Delectus.</td>
<td>Beatae.</td>
<td>Amet!</td>
<td>Qui!</td>
<td>Rem!</td>
<td>Reprehenderit.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Consequuntur.</td>
<td>Cum.</td>
<td>Fuga?</td>
<td>Tempore.</td>
<td>Fugit.</td>
<td>Nemo.</td>
<td>Dicta!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Illum?</td>
<td>Totam.</td>
<td>Quia!</td>
<td>Fuga!</td>
<td>Nemo.</td>
<td>Nesciunt?</td>
<td>Itaque.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Modi?</td>
<td>Autem.</td>
<td>Dignissimos.</td>
<td>Atque.</td>
<td>Consequatur.</td>
<td>Fugit.</td>
<td>Maxime.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Harum.</td>
<td>At!</td>
<td>Fugiat!</td>
<td>Impedit.</td>
<td>Similique.</td>
<td>Quia?</td>
<td>Incidunt.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Iusto.</td>
<td>Eligendi.</td>
<td>Animi.</td>
<td>Facilis.</td>
<td>Consectetur?</td>
<td>Accusamus!</td>
<td>Et!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Sequi.</td>
<td>Fugiat.</td>
<td>Itaque.</td>
<td>Iure.</td>
<td>Eligendi?</td>
<td>Rem?</td>
<td>Voluptatem.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Voluptates!</td>
<td>Asperiores.</td>
<td>Sit.</td>
<td>Nemo!</td>
<td>Suscipit.</td>
<td>Eligendi!</td>
<td>Maiores.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Illo.</td>
<td>Reiciendis.</td>
<td>Dolorem.</td>
<td>Porro!</td>
<td>Eos.</td>
<td>Itaque.</td>
<td>Aliquam!</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Omnis.</td>
<td>Expedita.</td>
<td>Tempora.</td>
<td>At.</td>
<td>Officiis.</td>
<td>Minus!</td>
<td>Sint?</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Consectetur!</td>
<td>Saepe.</td>
<td>Dolores!</td>
<td>Illum!</td>
<td>Libero!</td>
<td>Atque!</td>
<td>Repudiandae.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Vitae.</td>
<td>Molestiae.</td>
<td>Magni.</td>
<td>Necessitatibus.</td>
<td>Magnam.</td>
<td>Ullam!</td>
<td>Dolor.</td>
</tr>
</tbody>
</table>
</div>
</article>
<script src="../../assets/jquery.js"></script>
<script src="../../dist/js/zui.js"></script>
<script src="../js/example.js"></script>
<script>
$(function()
{
$('#datatable').datatable();
$('#dtFromData').datatable
({
data:
{
cols:
[
{width: 80, text: '#', type: 'number', flex: false, colClass: 'text-center', css: 'color: #444'},
{width: 'auto', text: 'Name', type: 'string', flex: false, cssClass: 'text-primary'},
{width: 100, text: 'Mood', type: 'string', flex: false},
{width: 150, text: 'Date', type: 'date', flex: true, cssClass: 'text-center'},
{width: 250, text: 'Desc', type: 'string', flex: true, cssClass: 'text-center'},
{width: 80, text: 'Pri', type: 'number', flex: true, colClass: 'text-center'},
{width: 'auto', text: 'Status', type: 'string', flex: false, colClass: 'text-center'}
],
rows:
[
{checked: false, data: ['1', 'Catouse', 'happy', '2014-08-07', 'null is good', '1', 'OK']},
{checked: true, data: ['2', 'Shine', 'angry', '2014-08-06', 'god is girl', '2', 'OK']},
{checked: false, data: ['3', 'Minus', 'Veritatis', '2014-08-07', 'Nulla', '1', 'Ipsam']},
{cssClass:'danger', checked: false, data: ['4', 'Consequatur', 'Accusamus', '2014-08-07', 'Obcaecati', '1', 'Qui']},
{checked: false, data: ['5', 'Lorem', 'Quos', '2014-08-07', 'Molestiae', '1', 'Qui']},
{checked: false, data: ['6', 'Suscipit', 'Vitae', '2014-08-07', 'Suscipit', '1', 'AE']},
{checked: false, data: ['7', 'Vel', 'Blanditiis', '2014-08-07', 'Aspernatur', '1', 'Sed']},
{checked: false, data: ['8', 'Vero', 'Officiis', '2014-08-07', 'Quos', '1', 'Vel']}
]
}
});
});
</script>
</body>
</html>
docs/example/partial/navbar.html 0 → 100644
浏览文件 @ 92f0517d
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ZUI</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="alerts.html">alerts</a></li>
<li><a href="article.html">article</a></li>
<li><a href="breadcrumb.html">breadcrumb</a></li>
<li><a href="button-groups.html">button-groups</a></li>
<li><a href="buttons.html">buttons</a></li>
<li><a href="cards.html">cards</a></li>
<li><a href="carousel.html">carousel</a></li>
<li><a href="chosen.html">chosen</a></li>
<li><a href="collapse.html">collapse</a></li>
<li><a href="colorset.html">colorset</a></li>
<li><a href="comment.html">comment</a></li>
<li><a href="dashboard.html">dashboard</a></li>
<li><a href="dropdowns.html">dropdowns</a></li>
<li><a href="forms.html">forms</a></li>
<li><a href="grid.html">grid</a></li>
<li><a href="icons.html">icons</a></li>
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
<li><a href="navbars.html">navbars</a></li>
<li><a href="navs.html">navs</a></li>
<li><a href="pager.html">pager</a></li>
<li><a href="panels.html">panels</a></li>
<li><a href="popovers.html">popovers</a></li>
<li><a href="progress.html">progress</a></li>
<li><a href="tables.html">tables</a></li>
<li><a href="tabs.html">tabs</a></li>
<li><a href="textbox.html">textbox</a></li>
<li><a href="tooltip.html">tooltip</a></li>
<li><a href="type.html">type</a></li>
</ul>
</li>
<li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
</ul>
</div>
</nav>
docs/js/example.js
浏览文件 @ 92f0517d
$(function ()
{
var pathname = window.location.pathname;
var filename = pathname.substring(pathname.lastIndexOf('/')+1);
var name = filename.replace('.html','');
var navLi = $("#navbar li>a[href='"+filename+"']").closest('li');
navLi.addClass('active');
$("#navbarCurrent").text(name);
var next = navLi.next('li');
if(next.length>0)
$.get('partial/navbar.html', function(data)
{
$("#navbarNext").show().find('a').attr('href', next.find('a').attr('href')).html('NEXT: '+next.find('a').text()+'&nbsp;&nbsp;<i class="icon-angle-right icon-large"></i>');
}
$('body').prepend(data);
});
});
docs/views.html
浏览文件 @ 92f0517d
......@@ -34,7 +34,7 @@ base_url: "./"
<h1>视图</h1>
</div>
<section id="datatable">
<section id="datatable" data-version='1.2'>
<div class="page-header">
<h2>数据表格</h2>
</div>
......@@ -43,6 +43,7 @@ base_url: "./"
<li>固定表格头部（或尾部）；</li>
<li>管理行选中和非选中状态；</li>
<li>固定左侧或右侧指定数目的列；</li>
<li>列宽可以拖动；</li>
<li>对数据进行排序；</li>
<li>从Ajax更新数据；</li>
<li>对行进行分组。</li>
......
src/less/zui.less
浏览文件 @ 92f0517d
......@@ -93,6 +93,7 @@
@import "views/cards.reveal.less";
@import "views/dashboard.less";
@import "views/boards.less";
@import "views/datatable.less";
//
// TESTS
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或