SUI Mobile:侧栏组件的使用
2016-06-13 00:00
381 查看
摘要: 1.使用官方模板;
2.分配侧栏组件的可视区域代码与不可视区域的代码
SUI Mobile的侧栏:
1.官方模板:
2.官方的“侧栏”模板:
3. 需要将这个组件的代码分成两部分的代码:
3.1 可视部分代码:
3.2 不可视部分代码:
3.3 处理可视与不可视的代码:
1)在<!--你的html代码-->中插入“侧栏”组件的html代码;
2)在
3)下面是结合后的代码:
2.分配侧栏组件的可视区域代码与不可视区域的代码
SUI Mobile的侧栏:
1.官方模板:
2.官方的“侧栏”模板:
3. 需要将这个组件的代码分成两部分的代码:
3.1 可视部分代码:
3.2 不可视部分代码:
3.3 处理可视与不可视的代码:
1)在<!--你的html代码-->中插入“侧栏”组件的html代码;
2)在
<div class="page-group">标签外插入“侧栏”组件的不可视部分代码。
3)下面是结合后的代码:
[code=language-html]<div class="page-group"> <!--可视区域--> <div class="page page-current"> <!-- 你的html代码 --> <header class="bar bar-nav"> <h1 class='title'>侧栏</h1> </header> <div class="content"> <div class="content-block"> <p><a href="#" class="button button-fill open-panel" data-panel='#panel-left-demo'>打开左侧栏</a></p> </div> </div> </div> <div class="panel-overlay"></div> <!-- Left Panel with Reveal effect --> <div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'> <div class="content-block"> <p>这是一个侧栏</p> <p>你可以在这里放用户设置页面</p> <p><a href="#" class="close-panel">关闭</a></p> </div> <div class="list-block"> <!-- .... --> </div> </div> <div class="panel panel-right panel-reveal"> <div class="content-block"> <p>这是一个侧栏</p> <!-- Click on link with "close-panel" class will close panel --> <p><a href="#" class="close-panel">关闭</a></p> </div> </div> </div>
相关文章推荐
- [转载]Activity中ConfigChanges属性的用法
- jquery mobile开发常见问题分析
- jquery mobile实现拨打电话功能的几种方法
- jquery Mobile入门―多页面切换示例学习
- JQuery Mobile 弹出式登录框的实现方法
- jqueryMobile 动态添加元素,展示刷新视图的实现方法
- jQuery mobile 移动web(6)
- jQuery Mobile框架中的表单组件基础使用教程
- jQuery Mobile开发中日期插件Mobiscroll使用说明
- Jquery Mobile 自定义按钮图标
- JQuery Mobile实现导航栏和页脚
- 让jQuery Mobile不显示讨厌loading界面的方法
- jquery mobile动态添加元素之后不能正确渲染解决方法说明
- jQuery mobile 移动web(4)
- jQuery Mobile页面返回不需要重新get
- jQuery Mobile弹出窗、弹出层知识汇总
- 详解jQuery Mobile自定义标签
- jquery mobile界面数据刷新的实现方法
- jQuery mobile类库使用时加载导航历史的方法简介
- jquery mobile 移动web(5)