ZUI1.6例子模板

ZUI例子模板,Fork来编写你的代码。

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/css/zui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/lib/calendar/zui.calendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/js/zui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/lib/calendar/zui.calendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/lib/chosen/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/lib/chosen/chosen.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/lib/datatable/zui.datatable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/lib/datatable/zui.datatable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/lib/sortable/zui.sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.6.0/lib/draggable/zui.draggable.min.js"></script>
<div class="container">
  <article class="article">
    <header>
      <h1>Hello ZUI!</h1>
      <section class="abstract">
        <p>这是一个干净的环境供你测试 ZUI 相关的代码,已引入 ZUI1.6 标准版资源。</p>
      </section>
    </header>
    <div class="article-content">
      <h2>简单五部:</h2>
      <ol id="sortableText">
        <li>Fork这个例子;<i class="icon icon-arrows"></i></li>
        <li>删除例子中的代码;<i class="icon icon-arrows"></i></li>
        <li>写你自己的代码;<i class="icon icon-arrows"></i></li>
        <li>保存( <i class="icon icon-pencil"></i> Update)并分享给其他人。<i class="icon icon-arrows"></i></li>
      </ol>
      
      <h2>更多例子:</h2>
      <ul class="nav nav-primary nav-stacked">
        <li><a href="https://jsfiddle.net/catouse/9k9dgyqx/" target="_blank">ZUI数据表格刷新数据</a></li>
        <li><a href="https://jsfiddle.net/catouse/5qzwwd8a/" target="_blank">使用 ZUI 标签页实现步骤指示器</a></li>
      </ul>
      <br>
      <p><a href="http://zui.sexy" class="btn btn-primary"...

JavaScript

$(function() {
    // 来点js怎么样,下面是一个显示漂浮消息的例子
    $.zui.messager.success('ZUI 1.6 已载入', {placement: 'center'});
    
    $('#sortableText').sortable({handle: '.icon'});
});