| @@ -0,0 +1,286 @@ | ||
| <!doctype html> | ||
| <html class="no-js"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title>Amaze UI Admin form Examples</title> | ||
| <meta name="description" content="这是一个form页面"> | ||
| <meta name="keywords" content="form"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
| <meta name="renderer" content="webkit"> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp" /> | ||
| <link rel="icon" type="image/png" href="assets/i/favicon.png"> | ||
| <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> | ||
| <meta name="apple-mobile-web-app-title" content="Amaze UI" /> | ||
| <link rel="stylesheet" href="assets/css/amazeui.min.css"/> | ||
| <link rel="stylesheet" href="assets/css/admin.css"> | ||
| </head> | ||
| <body> | ||
| <!--[if lte IE 9]> | ||
| <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a> | ||
| 以获得更好的体验!</p> | ||
| <![endif]--> | ||
|
|
||
| <header class="am-topbar admin-header"> | ||
| <div class="am-topbar-brand"> | ||
| <strong>Amaze UI</strong> <small>后台管理模板</small> | ||
| </div> | ||
|
|
||
| <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button> | ||
|
|
||
| <div class="am-collapse am-topbar-collapse" id="topbar-collapse"> | ||
|
|
||
| <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list"> | ||
| <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li> | ||
| <li class="am-dropdown" data-am-dropdown> | ||
| <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"> | ||
| <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span> | ||
| </a> | ||
| <ul class="am-dropdown-content"> | ||
| <li><a href="#"><span class="am-icon-user"></span> 资料</a></li> | ||
| <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li> | ||
| <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li> | ||
| </ul> | ||
| </li> | ||
| <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="am-cf admin-main"> | ||
| <!-- sidebar start --> | ||
| <div class="admin-sidebar am-offcanvas" id="admin-offcanvas"> | ||
| <div class="am-offcanvas-bar admin-offcanvas-bar"> | ||
| <ul class="am-list admin-sidebar-list"> | ||
| <li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li> | ||
| <li class="admin-parent"> | ||
| <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file"></span> 页面模块 <span class="am-icon-angle-right am-fr am-margin-right"></span></a> | ||
| <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav"> | ||
| <li><a href="admin-user.html" class="am-cf"><span class="am-icon-check"></span> 个人资料<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li> | ||
| <li><a href="admin-help.html"><span class="am-icon-puzzle-piece"></span> 帮助页</a></li> | ||
| <li><a href="admin-gallery.html"><span class="am-icon-th"></span> 相册页面<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li> | ||
| <li><a href="admin-log.html"><span class="am-icon-calendar"></span> 系统日志</a></li> | ||
| <li><a href="admin-404.html"><span class="am-icon-bug"></span> 404</a></li> | ||
| </ul> | ||
| </li> | ||
| <li><a href="admin-table.html"><span class="am-icon-table"></span> 表格</a></li> | ||
| <li><a href="admin-form.html"><span class="am-icon-pencil-square-o"></span> 表单</a></li> | ||
| <li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li> | ||
| </ul> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-bookmark"></span> 公告</p> | ||
| <p>时光静好,与君语;细水流年,与君同。—— Amaze UI</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-tag"></span> wiki</p> | ||
| <p>Welcome to the Amaze UI wiki!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- sidebar end --> | ||
|
|
||
| <!-- content start --> | ||
| <div class="admin-content"> | ||
|
|
||
| <div class="am-cf am-padding"> | ||
| <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">表单</strong> / <small>form</small></div> | ||
| </div> | ||
|
|
||
| <div class="am-tabs am-margin" data-am-tabs> | ||
| <ul class="am-tabs-nav am-nav am-nav-tabs"> | ||
| <li class="am-active"><a href="#tab1">基本信息</a></li> | ||
| <li><a href="#tab2">详细描述</a></li> | ||
| <li><a href="#tab3">SEO 选项</a></li> | ||
| </ul> | ||
|
|
||
| <div class="am-tabs-bd"> | ||
| <div class="am-tab-panel am-fade am-in am-active" id="tab1"> | ||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right">所属类别</div> | ||
| <div class="am-u-sm-8 am-u-md-10"> | ||
| <select data-am-selected="{btnSize: 'sm'}"> | ||
| <option value="option1">选项一...</option> | ||
| <option value="option2">选项二.....</option> | ||
| <option value="option3">选项三........</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right">显示状态</div> | ||
| <div class="am-u-sm-8 am-u-md-10"> | ||
| <div class="am-btn-group" data-am-button> | ||
| <label class="am-btn am-btn-default am-btn-xs"> | ||
| <input type="radio" name="options" id="option1"> 正常 | ||
| </label> | ||
| <label class="am-btn am-btn-default am-btn-xs"> | ||
| <input type="radio" name="options" id="option2"> 待审核 | ||
| </label> | ||
| <label class="am-btn am-btn-default am-btn-xs"> | ||
| <input type="radio" name="options" id="option3"> 不显示 | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right">推荐类型</div> | ||
| <div class="am-u-sm-8 am-u-md-10"> | ||
| <div class="am-btn-group" data-am-button> | ||
| <label class="am-btn am-btn-default am-btn-xs"> | ||
| <input type="checkbox"> 允许评论 | ||
| </label> | ||
| <label class="am-btn am-btn-default am-btn-xs"> | ||
| <input type="checkbox"> 置顶 | ||
| </label> | ||
| <label class="am-btn am-btn-default am-btn-xs"> | ||
| <input type="checkbox"> 推荐 | ||
| </label> | ||
| <label class="am-btn am-btn-default am-btn-xs"> | ||
| <input type="checkbox"> 热门 | ||
| </label> | ||
| <label class="am-btn am-btn-default am-btn-xs"> | ||
| <input type="checkbox"> 轮播图 | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right"> | ||
| 发布时间 | ||
| </div> | ||
| <div class="am-u-sm-8 am-u-md-10"> | ||
| <form action="" class="am-form am-form-inline"> | ||
| <div class="am-form-group am-form-icon"> | ||
| <i class="am-icon-calendar"></i> | ||
| <input type="text" class="am-form-field am-input-sm" placeholder="时间"> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="am-tab-panel am-fade" id="tab2"> | ||
| <form class="am-form"> | ||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right"> | ||
| 文章标题 | ||
| </div> | ||
| <div class="am-u-sm-8 am-u-md-4"> | ||
| <input type="text" class="am-input-sm"> | ||
| </div> | ||
| <div class="am-hide-sm-only am-u-md-6">*必填,不可重复</div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right"> | ||
| 文章作者 | ||
| </div> | ||
| <div class="am-u-sm-8 am-u-md-4 am-u-end col-end"> | ||
| <input type="text" class="am-input-sm"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right"> | ||
| 信息来源 | ||
| </div> | ||
| <div class="am-u-sm-8 am-u-md-4"> | ||
| <input type="text" class="am-input-sm"> | ||
| </div> | ||
| <div class="am-hide-sm-only am-u-md-6">选填</div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right"> | ||
| 内容摘要 | ||
| </div> | ||
| <div class="am-u-sm-8 am-u-md-4"> | ||
| <input type="text" class="am-input-sm"> | ||
| </div> | ||
| <div class="am-u-sm-12 am-u-md-6">不填写则自动截取内容前255字符</div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top-sm"> | ||
| <div class="am-u-sm-12 am-u-md-2 am-text-right admin-form-text"> | ||
| 内容描述 | ||
| </div> | ||
| <div class="am-u-sm-12 am-u-md-10"> | ||
| <textarea rows="10" placeholder="请使用富文本编辑插件"></textarea> | ||
| </div> | ||
| </div> | ||
|
|
||
| </form> | ||
| </div> | ||
|
|
||
| <div class="am-tab-panel am-fade" id="tab3"> | ||
| <form class="am-form"> | ||
| <div class="am-g am-margin-top-sm"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right"> | ||
| SEO 标题 | ||
| </div> | ||
| <div class="am-u-sm-8 am-u-md-4 am-u-end"> | ||
| <input type="text" class="am-input-sm"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top-sm"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right"> | ||
| SEO 关键字 | ||
| </div> | ||
| <div class="am-u-sm-8 am-u-md-4 am-u-end"> | ||
| <input type="text" class="am-input-sm"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-g am-margin-top-sm"> | ||
| <div class="am-u-sm-4 am-u-md-2 am-text-right"> | ||
| SEO 描述 | ||
| </div> | ||
| <div class="am-u-sm-8 am-u-md-4 am-u-end"> | ||
| <textarea rows="4"></textarea> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-margin"> | ||
| <button type="button" class="am-btn am-btn-primary am-btn-xs">提交保存</button> | ||
| <button type="button" class="am-btn am-btn-primary am-btn-xs">放弃保存</button> | ||
| </div> | ||
| </div> | ||
| <!-- content end --> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a> | ||
|
|
||
| <footer> | ||
| <hr> | ||
| <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p> | ||
| </footer> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> | ||
| <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> | ||
| <script src="assets/js/amazeui.ie8polyfill.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <!--[if (gte IE 9)|!(IE)]><!--> | ||
| <script src="assets/js/jquery.min.js"></script> | ||
| <!--<![endif]--> | ||
| <script src="assets/js/amazeui.min.js"></script> | ||
| <script src="assets/js/app.js"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,227 @@ | ||
| <!doctype html> | ||
| <html class="no-js"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title>Amaze UI Admin gallery Examples</title> | ||
| <meta name="description" content="这是一个 gallery 页面"> | ||
| <meta name="keywords" content="gallery"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
| <meta name="renderer" content="webkit"> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp" /> | ||
| <link rel="icon" type="image/png" href="assets/i/favicon.png"> | ||
| <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> | ||
| <meta name="apple-mobile-web-app-title" content="Amaze UI" /> | ||
| <link rel="stylesheet" href="assets/css/amazeui.min.css"/> | ||
| <link rel="stylesheet" href="assets/css/admin.css"> | ||
| </head> | ||
| <body> | ||
| <!--[if lte IE 9]> | ||
| <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a> | ||
| 以获得更好的体验!</p> | ||
| <![endif]--> | ||
|
|
||
| <header class="am-topbar admin-header"> | ||
| <div class="am-topbar-brand"> | ||
| <strong>Amaze UI</strong> <small>后台管理模板</small> | ||
| </div> | ||
|
|
||
| <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button> | ||
|
|
||
| <div class="am-collapse am-topbar-collapse" id="topbar-collapse"> | ||
|
|
||
| <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list"> | ||
| <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li> | ||
| <li class="am-dropdown" data-am-dropdown> | ||
| <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"> | ||
| <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span> | ||
| </a> | ||
| <ul class="am-dropdown-content"> | ||
| <li><a href="#"><span class="am-icon-user"></span> 资料</a></li> | ||
| <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li> | ||
| <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li> | ||
| </ul> | ||
| </li> | ||
| <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="am-cf admin-main"> | ||
| <!-- sidebar start --> | ||
| <div class="admin-sidebar am-offcanvas" id="admin-offcanvas"> | ||
| <div class="am-offcanvas-bar admin-offcanvas-bar"> | ||
| <ul class="am-list admin-sidebar-list"> | ||
| <li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li> | ||
| <li class="admin-parent"> | ||
| <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file"></span> 页面模块 <span class="am-icon-angle-right am-fr am-margin-right"></span></a> | ||
| <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav"> | ||
| <li><a href="admin-user.html" class="am-cf"><span class="am-icon-check"></span> 个人资料<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li> | ||
| <li><a href="admin-help.html"><span class="am-icon-puzzle-piece"></span> 帮助页</a></li> | ||
| <li><a href="admin-gallery.html"><span class="am-icon-th"></span> 相册页面<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li> | ||
| <li><a href="admin-log.html"><span class="am-icon-calendar"></span> 系统日志</a></li> | ||
| <li><a href="admin-404.html"><span class="am-icon-bug"></span> 404</a></li> | ||
| </ul> | ||
| </li> | ||
| <li><a href="admin-table.html"><span class="am-icon-table"></span> 表格</a></li> | ||
| <li><a href="admin-form.html"><span class="am-icon-pencil-square-o"></span> 表单</a></li> | ||
| <li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li> | ||
| </ul> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-bookmark"></span> 公告</p> | ||
| <p>时光静好,与君语;细水流年,与君同。—— Amaze UI</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-tag"></span> wiki</p> | ||
| <p>Welcome to the Amaze UI wiki!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- sidebar end --> | ||
|
|
||
| <!-- content start --> | ||
| <div class="admin-content"> | ||
|
|
||
| <div class="am-cf am-padding"> | ||
| <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">相册</strong> / <small>Gallery</small></div> | ||
| </div> | ||
|
|
||
| <ul class="am-avg-sm-2 am-avg-md-4 am-avg-lg-6 am-margin gallery-list"> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/> | ||
| <div class="gallery-title">远方 有一个地方 那里种有我们的梦想</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt=""/> | ||
| <div class="gallery-title">君可见漫天落霞</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt=""/> | ||
| <div class="gallery-title">此刻鲜花满天幸福在身边</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" alt=""/> | ||
| <div class="gallery-title">你当我是浮夸吧</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" alt=""/> | ||
| <div class="gallery-title">远方 有一个地方 那里种有我们的梦想</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/> | ||
| <div class="gallery-title">斜阳染幽草 几度飞红</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/> | ||
| <div class="gallery-title">远方 有一个地方 那里种有我们的梦想</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt=""/> | ||
| <div class="gallery-title">你当我是浮夸吧</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt=""/> | ||
| <div class="gallery-title">远方 有一个地方 那里种有我们的梦想</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt=""/> | ||
| <div class="gallery-title">君可见漫天落霞</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" alt=""/> | ||
| <div class="gallery-title">你当我是浮夸吧</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" alt=""/> | ||
| <div class="gallery-title">君可见漫天落霞</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="am-img-thumbnail am-img-bdrs" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt=""/> | ||
| <div class="gallery-title">斜阳染幽草 几度飞红</div> | ||
| <div class="gallery-desc">2375-09-26</div> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <div class="am-margin am-cf"> | ||
| <hr/> | ||
| <p class="am-fl">共 15 条记录</p> | ||
| <ol class="am-pagination am-fr"> | ||
| <li class="am-disabled"><a href="#">«</a></li> | ||
| <li class="am-active"><a href="#">1</a></li> | ||
| <li><a href="#">2</a></li> | ||
| <li><a href="#">3</a></li> | ||
| <li><a href="#">4</a></li> | ||
| <li><a href="#">5</a></li> | ||
| <li><a href="#">»</a></li> | ||
| </ol> | ||
| </div> | ||
|
|
||
| </div> | ||
| <!-- content end --> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a> | ||
|
|
||
| <footer> | ||
| <hr> | ||
| <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p> | ||
| </footer> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> | ||
| <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> | ||
| <script src="assets/js/amazeui.ie8polyfill.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <!--[if (gte IE 9)|!(IE)]><!--> | ||
| <script src="assets/js/jquery.min.js"></script> | ||
| <!--<![endif]--> | ||
| <script src="assets/js/amazeui.min.js"></script> | ||
| <script src="assets/js/app.js"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,146 @@ | ||
| <!doctype html> | ||
| <html class="no-js"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title>Amaze UI Admin help Examples</title> | ||
| <meta name="description" content="这是一个 help 页面"> | ||
| <meta name="keywords" content="help"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
| <meta name="renderer" content="webkit"> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp" /> | ||
| <link rel="icon" type="image/png" href="assets/i/favicon.png"> | ||
| <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> | ||
| <meta name="apple-mobile-web-app-title" content="Amaze UI" /> | ||
| <link rel="stylesheet" href="assets/css/amazeui.min.css"/> | ||
| <link rel="stylesheet" href="assets/css/admin.css"> | ||
| </head> | ||
| <body> | ||
| <!--[if lte IE 9]> | ||
| <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a> | ||
| 以获得更好的体验!</p> | ||
| <![endif]--> | ||
|
|
||
| <header class="am-topbar admin-header"> | ||
| <div class="am-topbar-brand"> | ||
| <strong>Amaze UI</strong> <small>后台管理模板</small> | ||
| </div> | ||
|
|
||
| <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button> | ||
|
|
||
| <div class="am-collapse am-topbar-collapse" id="topbar-collapse"> | ||
|
|
||
| <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list"> | ||
| <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li> | ||
| <li class="am-dropdown" data-am-dropdown> | ||
| <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"> | ||
| <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span> | ||
| </a> | ||
| <ul class="am-dropdown-content"> | ||
| <li><a href="#"><span class="am-icon-user"></span> 资料</a></li> | ||
| <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li> | ||
| <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li> | ||
| </ul> | ||
| </li> | ||
| <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="am-cf admin-main"> | ||
| <!-- sidebar start --> | ||
| <div class="admin-sidebar am-offcanvas" id="admin-offcanvas"> | ||
| <div class="am-offcanvas-bar admin-offcanvas-bar"> | ||
| <ul class="am-list admin-sidebar-list"> | ||
| <li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li> | ||
| <li class="admin-parent"> | ||
| <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file"></span> 页面模块 <span class="am-icon-angle-right am-fr am-margin-right"></span></a> | ||
| <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav"> | ||
| <li><a href="admin-user.html" class="am-cf"><span class="am-icon-check"></span> 个人资料<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li> | ||
| <li><a href="admin-help.html"><span class="am-icon-puzzle-piece"></span> 帮助页</a></li> | ||
| <li><a href="admin-gallery.html"><span class="am-icon-th"></span> 相册页面<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li> | ||
| <li><a href="admin-log.html"><span class="am-icon-calendar"></span> 系统日志</a></li> | ||
| <li><a href="admin-404.html"><span class="am-icon-bug"></span> 404</a></li> | ||
| </ul> | ||
| </li> | ||
| <li><a href="admin-table.html"><span class="am-icon-table"></span> 表格</a></li> | ||
| <li><a href="admin-form.html"><span class="am-icon-pencil-square-o"></span> 表单</a></li> | ||
| <li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li> | ||
| </ul> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-bookmark"></span> 公告</p> | ||
| <p>时光静好,与君语;细水流年,与君同。—— Amaze UI</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-tag"></span> wiki</p> | ||
| <p>Welcome to the Amaze UI wiki!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- sidebar end --> | ||
|
|
||
| <!-- content start --> | ||
| <div class="admin-content"> | ||
| <div class="am-cf am-padding"> | ||
| <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">帮助页面</strong> / <small>Help Page</small></div> | ||
| </div> | ||
|
|
||
| <hr/> | ||
|
|
||
| <div class="am-g"> | ||
| <div class="am-u-sm-12 am-u-sm-centered"> | ||
| <h2>Amaze UI 1.0.0 Beta</h2> | ||
| <p>对于 Amaze UI,我们不是创造者。</p> | ||
| <p>Amaze UI 的诞生,依托于 GitHub 及其他技术社区上一些优秀的资源;Amaze UI 的成长,则离不开用户的支持。</p> | ||
| <p>感谢开源!感谢有你!</p> | ||
| <hr/> | ||
| </div> | ||
|
|
||
| <div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4"> | ||
| <h3>Bug 反馈</h3> | ||
| <p>感谢对 Amaze UI 的关注和支持,如遇到 Bug 或者使用问题,可以通过以下途径反馈给我们:</p> | ||
| <ol> | ||
| <li>在 GitHub 项目主页提交 <a href="">Issue</a>。</li> | ||
| <li>在 GitHub 项目主页提交 <a href="">Issue</a>。</li> | ||
| </ol> | ||
| <p>反馈注意事项</p> | ||
| <p>为了能最准确的传达所描述的问题, 建议你在反馈时附上演示,方便我们理解。</p> | ||
| <p>下面的几个链接是我们在几个在线调试工具上建的页面, 已经引入了 Amaze UI 样式和脚本,你可以选择你喜欢的工具【Fork】一份, 把要有问题的场景粘在里面,反馈给我们。</p> | ||
| <ol> | ||
| <li><a href="http://jsbin.com/kijiqu/1/edit?html,output" target="_blank">JSBin</a> </li> | ||
| <li><a href="http://jsfiddle.net/hegfirose/W22fV/" target="_blank">JSFiddle</a> </li> | ||
| <li><a href="http://codepen.io/minwe/pen/AEeup" target="_blank">CodePen</a> </li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- content end --> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a> | ||
|
|
||
| <footer> | ||
| <hr> | ||
| <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p> | ||
| </footer> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> | ||
| <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> | ||
| <script src="assets/js/amazeui.ie8polyfill.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <!--[if (gte IE 9)|!(IE)]><!--> | ||
| <script src="assets/js/jquery.min.js"></script> | ||
| <!--<![endif]--> | ||
| <script src="assets/js/amazeui.min.js"></script> | ||
| <script src="assets/js/app.js"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,151 @@ | ||
| <!doctype html> | ||
| <html class="no-js"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title>Amaze UI Admin log Examples</title> | ||
| <meta name="description" content="这是一个log页面"> | ||
| <meta name="keywords" content="log"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
| <meta name="renderer" content="webkit"> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp" /> | ||
| <link rel="icon" type="image/png" href="assets/i/favicon.png"> | ||
| <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> | ||
| <meta name="apple-mobile-web-app-title" content="Amaze UI" /> | ||
| <link rel="stylesheet" href="assets/css/amazeui.min.css"/> | ||
| <link rel="stylesheet" href="assets/css/admin.css"> | ||
| </head> | ||
| <body> | ||
| <!--[if lte IE 9]> | ||
| <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a> | ||
| 以获得更好的体验!</p> | ||
| <![endif]--> | ||
|
|
||
| <header class="am-topbar admin-header"> | ||
| <div class="am-topbar-brand"> | ||
| <strong>Amaze UI</strong> <small>后台管理模板</small> | ||
| </div> | ||
|
|
||
| <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button> | ||
|
|
||
| <div class="am-collapse am-topbar-collapse" id="topbar-collapse"> | ||
|
|
||
| <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list"> | ||
| <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li> | ||
| <li class="am-dropdown" data-am-dropdown> | ||
| <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"> | ||
| <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span> | ||
| </a> | ||
| <ul class="am-dropdown-content"> | ||
| <li><a href="#"><span class="am-icon-user"></span> 资料</a></li> | ||
| <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li> | ||
| <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li> | ||
| </ul> | ||
| </li> | ||
| <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="am-cf admin-main"> | ||
| <!-- sidebar start --> | ||
| <div class="admin-sidebar am-offcanvas" id="admin-offcanvas"> | ||
| <div class="am-offcanvas-bar admin-offcanvas-bar"> | ||
| <ul class="am-list admin-sidebar-list"> | ||
| <li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li> | ||
| <li class="admin-parent"> | ||
| <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file"></span> 页面模块 <span class="am-icon-angle-right am-fr am-margin-right"></span></a> | ||
| <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav"> | ||
| <li><a href="admin-user.html" class="am-cf"><span class="am-icon-check"></span> 个人资料<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li> | ||
| <li><a href="admin-help.html"><span class="am-icon-puzzle-piece"></span> 帮助页</a></li> | ||
| <li><a href="admin-gallery.html"><span class="am-icon-th"></span> 相册页面<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li> | ||
| <li><a href="admin-log.html"><span class="am-icon-calendar"></span> 系统日志</a></li> | ||
| <li><a href="admin-404.html"><span class="am-icon-bug"></span> 404</a></li> | ||
| </ul> | ||
| </li> | ||
| <li><a href="admin-table.html"><span class="am-icon-table"></span> 表格</a></li> | ||
| <li><a href="admin-form.html"><span class="am-icon-pencil-square-o"></span> 表单</a></li> | ||
| <li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li> | ||
| </ul> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-bookmark"></span> 公告</p> | ||
| <p>时光静好,与君语;细水流年,与君同。—— Amaze UI</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-tag"></span> wiki</p> | ||
| <p>Welcome to the Amaze UI wiki!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- sidebar end --> | ||
|
|
||
| <!-- content start --> | ||
| <div class="admin-content"> | ||
| <div class="am-cf am-padding"> | ||
| <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">错误日志</strong> / <small>Error Log</small></div> | ||
| </div> | ||
|
|
||
| <hr/> | ||
|
|
||
| <div class="am-g error-log"> | ||
| <div class="am-u-sm-12 am-u-sm-centered"> | ||
| <pre class="am-pre-scrollable"> | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| <span class="am-text-success">[Tue Jan 11 17:32:52 2013]</span> <span class="am-text-danger">[error]</span> [google 123.124.2.2] client denied by server: /export/home/macadmin/testdoc - no such file | ||
| </pre> | ||
| <p>这里是静态页面展示,使用时结合代码高亮插件</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- content end --> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a> | ||
|
|
||
| <footer> | ||
| <hr> | ||
| <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p> | ||
| </footer> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> | ||
| <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> | ||
| <script src="assets/js/amazeui.ie8polyfill.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <!--[if (gte IE 9)|!(IE)]><!--> | ||
| <script src="assets/js/jquery.min.js"></script> | ||
| <!--<![endif]--> | ||
| <script src="assets/js/amazeui.min.js"></script> | ||
| <script src="assets/js/app.js"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,220 @@ | ||
| <!doctype html> | ||
| <html class="no-js"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title>Amaze UI Admin user Examples</title> | ||
| <meta name="description" content="这是一个 user 页面"> | ||
| <meta name="keywords" content="user"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
| <meta name="renderer" content="webkit"> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp" /> | ||
| <link rel="icon" type="image/png" href="assets/i/favicon.png"> | ||
| <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> | ||
| <meta name="apple-mobile-web-app-title" content="Amaze UI" /> | ||
| <link rel="stylesheet" href="assets/css/amazeui.min.css"/> | ||
| <link rel="stylesheet" href="assets/css/admin.css"> | ||
| </head> | ||
| <body> | ||
| <!--[if lte IE 9]> | ||
| <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a> | ||
| 以获得更好的体验!</p> | ||
| <![endif]--> | ||
|
|
||
| <header class="am-topbar admin-header"> | ||
| <div class="am-topbar-brand"> | ||
| <strong>Amaze UI</strong> <small>后台管理模板</small> | ||
| </div> | ||
|
|
||
| <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button> | ||
|
|
||
| <div class="am-collapse am-topbar-collapse" id="topbar-collapse"> | ||
|
|
||
| <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list"> | ||
| <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li> | ||
| <li class="am-dropdown" data-am-dropdown> | ||
| <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"> | ||
| <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span> | ||
| </a> | ||
| <ul class="am-dropdown-content"> | ||
| <li><a href="#"><span class="am-icon-user"></span> 资料</a></li> | ||
| <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li> | ||
| <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li> | ||
| </ul> | ||
| </li> | ||
| <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="am-cf admin-main"> | ||
| <!-- sidebar start --> | ||
| <div class="admin-sidebar am-offcanvas" id="admin-offcanvas"> | ||
| <div class="am-offcanvas-bar admin-offcanvas-bar"> | ||
| <ul class="am-list admin-sidebar-list"> | ||
| <li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li> | ||
| <li class="admin-parent"> | ||
| <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file"></span> 页面模块 <span class="am-icon-angle-right am-fr am-margin-right"></span></a> | ||
| <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav"> | ||
| <li><a href="admin-user.html" class="am-cf"><span class="am-icon-check"></span> 个人资料<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li> | ||
| <li><a href="admin-help.html"><span class="am-icon-puzzle-piece"></span> 帮助页</a></li> | ||
| <li><a href="admin-gallery.html"><span class="am-icon-th"></span> 相册页面<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li> | ||
| <li><a href="admin-log.html"><span class="am-icon-calendar"></span> 系统日志</a></li> | ||
| <li><a href="admin-404.html"><span class="am-icon-bug"></span> 404</a></li> | ||
| </ul> | ||
| </li> | ||
| <li><a href="admin-table.html"><span class="am-icon-table"></span> 表格</a></li> | ||
| <li><a href="admin-form.html"><span class="am-icon-pencil-square-o"></span> 表单</a></li> | ||
| <li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li> | ||
| </ul> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-bookmark"></span> 公告</p> | ||
| <p>时光静好,与君语;细水流年,与君同。—— Amaze UI</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-panel am-panel-default admin-sidebar-panel"> | ||
| <div class="am-panel-bd"> | ||
| <p><span class="am-icon-tag"></span> wiki</p> | ||
| <p>Welcome to the Amaze UI wiki!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- sidebar end --> | ||
|
|
||
| <!-- content start --> | ||
| <div class="admin-content"> | ||
| <div class="am-cf am-padding"> | ||
| <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">个人资料</strong> / <small>Personal information</small></div> | ||
| </div> | ||
|
|
||
| <hr/> | ||
|
|
||
| <div class="am-g"> | ||
|
|
||
| <div class="am-u-sm-12 am-u-md-4 am-u-md-push-8"> | ||
| <div class="am-panel am-panel-default"> | ||
| <div class="am-panel-bd"> | ||
| <div class="am-g"> | ||
| <div class="am-u-md-4"> | ||
| <img class="am-img-circle am-img-thumbnail" src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/200/h/200/q/80" alt=""/> | ||
| </div> | ||
| <div class="am-u-md-8"> | ||
| <p>你可以使用<a href="#">gravatar.com</a>提供的头像或者使用本地上传头像。 </p> | ||
| <form class="am-form"> | ||
| <div class="am-form-group"> | ||
| <input type="file" id="user-pic"> | ||
| <p class="am-form-help">请选择要上传的文件...</p> | ||
| <button type="button" class="am-btn am-btn-primary am-btn-xs">保存</button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-panel am-panel-default"> | ||
| <div class="am-panel-bd"> | ||
| <div class="user-info"> | ||
| <p>等级信息</p> | ||
| <div class="am-progress am-progress-sm"> | ||
| <div class="am-progress-bar" style="width: 60%"></div> | ||
| </div> | ||
| <p class="user-info-order">当前等级:<strong>LV8</strong> 活跃天数:<strong>587</strong> 距离下一级别:<strong>160</strong></p> | ||
| </div> | ||
| <div class="user-info"> | ||
| <p>信用信息</p> | ||
| <div class="am-progress am-progress-sm"> | ||
| <div class="am-progress-bar am-progress-bar-success" style="width: 80%"></div> | ||
| </div> | ||
| <p class="user-info-order">信用等级:正常当前 信用积分:<strong>80</strong></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4"> | ||
| <form class="am-form am-form-horizontal"> | ||
| <div class="am-form-group"> | ||
| <label for="user-name" class="am-u-sm-3 am-form-label">姓名 / Name</label> | ||
| <div class="am-u-sm-9"> | ||
| <input type="text" id="user-name" placeholder="姓名 / Name"> | ||
| <small>输入你的名字,让我们记住你。</small> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-form-group"> | ||
| <label for="user-email" class="am-u-sm-3 am-form-label">电子邮件 / Email</label> | ||
| <div class="am-u-sm-9"> | ||
| <input type="email" id="user-email" placeholder="输入你的电子邮件 / Email"> | ||
| <small>邮箱你懂得...</small> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-form-group"> | ||
| <label for="user-phone" class="am-u-sm-3 am-form-label">电话 / Telephone</label> | ||
| <div class="am-u-sm-9"> | ||
| <input type="email" id="user-phone" placeholder="输入你的电话号码 / Telephone"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-form-group"> | ||
| <label for="user-QQ" class="am-u-sm-3 am-form-label">QQ</label> | ||
| <div class="am-u-sm-9"> | ||
| <input type="email" id="user-QQ" placeholder="输入你的QQ号码"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-form-group"> | ||
| <label for="user-weibo" class="am-u-sm-3 am-form-label">微博 / Twitter</label> | ||
| <div class="am-u-sm-9"> | ||
| <input type="email" id="user-weibo" placeholder="输入你的微博 / Twitter"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-form-group"> | ||
| <label for="user-intro" class="am-u-sm-3 am-form-label">简介 / Intro</label> | ||
| <div class="am-u-sm-9"> | ||
| <textarea class="" rows="5" id="user-intro" placeholder="输入个人简介"></textarea> | ||
| <small>250字以内写出你的一生...</small> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="am-form-group"> | ||
| <div class="am-u-sm-9 am-u-sm-push-3"> | ||
| <button type="button" class="am-btn am-btn-primary">保存修改</button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- content end --> | ||
|
|
||
| </div> | ||
|
|
||
| <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a> | ||
|
|
||
| <footer> | ||
| <hr> | ||
| <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p> | ||
| </footer> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> | ||
| <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> | ||
| <script src="assets/js/amazeui.ie8polyfill.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <!--[if (gte IE 9)|!(IE)]><!--> | ||
| <script src="assets/js/jquery.min.js"></script> | ||
| <!--<![endif]--> | ||
| <script src="assets/js/amazeui.min.js"></script> | ||
|
|
||
| <script src="assets/js/app.js"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,358 @@ | ||
| /** | ||
| * admin.css | ||
| */ | ||
|
|
||
| ul { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .admin-icon-yellow { | ||
| color: #ffbe40; | ||
| } | ||
|
|
||
| .admin-header { | ||
| font-size: 1.4rem; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .admin-header-list a:hover :after { | ||
| content: none; | ||
| } | ||
|
|
||
| .admin-main { | ||
| background: #f3f3f3; | ||
| } | ||
|
|
||
| .admin-menu { | ||
| position: fixed; | ||
| z-index: 10; | ||
| bottom: 30px; | ||
| right: 20px; | ||
| } | ||
|
|
||
| .admin-sidebar { | ||
| width: 260px; | ||
| min-height: 100%; | ||
| float: left; | ||
| border-right: 1px solid #cecece; | ||
| } | ||
|
|
||
| .admin-sidebar-list { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .admin-sidebar-list li a { | ||
| color: #5c5c5c; | ||
| padding-left: 24px; | ||
| } | ||
|
|
||
| .admin-sidebar-list li:first-child { | ||
| border-top: none; | ||
| } | ||
|
|
||
| .admin-sidebar-sub { | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| box-shadow: 0 16px 8px -15px #e2e2e2 inset; | ||
| background: #ececec; | ||
| padding-left: 24px; | ||
| } | ||
|
|
||
| .admin-sidebar-sub li:first-child { | ||
| border-top: 1px solid #dedede; | ||
| } | ||
|
|
||
| .admin-sidebar-panel { | ||
| margin: 10px; | ||
| } | ||
|
|
||
| .admin-content { | ||
| width: auto; | ||
| overflow: hidden; | ||
| height: 100%; | ||
| background: #fff; | ||
| } | ||
|
|
||
| .admin-content-list { | ||
| border: 1px solid #e9ecf1; | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .admin-content-list li { | ||
| border: 1px solid #e9ecf1; | ||
| border-width: 0 1px; | ||
| margin-left: -1px; | ||
| } | ||
|
|
||
| .admin-content-list li:first-child { | ||
| border-left: none; | ||
| } | ||
|
|
||
| .admin-content-list li:last-child { | ||
| border-right: none; | ||
| } | ||
|
|
||
| .admin-content-table a { | ||
| color: #535353; | ||
| } | ||
| .admin-content-file { | ||
| margin-bottom: 0; | ||
| color: #666; | ||
| } | ||
|
|
||
| .admin-content-file p { | ||
| margin: 0 0 5px 0; | ||
| font-size: 1.4rem; | ||
| } | ||
|
|
||
| .admin-content-file li { | ||
| padding: 10px 0; | ||
| } | ||
|
|
||
| .admin-content-file li:first-child { | ||
| border-top: none; | ||
| } | ||
|
|
||
| .admin-content-file li:last-child { | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| .admin-content-file li .am-progress { | ||
| margin-bottom: 4px; | ||
| } | ||
|
|
||
| .admin-content-file li .am-progress-bar { | ||
| line-height: 14px; | ||
| } | ||
|
|
||
| .admin-content-task { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .admin-content-task li { | ||
| padding: 5px 0; | ||
| border-color: #eee; | ||
| } | ||
|
|
||
| .admin-content-task li:first-child { | ||
| border-top: none; | ||
| } | ||
|
|
||
| .admin-content-task li:last-child { | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| .admin-task-meta { | ||
| font-size: 1.2rem; | ||
| color: #999; | ||
| } | ||
|
|
||
| .admin-task-bd { | ||
| font-size: 1.4rem; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .admin-content-comment { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .admin-content-comment .am-comment-bd { | ||
| font-size: 1.4rem; | ||
| } | ||
|
|
||
| .admin-content-pagination { | ||
| margin-bottom: 0; | ||
| } | ||
| .admin-content-pagination li a { | ||
| padding: 4px 8px; | ||
| } | ||
|
|
||
| @media only screen and (min-width: 641px) { | ||
| .admin-sidebar { | ||
| display: block; | ||
| position: static; | ||
| background: none; | ||
| } | ||
|
|
||
| .admin-offcanvas-bar { | ||
| position: static; | ||
| width: auto; | ||
| background: none; | ||
| -webkit-transform: translate3d(0, 0, 0); | ||
| -ms-transform: translate3d(0, 0, 0); | ||
| transform: translate3d(0, 0, 0); | ||
| } | ||
| .admin-offcanvas-bar:after { | ||
| content: none; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 640px) { | ||
| .admin-sidebar { | ||
| width: inherit; | ||
| } | ||
|
|
||
| .admin-offcanvas-bar { | ||
| background: #f3f3f3; | ||
| } | ||
|
|
||
| .admin-offcanvas-bar:after { | ||
| background: #BABABA; | ||
| } | ||
|
|
||
| .admin-sidebar-list a:hover, .admin-sidebar-list a:active{ | ||
| -webkit-transition: background-color .3s ease; | ||
| -moz-transition: background-color .3s ease; | ||
| -ms-transition: background-color .3s ease; | ||
| -o-transition: background-color .3s ease; | ||
| transition: background-color .3s ease; | ||
| background: #E4E4E4; | ||
| } | ||
|
|
||
| .admin-content-list li { | ||
| padding: 10px; | ||
| border-width: 1px 0; | ||
| margin-top: -1px; | ||
| } | ||
|
|
||
| .admin-content-list li:first-child { | ||
| border-top: none; | ||
| } | ||
|
|
||
| .admin-content-list li:last-child { | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| .admin-form-text { | ||
| text-align: left !important; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| /* | ||
| * user.html css | ||
| */ | ||
| .user-info { | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .user-info .am-progress { | ||
| margin-bottom: 4px; | ||
| } | ||
|
|
||
| .user-info p { | ||
| margin: 5px; | ||
| } | ||
|
|
||
| .user-info-order { | ||
| font-size: 1.4rem; | ||
| } | ||
|
|
||
| /* | ||
| * errorLog.html css | ||
| */ | ||
|
|
||
| .error-log .am-pre-scrollable { | ||
| max-height: 40rem; | ||
| } | ||
|
|
||
| /* | ||
| * table.html css | ||
| */ | ||
|
|
||
| .table-main { | ||
| font-size: 1.4rem; | ||
| padding: .5rem; | ||
| } | ||
|
|
||
| .table-main button { | ||
| background: #fff; | ||
| } | ||
|
|
||
| .table-check { | ||
| width: 30px; | ||
| } | ||
|
|
||
| .table-id { | ||
| width: 50px; | ||
| } | ||
|
|
||
| @media only screen and (max-width: 640px) { | ||
| .table-select { | ||
| margin-top: 10px; | ||
| margin-left: 5px; | ||
| } | ||
| } | ||
|
|
||
| /* | ||
| gallery.html css | ||
| */ | ||
|
|
||
| .gallery-list li { | ||
| padding: 10px; | ||
| } | ||
|
|
||
| .gallery-list a { | ||
| color: #666; | ||
| } | ||
|
|
||
| .gallery-list a:hover { | ||
| color: #3bb4f2; | ||
| } | ||
|
|
||
| .gallery-title { | ||
| margin-top: 6px; | ||
| font-size: 1.4rem; | ||
| } | ||
|
|
||
| .gallery-desc { | ||
| font-size: 1.2rem; | ||
| margin-top: 4px; | ||
| } | ||
|
|
||
| /* | ||
| 404.html css | ||
| */ | ||
|
|
||
| .page-404 { | ||
| background: #fff; | ||
| border: none; | ||
| width: 200px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
|
|
||
| /* | ||
| fixed-layout 固定头部和边栏布局 | ||
| */ | ||
|
|
||
| .fixed-layout, | ||
| .fixed-layout body { | ||
| height: 100%; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .fixed-layout .admin-header { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| z-index: 1500; | ||
| } | ||
|
|
||
| .fixed-layout .admin-main { | ||
| position: relative; | ||
| height: 100%; | ||
| padding-top: 51px; | ||
| } | ||
|
|
||
| .fixed-layout .admin-content, | ||
| .fixed-layout .admin-sidebar { | ||
| height: 100%; | ||
| overflow-x: hidden; | ||
| overflow-y: scroll; | ||
| } | ||
|
|
||
| .fixed-layout .admin-sidebar.am-active { | ||
| z-index: 1600; | ||
| } |
| @@ -0,0 +1 @@ | ||
| /* Write your styles */ |
| @@ -0,0 +1,14 @@ | ||
| (function($) { | ||
| 'use strict'; | ||
|
|
||
| $(function() { | ||
| var $fullText = $('.admin-fullText'); | ||
| $('#admin-fullscreen').on('click', function() { | ||
| $.AMUI.fullscreen.toggle(); | ||
| }); | ||
|
|
||
| $(document).on($.AMUI.fullscreen.raw.fullscreenchange, function() { | ||
| $fullText.text($.AMUI.fullscreen.isFullscreen ? '退出全屏' : '开启全屏'); | ||
| }); | ||
| }); | ||
| })(jQuery); |
| @@ -0,0 +1,251 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head lang="en"> | ||
| <meta charset="UTF-8"> | ||
| <title>Blog | Amaze UI Example</title> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" | ||
| content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
| <meta name="format-detection" content="telephone=no"> | ||
| <meta name="renderer" content="webkit"> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp"/> | ||
| <link rel="alternate icon" type="image/png" href="{{assets}}i/favicon.png"> | ||
| <link rel="stylesheet" href="{{assets}}css/amazeui.min.css"/> | ||
| <style> | ||
| @media only screen and (min-width: 1200px) { | ||
| .blog-g-fixed { | ||
| max-width: 1200px; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (min-width: 641px) { | ||
| .blog-sidebar { | ||
| font-size: 1.4rem; | ||
| } | ||
| } | ||
|
|
||
| .blog-main { | ||
| padding: 20px 0; | ||
| } | ||
|
|
||
| .blog-title { | ||
| margin: 10px 0 20px 0; | ||
| } | ||
|
|
||
| .blog-meta { | ||
| font-size: 14px; | ||
| margin: 10px 0 20px 0; | ||
| color: #222; | ||
| } | ||
|
|
||
| .blog-meta a { | ||
| color: #27ae60; | ||
| } | ||
|
|
||
| .blog-pagination a { | ||
| font-size: 1.4rem; | ||
| } | ||
|
|
||
| .blog-team li { | ||
| padding: 4px; | ||
| } | ||
|
|
||
| .blog-team img { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .blog-content img, | ||
| .blog-team img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .blog-footer { | ||
| padding: 10px 0; | ||
| text-align: center; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header class="am-topbar"> | ||
| <h1 class="am-topbar-brand"> | ||
| <a href="#">blog</a> | ||
| </h1> | ||
|
|
||
| <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" | ||
| data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span | ||
| class="am-icon-bars"></span></button> | ||
|
|
||
| <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse"> | ||
| <ul class="am-nav am-nav-pills am-topbar-nav"> | ||
| <li class="am-active"><a href="#">首页</a></li> | ||
| <li><a href="#">项目</a></li> | ||
| <li class="am-dropdown" data-am-dropdown> | ||
| <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"> | ||
| 菜单 <span class="am-icon-caret-down"></span> | ||
| </a> | ||
| <ul class="am-dropdown-content"> | ||
| <li class="am-dropdown-header">标题</li> | ||
| <li><a href="#">关于我们</a></li> | ||
| <li><a href="#">关于字体</a></li> | ||
| <li><a href="#">TIPS</a></li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <form class="am-topbar-form am-topbar-left am-form-inline am-topbar-right" role="search"> | ||
| <div class="am-form-group"> | ||
| <input type="text" class="am-form-field am-input-sm" placeholder="搜索文章"> | ||
| </div> | ||
| <button type="submit" class="am-btn am-btn-default am-btn-sm">搜索</button> | ||
| </form> | ||
|
|
||
| </div> | ||
| </header> | ||
|
|
||
| <div class="am-g am-g-fixed blog-g-fixed"> | ||
| <div class="am-u-md-8"> | ||
| <article class="blog-main"> | ||
| <h3 class="am-article-title blog-title"> | ||
| <a href="#">Google fonts 的字體(display 篇)</a> | ||
| </h3> | ||
| <h4 class="am-article-meta blog-meta">by <a href="">open</a> posted on 2014/06/17 under <a href="#">字体</a></h4> | ||
|
|
||
| <div class="am-g blog-content"> | ||
| <div class="am-u-lg-7"> | ||
| <p><!-- 本demo来自 http://blog.justfont.com/ -->你自信滿滿的跟客戶進行第一次 demo。秀出你精心設計的內容時,你原本期許客戶冷不防地掉下感動的眼淚。</p> | ||
|
|
||
| <p>因為那實在是太高級了。</p> | ||
|
|
||
| <p>除了各項基本架構幾乎完美無缺之外,內文是高貴的,有著一些距離感的,典雅的襯線字體。不是 Times New | ||
| Roman,而是很少有人見過的,你精心挑選過的字體,凸顯你品味的高超。而且它並沒有花上你與業主一毛錢,或許這也非常重要。</p> | ||
| </div> | ||
| <div class="am-u-lg-5"> | ||
| <p><img src="http://f.cl.ly/items/451O3X0g47320D203D1B/不夠活潑.jpg"></p> | ||
| </div> | ||
| </div> | ||
| <div class="am-g"> | ||
| <div class="am-u-sm-12"> | ||
| <p>看著自己的作品,你的喜悅之情溢於言表,差點就要說出我要感謝我的父母之類的得獎感言。但在你對面的客戶先是一點表情也沒有,又瞬間轉為陰沉,抿了抿嘴角冷冷的說……</p> | ||
|
|
||
| <p>「我要一種比較跳的感覺懂嗎?」</p> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| <hr class="am-article-divider blog-hr"> | ||
|
|
||
| <article class="blog-main"> | ||
| <h3 class="am-article-title"> | ||
| <a href="#">身邊的字體: Arial (上)</a> | ||
| </h3> | ||
| <h4 class="am-article-meta blog-meta">by <a href="">ben</a> posted on 2014/06/17 under <a href="#">javascript</a> | ||
| </h4> | ||
|
|
||
| <div class="am-g blog-content"> | ||
| <div class="am-u-lg-7"> | ||
| <p><!--本demo文字来自 http://blog.justfont.com/--> 这次要介绍的是大家似乎都狠熟悉却又狠陌生的字体:Arial。不只是对 Typography | ||
| 特别有兴趣的人、碰过排版的人,就算毫无接触,只要打开过电脑的字型选单,应该都有看过这个字型吧。尤其它还是以 A 开头,总是会出现在选单最前面。</p> | ||
|
|
||
| <p>Arial 常常跟 Helvetica 搞混,也常被当作是没有 Helvetica 时的替代字体使用。事实上 Arial 确实就是故意做得跟 Helvetica 狠相似,连每个字母的宽度都刻意做得一模一样。</p> | ||
| </div> | ||
| <div class="am-u-lg-5"> | ||
| <p><img src="https://farm3.staticflickr.com/2917/14186214720_5d0b8ca2e3_b.jpg"></p> | ||
| </div> | ||
| </div> | ||
| <div class="am-g"> | ||
| <div class="am-u-sm-12"> | ||
| <p>在欧美的排版业界中,使用 Arial 的作品意即是「不使用 Helvetica 的作品」,会被认為是设计师对字体的使用没有概念或是太容易妥协,基本上我大致也是同意。</p> | ||
|
|
||
| <p>因為 Helvetica 只有 Mac 上才有內建,Windows 用戶除非花錢買,不然是沒有 Helvetica 能用,所以使用 Arial 的設計師往往被看成是不願意對 Typography | ||
| 花錢,專業素養不到家的人。除了在確保網頁相容性等絕對必需的情況外,幾乎可以說是不應該使用的字體。</p> | ||
|
|
||
| <p>但是,在此之前,我們對 Arial 又有多少認識呢?</p> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| <hr class="am-article-divider blog-hr"> | ||
| <ul class="am-pagination blog-pagination"> | ||
| <li class="am-pagination-prev"><a href="">« 上一页</a></li> | ||
| <li class="am-pagination-next"><a href="">下一页 »</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="am-u-md-4 blog-sidebar"> | ||
| <div class="am-panel-group"> | ||
| <section class="am-panel am-panel-default"> | ||
| <div class="am-panel-hd">关于我</div> | ||
| <div class="am-panel-bd"> | ||
| <p>前所未有的中文云端字型服务,让您在 web 平台上自由使用高品质中文字体,跨平台、可搜寻,而且超美。云端字型是我们的事业,推广字型学知识是我们的志业。从字体出发,关心设计与我们的生活,justfont blog | ||
| 正是為此而生。</p> | ||
| <a class="am-btn am-btn-success am-btn-sm" href="#">查看更多 →</a> | ||
| </div> | ||
| </section> | ||
| <section class="am-panel am-panel-default"> | ||
| <div class="am-panel-hd">文章目录</div> | ||
| <ul class="am-list blog-list"> | ||
| <li><a href="#">Google fonts 的字體(sans-serif 篇)</a></li> | ||
| <li><a href="#">[but]服貿最前線?-再訪桃園機場</a></li> | ||
| <li><a href="#">到日星鑄字行學字型</a></li> | ||
| <li><a href="#">glyph font vs. 漢字(上)</a></li> | ||
| <li><a href="#">浙江民間書刻體上線</a></li> | ||
| <li><a href="#">[極短篇] Android v.s iOS,誰的字體好讀?</a></li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section class="am-panel am-panel-default"> | ||
| <div class="am-panel-hd">团队成员</div> | ||
| <div class="am-panel-bd"> | ||
| <ul class="am-avg-sm-4 blog-team"> | ||
| <li><img class="am-thumbnail" | ||
| src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/> | ||
| </li> | ||
| <li><img class="am-thumbnail" | ||
| src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/> | ||
| </li> | ||
| <li><img class="am-thumbnail" | ||
| src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/> | ||
| </li> | ||
| <li><img class="am-thumbnail" | ||
| src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/> | ||
| </li> | ||
| <li><img class="am-thumbnail" | ||
| src="http://img4.duitang.com/uploads/blog/201406/15/20140615230159_kjTmC.thumb.224_0.jpeg" alt=""/> | ||
| </li> | ||
| <li><img class="am-thumbnail" | ||
| src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/> | ||
| </li> | ||
| <li><img class="am-thumbnail" | ||
| src="http://img4.duitang.com/uploads/blog/201406/15/20140615230220_F5LiM.thumb.224_0.jpeg" alt=""/> | ||
| </li> | ||
| <li><img class="am-thumbnail" | ||
| src="http://img4.duitang.com/uploads/blog/201406/15/20140615230159_kjTmC.thumb.224_0.jpeg" alt=""/> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <footer class="blog-footer"> | ||
| <p>blog template<br/> | ||
| <small>© Copyright XXX. by the AmazeUI Team.</small> | ||
| </p> | ||
| </footer> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> | ||
| <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> | ||
| <script src="{{assets}}js/amazeui.ie8polyfill.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <!--[if (gte IE 9)|!(IE)]><!--> | ||
| <script src="{{assets}}js/jquery.min.js"></script> | ||
| <!--<![endif]--> | ||
| <script src="{{assets}}js/amazeui.min.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,180 @@ | ||
| <!doctype html> | ||
| <html class="no-js"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="description" content=""> | ||
| <meta name="keywords" content=""> | ||
| <meta name="viewport" | ||
| content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
| <title>Amaze UI Examples</title> | ||
|
|
||
| <!-- Set render engine for 360 browser --> | ||
| <meta name="renderer" content="webkit"> | ||
|
|
||
| <!-- No Baidu Siteapp--> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp"/> | ||
|
|
||
| <link rel="icon" type="image/png" href="assets/i/favicon.png"> | ||
|
|
||
| <!-- Add to homescreen for Chrome on Android --> | ||
| <meta name="mobile-web-app-capable" content="yes"> | ||
| <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"> | ||
|
|
||
| <!-- Add to homescreen for Safari on iOS --> | ||
| <meta name="apple-mobile-web-app-capable" content="yes"> | ||
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | ||
| <meta name="apple-mobile-web-app-title" content="Amaze UI"/> | ||
| <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> | ||
|
|
||
| <!-- Tile icon for Win8 (144x144 + tile color) --> | ||
| <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"> | ||
| <meta name="msapplication-TileColor" content="#0e90d2"> | ||
|
|
||
| <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones --> | ||
| <!-- | ||
| <link rel="canonical" href="http://www.example.com/"> | ||
| --> | ||
|
|
||
| <link rel="stylesheet" href="assets/css/amazeui.min.css"> | ||
| <link rel="stylesheet" href="assets/css/app.css"> | ||
| </head> | ||
| <body> | ||
| <!--[if lte IE 9]> | ||
| <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a | ||
| href="http://browsehappy.com/" target="_blank">升级浏览器</a> | ||
| 以获得更好的体验!</p> | ||
| <![endif]--> | ||
|
|
||
| <!-- 页面内容 开发时删除 --> | ||
| <div class="am-g am-g-fixed am-margin-top"> | ||
| <div class="am-u-sm-12"> | ||
| <h1>你好世界!小可 Amaze UI 模板。</h1> | ||
|
|
||
| <p>这是一个基础的页面,引入 Amaze UI 的 css 、js | ||
| 文件。如果你已经熟读文档,使用时删除内容开始开发即可。建议使用前先阅读文档,以提高开发效率。</p> | ||
| </div> | ||
| </div> | ||
| <div class="am-g am-g-fixed am-margin-top"> | ||
| <p class="am-u-sm-12">下载包里面有 4 个常见布局示例,供开发者参考。</p> | ||
|
|
||
| <div class="am-u-sm-12"> | ||
| <div class="am-g"> | ||
| <div class="am-u-sm-12 am-u-md-3"> | ||
| <a href="landing.html"><img class="am-img-thumbnail" | ||
| src="assets/i/examples/landingPage.png" | ||
| alt="展示页面"/></a> | ||
| </div> | ||
| <div class="am-u-sm-12 am-u-md-9"> | ||
| <h3>展示页面</h3> | ||
|
|
||
| <p> | ||
| CSS 部分:<a class="am-badge am-badge-success" href="/css/grid">网格</a> <a | ||
| class="am-badge am-badge-success" href="/css/icon">图标</a> <a | ||
| class="am-badge am-badge-success" href="/css/button">按钮</a> <a | ||
| class="am-badge am-badge-success" href="/css/form">表单</a> <a | ||
| class="am-badge am-badge-success" href="/css/article">文章页</a> <a | ||
| class="am-badge am-badge-success" href="/css/topbar">导航条</a> <a | ||
| class="am-badge am-badge-success" href="/css/utility">辅助类</a><br/> | ||
| JS 插件部分:<a class="am-badge am-badge-primary" | ||
| href="/javascript/dropdown">下拉组件</a> <a | ||
| class="am-badge am-badge-primary" | ||
| href="/javascript/scrollspy">滚动侦测</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-12 am-u-md-3"> | ||
| <a href="login.html"><img class="am-img-thumbnail" | ||
| src="assets/i/examples/loginPage.png" | ||
| alt="登录页面"/></a> | ||
| </div> | ||
| <div class="am-u-sm-12 am-u-md-9"> | ||
| <h3>登录页面</h3> | ||
|
|
||
| <p> | ||
| CSS 部分:<a class="am-badge am-badge-success" href="/css/grid">网格</a> <a | ||
| class="am-badge am-badge-success" href="/css/icon">图标</a> <a | ||
| class="am-badge am-badge-success" href="/css/button">按钮</a> <a | ||
| class="am-badge am-badge-success" href="/css/button-group">按钮组</a> <a | ||
| class="am-badge am-badge-success" href="/css/form">表单</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-12 am-u-md-3"> | ||
| <a href="blog.html"><img class="am-img-thumbnail" | ||
| src="assets/i/examples/blogPage.png" | ||
| alt="博客页面"/></a> | ||
| </div> | ||
| <div class="am-u-sm-12 am-u-md-9"> | ||
| <h3>博客页面</h3> | ||
|
|
||
| <p> | ||
| CSS 部分:<a class="am-badge am-badge-success" href="/css/grid">网格</a> <a | ||
| class="am-badge am-badge-success" href="/css/block-grid">等宽布局</a> <a | ||
| class="am-badge am-badge-success" href="/css/icon">图标</a> <a | ||
| class="am-badge am-badge-success" href="/css/button">按钮</a> <a | ||
| class="am-badge am-badge-success" href="/css/panel">面板</a> <a | ||
| class="am-badge am-badge-success" href="/css/list">列表</a> <a | ||
| class="am-badge am-badge-success" href="/css/pagination">分页</a><br/> | ||
| JS 插件部分:<a class="am-badge am-badge-primary" | ||
| href="/css/dropdown">下拉组件</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="am-g am-margin-top"> | ||
| <div class="am-u-sm-12 am-u-md-3"> | ||
| <a href="sidebar.html"><img class="am-img-thumbnail" | ||
| src="assets/i/examples/sidebarPage.png" | ||
| alt="博客侧栏页面"/></a> | ||
| </div> | ||
| <div class="am-u-sm-12 am-u-md-9"> | ||
| <h3>博客侧栏页面</h3> | ||
|
|
||
| <p> | ||
| CSS 部分:<a class="am-badge am-badge-success" href="/css/grid">网格</a> <a | ||
| class="am-badge am-badge-success" href="/css/article">文章页</a> <a | ||
| class="am-badge am-badge-success" href="/css/comment">评论列表</a> <a | ||
| class="am-badge am-badge-success" href="/css/button">按钮</a> <a | ||
| class="am-badge am-badge-success" href="/css/icon">图标</a> <a | ||
| class="am-badge am-badge-success" href="/css/list">列表</a> <a | ||
| class="am-badge am-badge-success" href="/css/utility">辅助类</a><br/> | ||
| JS 插件部分:<a class="am-badge am-badge-primary" | ||
| href="/javascript/offcanvas">侧边栏组件</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <hr/> | ||
| <h2>Web 组件示例</h2> | ||
| <ul> | ||
| <li><a href="widget.basic.html">widget.basic.html</a> 使用了 <a | ||
| href="http://amazeui.org/widgets">Web 组件</a> 的 HTML 结构和样式,但没用使用模板在前端渲染数据,供通过后端渲染数据的用户参考。</li> | ||
| <li><a href="widget.html">widget.html</a> 是 Web 组件的展示,更多细节查看:<a | ||
| href="http://amazeui.org/widgets">Web 组件</a></li> | ||
| </ul> | ||
| <h3>开始创建你的网页吧。</h3> | ||
| </div> | ||
| </div> | ||
|
|
||
| <footer class="am-margin-top"> | ||
| <hr/> | ||
| <p class="am-text-center"> | ||
| <small>by The AmazeUI Team.</small> | ||
| </p> | ||
| </footer> | ||
| <!-- 以上页面内容 开发时删除 --> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> | ||
| <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> | ||
| <script src="assets/js/amazeui.ie8polyfill.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <!--[if (gte IE 9)|!(IE)]><!--> | ||
| <script src="assets/js/jquery.min.js"></script> | ||
| <!--<![endif]--> | ||
| <script src="assets/js/amazeui.min.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,244 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" | ||
| content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | ||
| <title>豆瓣同城 - 音乐 - 北京 | Just a iScroll Demo</title> | ||
| <link rel="stylesheet" href="assets/css/amazeui.css"/> | ||
| <style> | ||
| html, | ||
| body, | ||
| .page { | ||
| height: 100%; | ||
| } | ||
|
|
||
| #wrapper { | ||
| position: absolute; | ||
| top: 49px; | ||
| bottom: 0; | ||
| overflow: hidden; | ||
| margin: 0; | ||
| width: 100%; | ||
| padding: 0 8px; | ||
| background-color: #f8f8f8; | ||
| } | ||
|
|
||
| .am-list { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .am-list > li { | ||
| background: none; | ||
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); | ||
| } | ||
|
|
||
| .pull-action { | ||
| text-align: center; | ||
| height: 45px; | ||
| line-height: 45px; | ||
| color: #999; | ||
| } | ||
|
|
||
| .pull-action .am-icon-spin { | ||
| display: none; | ||
| } | ||
|
|
||
| .pull-action.loading .am-icon-spin { | ||
| display: block; | ||
| } | ||
|
|
||
| .pull-action.loading .pull-label { | ||
| display: none; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="page"> | ||
| <header data-am-widget="header" class="am-header am-header-default"> | ||
| <h1 class="am-header-title"> | ||
| 同城 - 音乐 | ||
| </h1> | ||
| </header> | ||
|
|
||
| <div id="wrapper" data-am-widget="list_news" | ||
| class="am-list-news am-list-news-default"> | ||
| <div class="am-list-news-bd"> | ||
| <div class="pull-action loading" id="pull-down"> | ||
| <span class="am-icon-arrow-down pull-label" | ||
| id="pull-down-label"> 下拉刷新</span> | ||
| <span class="am-icon-spinner am-icon-spin"></span> | ||
| </div> | ||
| <ul class="am-list" id="events-list"> | ||
| <li class="am-list-item-desced"> | ||
| <div class="am-list-item-text"> | ||
| 正在加载内容... | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| <div class="pull-action" id="pull-up"> | ||
| <span class="am-icon-arrow-down pull-label" | ||
| id="pull-up-label"> 上拉加载更多</span> | ||
| <span class="am-icon-spinner am-icon-spin"></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="assets/js/jquery.min.js"></script> | ||
| <script src="assets/js/handlebars.min.js"></script> | ||
| <script type="text/x-handlebars-template" id="tpi-list-item"> | ||
| {{#each this}} | ||
| <li class="am-list-item-desced" data-id="{{id}}"> | ||
| <a href="{{alt}}" class="am-list-item-hd" target="_blank">{{title}}</a> | ||
|
|
||
| <div class="am-list-item-text">{{content}}</div> | ||
| </li> | ||
| {{/each}} | ||
| </script> | ||
| <script src="assets/js/amazeui.min.js"></script> | ||
| <script> | ||
| (function($) { | ||
| var EventsList = function(element, options) { | ||
| var $main = $('#wrapper'); | ||
| var $list = $main.find('#events-list'); | ||
| var $pullDown = $main.find('#pull-down'); | ||
| var $pullDownLabel = $main.find('#pull-down-label'); | ||
| var $pullUp = $main.find('#pull-up'); | ||
| var topOffset = -$pullDown.outerHeight(); | ||
|
|
||
| this.compiler = Handlebars.compile($('#tpi-list-item').html()); | ||
| this.prev = this.next = this.start = options.params.start; | ||
| this.total = null; | ||
|
|
||
| this.getURL = function(params) { | ||
| var queries = ['callback=?']; | ||
| for (var key in params) { | ||
| if (key !== 'start') { | ||
| queries.push(key + '=' + params[key]); | ||
| } | ||
| } | ||
| queries.push('start='); | ||
| return options.api + '?' + queries.join('&'); | ||
| }; | ||
|
|
||
| this.renderList = function(start, type) { | ||
| var _this = this; | ||
| var $el = $pullDown; | ||
|
|
||
| if (type === 'load') { | ||
| $el = $pullUp; | ||
| } | ||
|
|
||
| $.getJSON(this.URL + start).then(function(data) { | ||
| console.log(data); | ||
| _this.total = data.total; | ||
| var html = _this.compiler(data.events); | ||
| if (type === 'refresh') { | ||
| $list.children('li').first().before(html); | ||
| } else if (type === 'load') { | ||
| $list.append(html); | ||
| } else { | ||
| $list.html(html); | ||
| } | ||
|
|
||
| // refresh iScroll | ||
| setTimeout(function() { | ||
| _this.iScroll.refresh(); | ||
| }, 100); | ||
| }, function() { | ||
| console.log('Error...') | ||
| }).always(function() { | ||
| _this.resetLoading($el); | ||
| if (type !== 'load') { | ||
| _this.iScroll.scrollTo(0, topOffset, 800, $.AMUI.iScroll.utils.circular); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| this.setLoading = function($el) { | ||
| $el.addClass('loading'); | ||
| }; | ||
|
|
||
| this.resetLoading = function($el) { | ||
| $el.removeClass('loading'); | ||
| }; | ||
|
|
||
| this.init = function() { | ||
| var myScroll = this.iScroll = new $.AMUI.iScroll('#wrapper', { | ||
| click: true | ||
| }); | ||
| // myScroll.scrollTo(0, topOffset); | ||
| var _this = this; | ||
| var pullFormTop = false; | ||
| var pullStart; | ||
|
|
||
| this.URL = this.getURL(options.params); | ||
| this.renderList(options.params.start); | ||
|
|
||
| myScroll.on('scrollStart', function() { | ||
| if (this.y >= topOffset) { | ||
| pullFormTop = true; | ||
| } | ||
|
|
||
| pullStart = this.y; | ||
| // console.log(this); | ||
| }); | ||
|
|
||
| myScroll.on('scrollEnd', function() { | ||
| if (pullFormTop && this.directionY === -1) { | ||
| _this.handlePullDown(); | ||
| } | ||
| pullFormTop = false; | ||
|
|
||
| // pull up to load more | ||
| if (pullStart === this.y && (this.directionY === 1)) { | ||
| _this.handlePullUp(); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| this.handlePullDown = function() { | ||
| console.log('handle pull down'); | ||
| if (this.prev > 0) { | ||
| this.setLoading($pullDown); | ||
| this.prev -= options.params.count; | ||
| this.renderList(this.prev, 'refresh'); | ||
| } else { | ||
| console.log('别刷了,没有了'); | ||
| } | ||
| }; | ||
|
|
||
| this.handlePullUp = function() { | ||
| console.log('handle pull up'); | ||
| if (this.next < this.total) { | ||
| this.setLoading($pullUp); | ||
| this.next += options.params.count; | ||
| this.renderList(this.next, 'load'); | ||
| } else { | ||
| console.log(this.next); | ||
| // this.iScroll.scrollTo(0, topOffset); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| $(function() { | ||
| var app = new EventsList(null, { | ||
| api: 'https://api.douban.com/v2/event/list', | ||
| params: { | ||
| start: 100, | ||
| type: 'music', | ||
| count: 10, | ||
| loc: 'beijing' | ||
| } | ||
| }); | ||
| app.init(); | ||
| }); | ||
|
|
||
| document.addEventListener('touchmove', function(e) { | ||
| e.preventDefault(); | ||
| }, false); | ||
| })(window.jQuery); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| <!--http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html--> |
| @@ -0,0 +1,273 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head lang="en"> | ||
| <meta charset="UTF-8"> | ||
| <title>Landing Page | Amaze UI Example</title> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" | ||
| content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
| <meta name="format-detection" content="telephone=no"> | ||
| <meta name="renderer" content="webkit"> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp"/> | ||
| <link rel="alternate icon" type="image/png" href="assets/i/favicon.png"> | ||
| <link rel="stylesheet" href="assets/css/amazeui.min.css"/> | ||
| <style> | ||
| .get { | ||
| background: #1E5B94; | ||
| color: #fff; | ||
| text-align: center; | ||
| padding: 100px 0; | ||
| } | ||
|
|
||
| .get-title { | ||
| font-size: 200%; | ||
| border: 2px solid #fff; | ||
| padding: 20px; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .get-btn { | ||
| background: #fff; | ||
| } | ||
|
|
||
| .detail { | ||
| background: #fff; | ||
| } | ||
|
|
||
| .detail-h2 { | ||
| text-align: center; | ||
| font-size: 150%; | ||
| margin: 40px 0; | ||
| } | ||
|
|
||
| .detail-h3 { | ||
| color: #1f8dd6; | ||
| } | ||
|
|
||
| .detail-p { | ||
| color: #7f8c8d; | ||
| } | ||
|
|
||
| .detail-mb { | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .hope { | ||
| background: #0bb59b; | ||
| padding: 50px 0; | ||
| } | ||
|
|
||
| .hope-img { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .hope-hr { | ||
| border-color: #149C88; | ||
| } | ||
|
|
||
| .hope-title { | ||
| font-size: 140%; | ||
| } | ||
|
|
||
| .about { | ||
| background: #fff; | ||
| padding: 40px 0; | ||
| color: #7f8c8d; | ||
| } | ||
|
|
||
| .about-color { | ||
| color: #34495e; | ||
| } | ||
|
|
||
| .about-title { | ||
| font-size: 180%; | ||
| padding: 30px 0 50px 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .footer p { | ||
| color: #7f8c8d; | ||
| margin: 0; | ||
| padding: 15px 0; | ||
| text-align: center; | ||
| background: #2d3e50; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header class="am-topbar am-topbar-fixed-top"> | ||
| <div class="am-container"> | ||
| <h1 class="am-topbar-brand"> | ||
| <a href="#">Amaze UI</a> | ||
| </h1> | ||
|
|
||
| <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only" | ||
| data-am-collapse="{target: '#collapse-head'}"><span class="am-sr-only">导航切换</span> <span | ||
| class="am-icon-bars"></span></button> | ||
|
|
||
| <div class="am-collapse am-topbar-collapse" id="collapse-head"> | ||
| <ul class="am-nav am-nav-pills am-topbar-nav"> | ||
| <li class="am-active"><a href="#">首页</a></li> | ||
| <li><a href="#">项目</a></li> | ||
| <li class="am-dropdown" data-am-dropdown> | ||
| <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;"> | ||
| 下拉菜单 <span class="am-icon-caret-down"></span> | ||
| </a> | ||
| <ul class="am-dropdown-content"> | ||
| <li class="am-dropdown-header">标题</li> | ||
| <li><a href="#">1. 默认样式</a></li> | ||
| <li><a href="#">2. 基础设置</a></li> | ||
| <li><a href="#">3. 文字排版</a></li> | ||
| <li><a href="#">4. 网格系统</a></li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <div class="am-topbar-right"> | ||
| <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm"><span class="am-icon-pencil"></span> 注册</button> | ||
| </div> | ||
|
|
||
| <div class="am-topbar-right"> | ||
| <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm"><span class="am-icon-user"></span> 登录</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="get"> | ||
| <div class="am-g"> | ||
| <div class="am-u-lg-12"> | ||
| <h1 class="get-title">Amaze UI - HTML5 跨屏前端框架</h1> | ||
|
|
||
| <p> | ||
| 期待你的参与,共同打造一个简单易用的前端框架 | ||
| </p> | ||
|
|
||
| <p> | ||
| <a href="http://amazeui.org" class="am-btn am-btn-sm get-btn">获取新get技能√</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="detail"> | ||
| <div class="am-g am-container"> | ||
| <div class="am-u-lg-12"> | ||
| <h2 class="detail-h2">One Web 、Any Device,期待和你一起去实现!</h2> | ||
|
|
||
| <div class="am-g"> | ||
| <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb"> | ||
|
|
||
| <h3 class="detail-h3"> | ||
| <i class="am-icon-mobile am-icon-sm"></i> | ||
| 为移动而生 | ||
| </h3> | ||
|
|
||
| <p class="detail-p"> | ||
| Amaze UI 采用业内先进的 mobile first 理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。 | ||
| </p> | ||
| </div> | ||
| <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb"> | ||
| <h3 class="detail-h3"> | ||
| <i class="am-icon-cogs am-icon-sm"></i> | ||
| 组件丰富,模块化 | ||
| </h3> | ||
|
|
||
| <p class="detail-p"> | ||
| Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件,更有 17 款包含近 60 个主题的 Widgets,可快速构建界面出色、体验优秀的跨屏页面,大幅度提升你的开发效率。 | ||
| </p> | ||
| </div> | ||
| <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb"> | ||
| <h3 class="detail-h3"> | ||
| <i class="am-icon-check-square-o am-icon-sm"></i> | ||
| 本地化支持 | ||
| </h3> | ||
|
|
||
| <p class="detail-p"> | ||
| 相比国外的前端框架,Amaze UI 专注解决中文排版优化问题,根据操作系统调整字体,实现最佳中文排版效果;针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持,为你节省大量兼容性调试时间。 | ||
| </p> | ||
| </div> | ||
| <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb"> | ||
| <h3 class="detail-h3"> | ||
| <i class="am-icon-send-o am-icon-sm"></i> | ||
| 轻量级,高性能 | ||
| </h3> | ||
|
|
||
| <p class="detail-p"> | ||
| Amaze UI 非常注重性能,基于轻量的 Zepto.js 开发,并使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让你的 Web 应用可以高速载入。 | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="hope"> | ||
| <div class="am-g am-container"> | ||
| <div class="am-u-lg-4 am-u-md-6 am-u-sm-12 hope-img"> | ||
| <img src="assets/i/examples/landing.png" alt="" data-am-scrollspy="{animation:'slide-left', repeat: false}"> | ||
| <hr class="am-article-divider am-show-sm-only hope-hr"> | ||
| </div> | ||
| <div class="am-u-lg-8 am-u-md-6 am-u-sm-12"> | ||
| <h2 class="hope-title">同我们一起打造你的前端框架</h2> | ||
|
|
||
| <p> | ||
| 在知识爆炸的年代,我们不愿成为知识的过客,拥抱开源文化,发挥社区的力量,参与到Amaze Ui开源项目能获得自我提升。 | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="about"> | ||
| <div class="am-g am-container"> | ||
| <div class="am-u-lg-12"> | ||
| <h2 class="about-title about-color">Amaze UI 崇尚开放、自由,非常欢迎大家的参与</h2> | ||
|
|
||
| <div class="am-g"> | ||
| <div class="am-u-lg-6 am-u-md-4 am-u-sm-12"> | ||
| <form class="am-form"> | ||
| <label for="name" class="about-color">你的姓名</label> | ||
| <input id="name" type="text"> | ||
| <br/> | ||
| <label for="email" class="about-color">你的邮箱</label> | ||
| <input id="email" type="email"> | ||
| <br/> | ||
| <label for="message" class="about-color">你的留言</label> | ||
| <textarea id="message"></textarea> | ||
| <br/> | ||
| <button type="submit" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-check"></i> 提 交</button> | ||
| </form> | ||
| <hr class="am-article-divider am-show-sm-only"> | ||
| </div> | ||
|
|
||
| <div class="am-u-lg-6 am-u-md-8 am-u-sm-12"> | ||
| <h4 class="about-color">关于我们</h4> | ||
|
|
||
| <p>AllMobilize Inc (美通云动科技有限公司) | ||
| 由前微软美国总部IE浏览器核心研发团队成员及移动互联网行业专家在美国西雅图创立,旨在解决网页在不同移动设备屏幕上的适配问题。基于国际专利技术并结合最前沿的HTML5技术,云适配解决方案可以帮助企业快速将桌面版网站适配到各种移动设备终端的屏幕上,不仅显著地提高了企业网站的用户体验以及销售转化率,而且大幅度地节省了企业开发和维护移动网站的费用。</p> | ||
| <h4 class="about-color">团队介绍</h4> | ||
|
|
||
| <p>AllMobilize Inc 获得了微软创投孵化器的支持,其领先科技已得到全球多家企业及机构的认可与信赖,客户包括全球500强企业、美国政府、国内政府机关、国内外上市公司、以及互联网标准化组织W3C。</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <footer class="footer"> | ||
| <p>© 2014 <a href="http://www.yunshipei.com" target="_blank">AllMobilize, Inc.</a> Licensed under <a | ||
| href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. by the AmazeUI Team.</p> | ||
| </footer> | ||
|
|
||
| <!--[if lt IE 9]> | ||
| <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> | ||
| <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> | ||
| <script src="assets/js/amazeui.ie8polyfill.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <!--[if (gte IE 9)|!(IE)]><!--> | ||
| <script src="assets/js/jquery.min.js"></script> | ||
| <!--<![endif]--> | ||
| <script src="assets/js/amazeui.min.js"></script> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,69 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head lang="en"> | ||
| <meta charset="UTF-8"> | ||
| <title>Login Page | Amaze UI Example</title> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
| <meta name="format-detection" content="telephone=no"> | ||
| <meta name="renderer" content="webkit"> | ||
| <meta http-equiv="Cache-Control" content="no-siteapp" /> | ||
| <link rel="alternate icon" type="image/png" href="assets/i/favicon.png"> | ||
| <link rel="stylesheet" href="assets/css/amazeui.min.css"/> | ||
| <style> | ||
| .header { | ||
| text-align: center; | ||
| } | ||
| .header h1 { | ||
| font-size: 200%; | ||
| color: #333; | ||
| margin-top: 30px; | ||
| } | ||
| .header p { | ||
| font-size: 14px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="header"> | ||
| <div class="am-g"> | ||
| <h1>Web ide</h1> | ||
| <p>Integrated Development Environment<br/>代码编辑,代码生成,界面设计,调试,编译</p> | ||
| </div> | ||
| <hr /> | ||
| </div> | ||
| <div class="am-g"> | ||
| <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered"> | ||
| <h3>登录</h3> | ||
| <hr> | ||
| <div class="am-btn-group"> | ||
| <a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a> | ||
| <a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i> Google+</a> | ||
| <a href="#" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-stack-overflow am-icon-sm"></i> stackOverflow</a> | ||
| </div> | ||
| <br> | ||
| <br> | ||
|
|
||
| <form method="post" class="am-form"> | ||
| <label for="email">邮箱:</label> | ||
| <input type="email" name="" id="email" value=""> | ||
| <br> | ||
| <label for="password">密码:</label> | ||
| <input type="password" name="" id="password" value=""> | ||
| <br> | ||
| <label for="remember-me"> | ||
| <input id="remember-me" type="checkbox"> | ||
| 记住密码 | ||
| </label> | ||
| <br /> | ||
| <div class="am-cf"> | ||
| <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl"> | ||
| <input type="submit" name="" value="忘记密码 ^_^? " class="am-btn am-btn-default am-btn-sm am-fr"> | ||
| </div> | ||
| </form> | ||
| <hr> | ||
| <p>© 2014 AllMobilize, Inc. Licensed under MIT license.</p> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |