Skip to content

M
mui
Commit 162bce35 authored by hbcui1984's avatar hbcui1984
Browse files
Options

增加侧滑菜单文档

parent 52170910
Show whitespace changes
Inline Side-by-side
Showing with 176 additions and 139 deletions
javascript/index.html
View file @ 162bce35
...@@ -6,15 +6,15 @@ ...@@ -6,15 +6,15 @@
<title>javascript &middot; MUI</title> <title>javascript &middot; MUI</title>
<meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架"> <meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="viewport" content="initial-scale=1, maximum-scale=1"> <meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="http://dcloudio.github.io/mui/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes"> <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-status-bar-style" content="black">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/dist/css/mui.min.css?v=2014-12-30 21:40:57 +0800"> <link rel="stylesheet" href="/dist/css/mui.min.css?v=2015-01-04 17:19:11 +0800">
<link rel="stylesheet" href="http://dcloudio.github.io/mui/assets/css/docs.css?v=2014-12-30 21:40:57 +0800"> <link rel="stylesheet" href="/assets/css/docs.css?v=2015-01-04 17:19:11 +0800">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://dcloudio.github.io/mui/assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
</head> </head>
...@@ -34,16 +34,16 @@ ...@@ -34,16 +34,16 @@
<div class="container"> <div class="container">
<div class="column"> <div class="column">
<h1 class="docs-title"> <h1 class="docs-title">
<a href="http://dcloudio.github.io/mui/" >MUI</a> <a href="/" >MUI</a>
</h1> </h1>
<nav class="docs-nav mui-clearfix"> <nav class="docs-nav mui-clearfix">
<a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a> <a class="docs-nav-trigger mui-icon mui-icon-bars mui-pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group"> <div class="docs-nav-group">
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/" >首页</a> <a class="docs-nav-item" href="/" >首页</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/getting-started" >新手指南</a> <a class="docs-nav-item" href="/getting-started" >新手指南</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/components" >CSS组件</a> <a class="docs-nav-item" href="/components" >CSS组件</a>
<a class="docs-nav-item" href="http://dcloudio.github.io/mui/javascript" >JavaScript</a> <a class="docs-nav-item" href="/javascript" >JavaScript</a>
<!-- <a class="docs-nav-item" href="http://dcloudio.github.io/mui/about" >关于</a> --> <!-- <a class="docs-nav-item" href="/about" >关于</a> -->
<a class="docs-nav-item" href="https://github.com/dcloudio/mui" >GitHub地址</a> <a class="docs-nav-item" href="https://github.com/dcloudio/mui" >GitHub地址</a>
</div> </div>
</nav> </nav>
...@@ -94,25 +94,32 @@ ...@@ -94,25 +94,32 @@
</style> </style>
<!-- Components --> <!-- Components -->
<div class="docs-components column-group" > <div class="docs-components column-group" >
<!-- 暂时注释，右侧模拟器，这里需要使用导航代替 -->
<!-- In phone examples -->
<!-- <div class="device-column column lg-units-5 mui-pull-right">
<div class="column col-xs-2 lg-units-3" id="scrollspy">
<div class="device js-device"> <div class="sidebar hidden-print hidden-xs hidden-sm">
<div class="device-content"> <ul class="nav sidenav" id="nav" data-spy="affix" data-offset-top="250">
<div id="iwindow"> <li class="active"><a href="#pageinit">页面初始化</a></li>
<header class="mui-bar mui-bar-nav"> <li><a href="#subpage">创建子页面</a></li>
<h1 class="mui-title">Title</h1> <li><a href="#openwindow">打开新页面</a></li>
</header> <li><a href="#closewindow">关闭页面</a></li>
</div> <li><a href="#ajax">AJAX</a></li>
<li><a href="#gesture">手势事件</a></li>
<li><a href="#preload">预加载</a></li>
<li><a href="#pullrefresh-down">下拉刷新</a></li>
<li><a href="#pullrefresh-up">上拉加载</a></li>
<li><a href="#input">输入增强</a></li>
<li><a href="#switch">开关事件</a></li>
<li><a href="#slide">slide事件</a></li>
<li><a href="#customevent">自定义事件</a></li>
<li><a href="#plugin-slider">图片轮播</a></li>
<li><a href="#plugin-offcanvas">侧滑菜单</a></li>
<li><a href="#plugin-popover">弹出菜单</a></li>
<li><a href="#mask">遮罩蒙版</a></li>
</ul>
</div> </div>
</div> </div>
</div>-->
<div class="column lg-units-9 docs-content"> <div class="column col-xs-10 lg-units-9 docs-content" style="float:right">
<!-- 页面初始化 --> <!-- 页面初始化 -->
<article class="component mui-active" id="pageinit"> <article class="component mui-active" id="pageinit">
<h3 class="component-title">页面初始化</h3> <h3 class="component-title">页面初始化</h3>
...@@ -149,18 +156,18 @@ mui的解决思路是：将需要滚动的区域通过单独的webview实现， ...@@ -149,18 +156,18 @@ mui的解决思路是：将需要滚动的区域通过单独的webview实现，
<p class="component-description"><strong>示例：</strong>Hello mui的首页其实就是index.html加list.html合并而成的，如下：</p> <p class="component-description"><strong>示例：</strong>Hello mui的首页其实就是index.html加list.html合并而成的，如下：</p>
<div id="subpage-demo" style="height:324px"> <div id="subpage-demo" style="height:324px">
<div> <div>
<img src="http://dcloudio.github.io/mui/assets/img/hello-mui-index.png" alt="" style="border-color:blue;"> <img src="/assets/img/hello-mui-index.png" alt="" style="border-color:blue;">
<div class="pagename">index.html</div> <div class="pagename">index.html</div>
</div> </div>
<div class="subpage-tip" >+</div> <div class="subpage-tip" >+</div>
<div> <div>
<img src="http://dcloudio.github.io/mui/assets/img/hello-mui-list.png" alt="" style="border-color:red;margin-top:36px;"> <img src="/assets/img/hello-mui-list.png" alt="" style="border-color:red;margin-top:36px;">
<div class="pagename">list.html</div> <div class="pagename">list.html</div>
</div> </div>
<div class="subpage-tip">=</div> <div class="subpage-tip">=</div>
<div> <div>
<div id="hello-mui-index" style="border:1px solid blue;"> <div id="hello-mui-index" style="border:1px solid blue;">
<img src="http://dcloudio.github.io/mui/assets/img/hello-mui-list.png" alt="" style="margin-top:29px;border-color:red;max-width:190px;height:257px"> <img src="/assets/img/hello-mui-list.png" alt="" style="margin-top:29px;border-color:red;max-width:190px;height:257px">
</div> </div>
<div class="pagename">合并后的首页</div> <div class="pagename">合并后的首页</div>
</div> </div>
...@@ -886,6 +893,106 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -886,6 +893,106 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-slider-item-duplicate&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item mui-slider-item-duplicate&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;1.jpg&quot;</span> <span class="nt">/&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
</article>
<!-- 侧滑菜单 -->
<article id="plugin-offcanvas" class="component mui-active">
<h3 class="component-title">侧滑导航</h3>
<p class="component-description">mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。</p>
<h4 class="component-title">webview模式</h4>
<p class="component-description">主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：</p>
<ul>
<li>菜单内容是单独的webview，故可被多个页面复用；</li>
<li>菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅；</li>
</ul>
<p class="component-description">另一方面，webview模式也有其缺点：</p>
<ul>
<li>不支持拖动手势（跟手拖动）；</li>
<li>主页面、菜单不同webview实现，因此若需交互（如：点击菜单触发主页面内容变化），需使用<a href="#customevent">自定义事件</a>实现跨webview通讯；</li>
</ul>
<h4 class="component-title">div模式</h4>
<p class="component-description">
主页面和菜单内容在同一个webview下，嵌套在特定结构的div中，通过div的移动动画模拟菜单移动；故该模式有如下优点：
</p>
<ul>
<li>支持拖动手势（跟手拖动）；</li>
<li>主页面、菜单在一个页面中，可通过JS轻松实现两者交互（如：点击菜单触发主页面内容变化），没有跨webview通讯的烦恼；</li>
</ul>
<p class="component-description">另一方面，div模式也有其缺点：</p>
<ul>
<li>不支持菜单内容在多页面的复用，需每个页面都生成对应的菜单节点；</li>
<li>主界面和菜单内容的滚动互不影响，因此会使用div区域滚动，在低端Android手机且滚动内容较多时，可能会稍显卡顿；</li>
</ul>
<p class="component-description">div模式支持不同的动画效果，每种动画效果需遵从不同的DOM构造；下面我们以右滑菜单为例（左滑菜单仅需将菜单父节点上的<code>mui-off-canvas-left</code>换成<code>mui-off-canvas-right</code>即可），说明每种动画对应的DOM结构。</p>
<strong>动画1：主界面移动、菜单不动</strong>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- 侧滑导航根容器 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-off-canvas-wrap mui-draggable&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- 菜单容器 --&gt;</span>
<span class="nt">&lt;aside</span> <span class="na">class=</span><span class="s">&quot;mui-off-canvas-left&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-scroll-wrapper&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-scroll&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- 菜单具体展示内容 --&gt;</span>
...
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
<span class="c">&lt;!-- 主页面容器 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-inner-wrap&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- 主页面标题 --&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-action-menu mui-icon-bars mui-pull-left&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>标题<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-content mui-scroll-wrapper&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-scroll&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- 主界面具体展示内容 --&gt;</span>
...
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<strong>动画2：主界面不动、菜单移动</strong>
<p class="component-description">该种动画要求的DOM结构和动画1的DOM结构基本相同，唯一差别就是需在侧滑导航根容器class上增加一个<code>mui-slide-in</code>类</p>
<strong>动画3：主界面、菜单同时移动</strong>
<p class="component-description">该种动画要求的DOM结构较特殊，需将菜单容器放在主页面容器之下</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- 侧滑导航根容器 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-off-canvas-wrap mui-draggable&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- 主页面容器 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-inner-wrap&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- 菜单容器 --&gt;</span>
<span class="nt">&lt;aside</span> <span class="na">class=</span><span class="s">&quot;mui-off-canvas-left&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-scroll-wrapper&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-scroll&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- 菜单具体展示内容 --&gt;</span>
...
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
<span class="c">&lt;!-- 主页面标题 --&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-action-menu mui-icon-bars mui-pull-left&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>标题<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="c">&lt;!-- 主页面内容容器 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-content mui-scroll-wrapper&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-scroll&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- 主界面具体展示内容 --&gt;</span>
...
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<p class="component-description">mui支持多种方式显示div模式的侧滑菜单：1、在主界面向右拖动（drag）；2、点击含有<code>mui-action-menu</code>类的控件；3、Android手机按menu键；4、通过JS API触发，如下：</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">mui</span><span class="p">(</span><span class="s1">&#39;.mui-off-canvas-wrap&#39;</span><span class="p">).</span><span class="nx">offCanvas</span><span class="p">(</span><span class="s1">&#39;show&#39;</span><span class="p">);</span></code></pre></div>
<p class="component-description">同样，mui支持多种方式关闭div模式的侧滑菜单：1、在手机屏幕上任意位置向左拖动（drag）；2、点击主界面内任意位置；3、Android手机按menu键；4、Android手机按back键；5、通过JS API触发，如下：</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">mui</span><span class="p">(</span><span class="s1">&#39;.mui-off-canvas-wrap&#39;</span><span class="p">).</span><span class="nx">offCanvas</span><span class="p">(</span><span class="s1">&#39;close&#39;</span><span class="p">);</span></code></pre></div>
<style>
.docs-content h4{
font-size: 1.15em;
}
</style>
</article> </article>
<!-- 弹出菜单 --> <!-- 弹出菜单 -->
<article id="plugin-popover" class="component mui-active"> <article id="plugin-popover" class="component mui-active">
...@@ -929,7 +1036,6 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -929,7 +1036,6 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<span class="k">background-color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">3</span><span class="p">);</span> <span class="k">background-color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">3</span><span class="p">);</span>
<span class="p">}</span></code></pre></div> <span class="p">}</span></code></pre></div>
</article> </article>
<!-- Footer --> <!-- Footer -->
<div class="docs-footer"> <div class="docs-footer">
<p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a> <p class="docs-footer-text">mui遵循 <a href="https://github.com/dcloudio/mui/blob/master/LICENSE">MIT License</a>
...@@ -947,10 +1053,10 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级 ...@@ -947,10 +1053,10 @@ mui的解决思路是：单webview只承载单个页面的dom，减少dom层级
<li>&middot;</li> <li>&middot;</li>
</ul> </ul>
</div> </div>
<script src="http://dcloudio.github.io/mui/dist/js/jquery-2.1.1.js"></script> <script src="/dist/js/jquery-2.1.1.js"></script>
<script src="http://dcloudio.github.io/mui/dist/js/bootstrap.min.js"></script> <script src="/dist/js/bootstrap.min.js"></script>
<script src="http://dcloudio.github.io/mui/dist/js/mui.min.js?v=2014-12-30 21:40:57 +0800"></script> <script src="/dist/js/mui.min.js?v=2015-01-04 17:19:11 +0800"></script>
<script src="http://dcloudio.github.io/mui/assets/js/docs.min.js?v=2014-12-30 21:40:57 +0800"></script> <script src="/assets/js/docs.min.js?v=2015-01-04 17:19:11 +0800"></script>
<script type="text/javascript"> <script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffff299fda9ff2d5ac97d9e621f738e52' type='text/javascript'%3E%3C/script%3E")); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffff299fda9ff2d5ac97d9e621f738e52' type='text/javascript'%3E%3C/script%3E"));
...@@ -958,82 +1064,13 @@ document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3 ...@@ -958,82 +1064,13 @@ document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3
</div> </div>
<style>
@media (min-width: 768px){
.sidebar {
padding-left: 20px;
}
}
.sidenav {
margin-top: 20px;
margin-bottom: 20px;
}
.sidebar .nav>li>a {
display: block;
padding: 4px 20px;
font-size: 13px;
font-weight: 500;
color: #999;
}
.sidebar .nav>.active>a,
.sidebar .nav>.active:hover>a,
.sidebar .nav>.active:focus>a {
padding-left: 18px;
font-weight: 700;
color: #d64c28;
background-color: transparent;
border-left: 2px solid #d64c28;
}
.affix{
position: fixed;
top:10px;
}
.sidebar .nav .nav>li>a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 30px;
font-size: 12px;
font-weight: 400;
}
</style>
<div class="column lg-units-3" id="scrollspy">
<div class="sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav sidenav" id="nav" data-spy="affix" data-offset-top="250">
<li class="active"><a href="#pageinit">页面初始化</a></li>
<li><a href="#subpage">创建子页面</a></li>
<li><a href="#openwindow">打开新页面</a></li>
<li><a href="#closewindow">关闭页面</a></li>
<li><a href="#ajax">AJAX</a></li>
<li><a href="#gesture">手势事件</a></li>
<li><a href="#preload">预加载</a></li>
<li><a href="#pullrefresh-down">下拉刷新</a></li>
<li><a href="#pullrefresh-up">上拉加载</a></li>
<li><a href="#input">输入增强</a></li>
<li><a href="#switch">开关事件</a></li>
<li><a href="#slide">slide事件</a></li>
<li><a href="#customevent">自定义事件</a></li>
<li><a href="#plugin-slider">图片轮播</a></li>
<li><a href="#plugin-popover">弹出菜单</a></li>
<li><a href="#mask">遮罩蒙版</a></li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
$("body").attr("data-spy","scroll").attr("data-target","#scrollspy"); $("body").attr("data-spy","scroll").attr("data-target","#scrollspy");
// $("#nav").affix({ });
// offset: {
// top: 10
// }
// });
});
</script> </script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment