HUI 通过 .hui-header 样式完成头部布局:
<header class="hui-header"> <div id="hui-back"></div> <h1>这里是标题</h1> <div id="hui-header-menu"></div> </header>
效果图
示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>HUI </title> <link rel="stylesheet" type="text/css" href="../css/hui.css" /> </head> <body> <header class="hui-header"> <div id="hui-back"></div> <h1>HUI </h1> <div id="hui-header-menu"></div> </header> <div class="hui-wrap"> <div class="hui-center-title" style="margin-top:15px;"><h1>演示样例</h1></div> <div style="padding:28px; text-align:center;" class="hui-text"> 点击右上角的菜单按钮来体验效果吧! </div> </div> <script type="text/javascript" src="../js/hui.js"></script> <script type="text/javascript"> var meuns = ['我的订单', '我的消息', '我的收藏', '退出登录']; var cancel = '关闭菜单'; hui('#hui-header-menu').click(function(){ hui.actionSheet(meuns, cancel, function(e){ console.log(e.index); hui.toast(e.innerHTML); }); }); </script> </body> </html>