Created
February 25, 2017 00:32
-
-
Save lolocoo/a9a99484f2a0b65404b9d645d2c8b665 to your computer and use it in GitHub Desktop.
sui-offcanvas
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>我的生活</title> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
| <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> | |
| <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> | |
| <style> | |
| .panel { | |
| background: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <header class="bar bar-nav"> | |
| <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'> | |
| <span class="icon icon-left"></span> | |
| 返回 | |
| </a> | |
| <h1 class="title">我的生活</h1> | |
| </header> | |
| <nav class="bar bar-tab"> | |
| <a class="tab-item active" href="#"> | |
| <span class="icon icon-home"></span> | |
| <span class="tab-label">首页</span> | |
| </a> | |
| <a class="tab-item" href="#"> | |
| <span class="icon icon-me"></span> | |
| <span class="tab-label">我</span> | |
| </a> | |
| <a class="tab-item" href="#"> | |
| <span class="icon icon-star"></span> | |
| <span class="tab-label">收藏</span> | |
| </a> | |
| <a class="tab-item" href="#"> | |
| <span class="icon icon-settings"></span> | |
| <span class="tab-label">设置</span> | |
| </a> | |
| </nav> | |
| <div class="content"> | |
| <!-- 这里是页面内容区 --> | |
| <div class="list-block"> | |
| <ul> | |
| <li class="item-content"> | |
| <div class="item-media"><i class="icon icon-f7"></i></div> | |
| <div class="item-inner"> | |
| <div class="item-title">商品名称</div> | |
| <div class="item-after"> | |
| <a href="#" class="open-panel" data-panel='#panel-left-demo'>打开左侧栏</a> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="item-content"> | |
| <div class="item-media"><i class="icon icon-f7"></i></div> | |
| <div class="item-inner"> | |
| <div class="item-title">型号</div> | |
| <div class="item-after">极致超薄型</div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel-overlay"></div> | |
| <div class="panel panel-right panel-reveal" id='panel-left-demo'> | |
| <div class="content-block"> | |
| <div class="list-block"> | |
| <ul> | |
| <li class="item-content"> | |
| <div class="item-media"><i class="icon icon-f7"></i></div> | |
| <div class="item-inner"> | |
| <div class="item-title">商品名称</div> | |
| <div class="item-after"> | |
| 你好世界 | |
| </div> | |
| </div> | |
| </li> | |
| <li class="item-content"> | |
| <div class="item-media"><i class="icon icon-f7"></i></div> | |
| <div class="item-inner"> | |
| <div class="item-title">型号</div> | |
| <div class="item-after">极致超薄型</div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <p><a href="#" class="close-panel">关闭</a></p> | |
| </div> | |
| <div class="list-block"> | |
| <!-- .... --> | |
| </div> | |
| </div> | |
| <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> | |
| <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> | |
| <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment