diff --git a/dist/example/example.js b/dist/example/example.js
index 8a494d5..01d51d7 100644
--- a/dist/example/example.js
+++ b/dist/example/example.js
@@ -170,255 +170,122 @@ $(function () {
         }
     };
     var pages = {}, tpls = $('script[type="text/html"]');
-    window.home = function(){
-        location.hash = '';
-    };
 
-    for (var i = 0, len = tpls.length; i < len; ++i) {
-        var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
-        pages[name] = {
-            name: name,
-            url: '#' + name,
-            template: '#' + tpl.id
+    function preload(){
+        $(window).on("load", function(){
+            var imgList = [
+                "./images/layers/content.png",
+                "./images/layers/navigation.png",
+                "./images/layers/popout.png",
+                "./images/layers/transparent.gif"
+            ];
+            for (var i = 0, len = imgList.length; i < len; ++i) {
+                new Image().src = imgList[i];
+            }
+        });
+    }
+    function androidInputBugFix(){
+        // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
+        // 相关 issue: https://github.com/weui/weui/issues/15
+        // 解决方法:
+        // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
+        // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
+        //    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
+        if (/Android/gi.test(navigator.userAgent)) {
+            window.addEventListener('resize', function () {
+                if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
+                    window.setTimeout(function () {
+                        document.activeElement.scrollIntoViewIfNeeded();
+                    }, 0);
+                }
+            })
+        }
+    }
+    function setJSAPI(){
+        $.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
+            wx.config({
+                beta: true,
+                debug: false,
+                appId: res.appid,
+                timestamp: res.timestamp,
+                nonceStr: res.nonceStr,
+                signature: res.signature,
+                jsApiList: [
+                    'onMenuShareTimeline',
+                    'onMenuShareAppMessage',
+                    'onMenuShareQQ',
+                    'onMenuShareWeibo',
+                    'onMenuShareQZone',
+                    // 'setNavigationBarColor',
+                    'setBounceBackground'
+                ]
+            });
+            wx.ready(function () {
+                /*
+                 wx.invoke('setNavigationBarColor', {
+                 color: '#F8F8F8'
+                 });
+                 */
+                wx.invoke('setBounceBackground', {
+                    'backgroundColor': '#F8F8F8',
+                    'footerBounceColor' : '#F8F8F8'
+                });
+
+                wx.onMenuShareAppMessage({
+                    title: 'WeUI',
+                    desc: '为微信 Web 服务量身设计',
+                    link: location.href,
+                    imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
+                });
+                wx.onMenuShareTimeline({
+                    title: 'WeUI, 为微信 Web 服务量身设计',
+                    desc: 'WeUI, 为微信 Web 服务量身设计',
+                    link: "https://weui.io",
+                    imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
+                });
+                wx.onMenuShareQQ(option);
+            });
+        });
+    }
+    function setPageManager(){
+        for (var i = 0, len = tpls.length; i < len; ++i) {
+            var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
+            pages[name] = {
+                name: name,
+                url: '#' + name,
+                template: '#' + tpl.id
+            };
+        }
+        pages.home.url = '#';
+
+        for (var page in pages) {
+            pageManager.push(pages[page]);
+        }
+        pageManager
+            .setPageAppend(function($html){
+                var $foot = $html.find('.page__ft');
+                if($foot.length < 1) return;
+
+                if($foot.position().top + $foot.height() < winH){
+                    $foot.addClass('j_bottom');
+                }else{
+                    $foot.removeClass('j_bottom');
+                }
+            })
+            .setDefault('home')
+            .init();
+    }
+
+    function init(){
+        preload();
+        androidInputBugFix();
+        setJSAPI();
+        setPageManager();
+
+        window.pageManager = pageManager;
+        window.home = function(){
+            location.hash = '';
         };
     }
-
-    pages.home.url = '#';
-    pages.home.events = {
-        '.js_item': {
-            click: function (e) {
-                var id = $(this).data('id');
-                pageManager.go(id);
-            }
-        },
-        '.js_category': {
-            click: function(){
-                var winH = $(window).height();
-                var categorySpace = 10;
-                return function(){
-                    var $this = $(this),
-                        $inner = $this.next('.js_categoryInner'),
-                        $page = $this.parents('.page'),
-                        $parent = $(this).parent('li');
-                    var innerH = $inner.data('height');
-
-                    if(!innerH){
-                        $inner.css('height', 'auto');
-                        innerH = $inner.height();
-                        $inner.removeAttr('style');
-                        $inner.data('height', innerH);
-                    }
-
-                    if($parent.hasClass('js_show')){
-                        $parent.removeClass('js_show');
-                    }else{
-                        $parent.siblings().removeClass('js_show');
-
-                        if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
-                            $page.scrollTop(this.offsetTop + this.offsetHeight + innerH - winH + categorySpace);
-                        }
-                        $parent.addClass('js_show');
-                    }
-                };
-            }()
-        }
-    };
-
-    pages.input.events = {
-        '#showTooltips': {
-            click: function () {
-                var $tooltips = $('.js_tooltips');
-                if ($tooltips.css('display') != 'none') {
-                    return;
-                }
-
-                // 如果有`animation`, `position: fixed`不生效
-                $('.page.cell').removeClass('slideIn');
-                $tooltips.css('display', 'block');
-                setTimeout(function () {
-                    $tooltips.css('display', 'none');
-                }, 2000);
-            }
-        }
-    };
-    pages.toast.events = {
-        '#showToast': {
-            click: function (e) {
-                var $toast = $('#toast');
-                if ($toast.css('display') != 'none') {
-                    return;
-                }
-
-                $toast.fadeIn(100);
-                setTimeout(function () {
-                    $toast.fadeOut(100);
-                }, 2000);
-            }
-        },
-        '#showLoadingToast': {
-            click: function (e) {
-                var $loadingToast = $('#loadingToast');
-                if ($loadingToast.css('display') != 'none') {
-                    return;
-                }
-
-                $loadingToast.fadeIn(100);
-                setTimeout(function () {
-                    $loadingToast.fadeOut(100);
-                }, 2000);
-            }
-        }
-    };
-    pages.dialog.events = {
-        '#showDialog1': {
-            click: function (e) {
-                var $dialog = $('#dialog1');
-                $dialog.fadeIn(200);
-                $dialog.find('.weui-dialog__btn').one('click', function () {
-                    $dialog.fadeOut(200);
-                });
-            }
-        },
-        '#showDialog2': {
-            click: function (e) {
-                var $dialog = $('#dialog2');
-                $dialog.fadeIn(200);
-                $dialog.find('.weui-dialog__btn').one('click', function () {
-                    $dialog.fadeOut(200);
-                });
-            }
-        },
-        '#showDialog3': {
-            click: function (e) {
-                var $dialog = $('#dialog3');
-                $dialog.fadeIn(200);
-                $dialog.find('.weui-dialog__btn').one('click', function () {
-                    $dialog.fadeOut(200);
-                });
-            }
-        },
-        '#showDialog4': {
-            click: function (e) {
-                var $dialog = $('#dialog4');
-                $dialog.fadeIn(200);
-                $dialog.find('.weui-dialog__btn').one('click', function () {
-                    $dialog.fadeOut(200);
-                });
-            }
-        }
-    };
-    pages.progress.events = {
-        '#btnStartProgress': {
-            click: function () {
-
-                if ($(this).hasClass('weui-btn_disabled')) {
-                    return;
-                }
-
-                $(this).addClass('weui-btn_disabled');
-
-                var progress = 0;
-                var $progress = $('.js_progress');
-
-                function next() {
-                    $progress.css({width: progress + '%'});
-                    progress = ++progress % 100;
-                    setTimeout(next, 30);
-                }
-
-                next();
-            }
-        }
-    };
-
-    for (var page in pages) {
-        pageManager.push(pages[page]);
-    }
-    pageManager
-        .setPageAppend(function($html){
-            var $foot = $html.find('.page__ft');
-            if($foot.length < 1) return;
-
-            if($foot.position().top + $foot.height() < winH){
-                $foot.addClass('j_bottom');
-            }else{
-                $foot.removeClass('j_bottom');
-            }
-        })
-        .setDefault('home')
-        .init();
-
-    $.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
-        wx.config({
-            beta: true,
-            debug: false,
-            appId: res.appid,
-            timestamp: res.timestamp,
-            nonceStr: res.nonceStr,
-            signature: res.signature,
-            jsApiList: [
-                'onMenuShareTimeline',
-                'onMenuShareAppMessage',
-                'onMenuShareQQ',
-                'onMenuShareWeibo',
-                'onMenuShareQZone',
-                // 'setNavigationBarColor',
-                'setBounceBackground'
-            ]
-        });
-        wx.ready(function () {
-            /*
-            wx.invoke('setNavigationBarColor', {
-                color: '#F8F8F8'
-            });
-             */
-            wx.invoke('setBounceBackground', {
-                'backgroundColor': '#F8F8F8',
-                'footerBounceColor' : '#F8F8F8'
-            });
-
-            wx.onMenuShareAppMessage({
-                title: 'WeUI',
-                desc: '为微信 Web 服务量身设计',
-                link: location.href,
-                imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
-            });
-            wx.onMenuShareTimeline({
-                title: 'WeUI, 为微信 Web 服务量身设计',
-                desc: 'WeUI, 为微信 Web 服务量身设计',
-                link: "https://weui.io",
-                imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
-            });
-            wx.onMenuShareQQ(option);
-        });
-    });
-
-    // preload
-    $(window).on("load", function(){
-        var imgList = [
-            "./images/layers/content.png",
-            "./images/layers/navigation.png",
-            "./images/layers/popout.png",
-            "./images/layers/transparent.gif"
-        ];
-        for (var i = 0, len = imgList.length; i < len; ++i) {
-            new Image().src = imgList[i];
-        }
-    });
-
-    // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
-    // 相关 issue: https://github.com/weui/weui/issues/15
-    // 解决方法:
-    // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
-    // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
-    //    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
-    if (/Android/gi.test(navigator.userAgent)) {
-        window.addEventListener('resize', function () {
-            if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
-                window.setTimeout(function () {
-                    document.activeElement.scrollIntoViewIfNeeded();
-                }, 0);
-            }
-        })
-    }
+    init();
 });
\ No newline at end of file
diff --git a/dist/example/index.html b/dist/example/index.html
index 6002b85..c083031 100644
--- a/dist/example/index.html
+++ b/dist/example/index.html
@@ -210,6 +210,42 @@
         <a href="javascript:home()"><img src="./images/icon_footer.png" /></a>
     </div>
 </div>
+<script type="text/javascript">
+    $(function(){
+        var winH = $(window).height();
+        var categorySpace = 10;
+
+        $('.js_item').on('click', function(){
+            var id = $(this).data('id');
+            window.pageManager.go(id);
+        });
+        $('.js_category').on('click', function(){
+            var $this = $(this),
+                $inner = $this.next('.js_categoryInner'),
+                $page = $this.parents('.page'),
+                $parent = $(this).parent('li');
+            var innerH = $inner.data('height');
+
+            if(!innerH){
+                $inner.css('height', 'auto');
+                innerH = $inner.height();
+                $inner.removeAttr('style');
+                $inner.data('height', innerH);
+            }
+
+            if($parent.hasClass('js_show')){
+                $parent.removeClass('js_show');
+            }else{
+                $parent.siblings().removeClass('js_show');
+
+                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
+                    $page.scrollTop(this.offsetTop + this.offsetHeight + innerH - winH + categorySpace);
+                }
+                $parent.addClass('js_show');
+            }
+        });
+    });
+</script>
 </script>
     <script type="text/html" id="tpl_button">
 <div class="page">
@@ -533,6 +569,23 @@
         <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
     </div>
 </div>
+<script type="text/javascript">
+    $(function(){
+        var $tooltips = $('.js_tooltips');
+
+        $('#showTooltips').on('click', function(){
+            if ($tooltips.css('display') != 'none') return;
+
+            // toptips的fixed, 如果有`animation`, `position: fixed`不生效
+            $('.page.cell').removeClass('slideIn');
+
+            $tooltips.css('display', 'block');
+            setTimeout(function () {
+                $tooltips.css('display', 'none');
+            }, 2000);
+        });
+    });
+</script>
 </script>
     <script type="text/html" id="tpl_toast">
 <div class="page">
@@ -567,6 +620,33 @@
         </div>
     </div>
 </div>
+<script type="text/javascript">
+    // toast
+    $(function(){
+        var $toast = $('#toast');
+        $('#showToast').on('click', function(){
+            if ($toast.css('display') != 'none') return;
+
+            $toast.fadeIn(100);
+            setTimeout(function () {
+                $toast.fadeOut(100);
+            }, 2000);
+        });
+    });
+
+    // loading
+    $(function(){
+        var $loadingToast = $('#loadingToast');
+        $('#showLoadingToast').on('click', function(){
+            if ($loadingToast.css('display') != 'none') return;
+
+            $loadingToast.fadeIn(100);
+            setTimeout(function () {
+                $loadingToast.fadeOut(100);
+            }, 2000);
+        });
+    });
+</script>
 </script>
     <script type="text/html" id="tpl_dialog">
 <div class="page">
@@ -575,69 +655,96 @@
         <p class="page__desc">对话框</p>
     </div>
     <div class="page__bd page__bd_spacing">
-        <a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog1">iOS Dialog样式一</a>
-        <a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog2">iOS Dialog样式二</a>
-        <a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog3">Android Dialog样式一</a>
-        <a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog4">Android Dialog样式二</a>
+        <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
+        <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
+        <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
+        <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog2">Android Dialog样式二</a>
     </div>
     <div class="page__ft">
         <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
     </div>
 
-    <!--BEGIN dialog1-->
-    <div id="dialog1" style="display: none;">
-        <div class="weui-mask"></div>
-        <div class="weui-dialog">
-            <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
-            <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
-            <div class="weui-dialog__ft">
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+    <div id="dialogs">
+        <!--BEGIN dialog1-->
+        <div class="js_dialog" id="iosDialog1" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog">
+                <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
+                <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
+                <div class="weui-dialog__ft">
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+                </div>
             </div>
         </div>
-    </div>
-    <!--END dialog1-->
-    <!--BEGIN dialog2-->
-    <div id="dialog2" style="display: none;">
-        <div class="weui-mask"></div>
-        <div class="weui-dialog">
-            <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
-            <div class="weui-dialog__ft">
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
+        <!--END dialog1-->
+        <!--BEGIN dialog2-->
+        <div class="js_dialog" id="iosDialog2" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog">
+                <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
+                <div class="weui-dialog__ft">
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
+                </div>
             </div>
         </div>
-    </div>
-    <!--END dialog2-->
-    <!--BEGIN dialog3-->
-    <div id="dialog3" style="display: none;">
-        <div class="weui-mask"></div>
-        <div class="weui-dialog weui-skin_android">
-            <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
-            <div class="weui-dialog__bd">
-                弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
-            </div>
-            <div class="weui-dialog__ft">
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+        <!--END dialog2-->
+        <!--BEGIN dialog3-->
+        <div class="js_dialog" id="androidDialog1" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog weui-skin_android">
+                <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
+                <div class="weui-dialog__bd">
+                    弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
+                </div>
+                <div class="weui-dialog__ft">
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+                </div>
             </div>
         </div>
-    </div>
-    <!--END dialog3-->
-    <!--BEGIN dialog4-->
-    <div id="dialog4" style="display: none;">
-        <div class="weui-mask"></div>
-        <div class="weui-dialog weui-skin_android">
-            <div class="weui-dialog__bd">
-                弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
-            </div>
-            <div class="weui-dialog__ft">
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+        <!--END dialog3-->
+        <!--BEGIN dialog4-->
+        <div class="js_dialog" id="androidDialog2" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog weui-skin_android">
+                <div class="weui-dialog__bd">
+                    弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
+                </div>
+                <div class="weui-dialog__ft">
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+                </div>
             </div>
         </div>
+        <!--END dialog4-->
     </div>
-    <!--END dialog4-->
 </div>
+<script type="text/javascript">
+    $(function(){
+        var $iosDialog1 = $('#iosDialog1'),
+            $iosDialog2 = $('#iosDialog2'),
+            $androidDialog1 = $('#androidDialog1'),
+            $androidDialog2 = $('#androidDialog2');
+
+        $('#dialogs').on('click', '.weui-dialog__btn', function(){
+            $(this).parents('.js_dialog').fadeOut(200);
+        });
+
+        $('#showIOSDialog1').on('click', function(){
+            $iosDialog1.fadeIn(200);
+        });
+        $('#showIOSDialog2').on('click', function(){
+            $iosDialog2.fadeIn(200);
+        });
+        $('#showAndroidDialog1').on('click', function(){
+            $androidDialog1.fadeIn(200);
+        });
+        $('#showAndroidDialog2').on('click', function(){
+            $androidDialog2.fadeIn(200);
+        });
+    });
+</script>
 </script>
     <script type="text/html" id="tpl_progress">
 <div class="page">
@@ -673,13 +780,38 @@
             </a>
         </div>
         <div class="weui-btn-area">
-            <a href="javascript:;" class="weui-btn weui-btn_primary" id="btnStartProgress">上传</a>
+            <a href="javascript:;" class="weui-btn weui-btn_primary" id="btnUpload">上传</a>
         </div>
     </div>
     <div class="page__ft">
         <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
     </div>
 </div>
+<script type="text/javascript">
+    $(function(){
+        var $progress = $('.js_progress'),
+            $btnUpload = $('#btnUpload');
+        var progress = 0;
+
+        function next() {
+            if(progress > 100){
+                progress = 0;
+                $btnUpload.removeClass('weui-btn_disabled');
+                return;
+            }
+            $progress.css({width: progress + '%'});
+            progress = ++progress;
+            setTimeout(next, 20);
+        }
+
+        $btnUpload.on('click', function(){
+            if ($btnUpload.hasClass('weui-btn_disabled')) return;
+
+            $btnUpload.addClass('weui-btn_disabled');
+            next();
+        });
+    });
+</script>
 </script>
     <script type="text/html" id="tpl_msg">
 <div class="page">
diff --git a/src/example/example.js b/src/example/example.js
index 8a494d5..01d51d7 100644
--- a/src/example/example.js
+++ b/src/example/example.js
@@ -170,255 +170,122 @@ $(function () {
         }
     };
     var pages = {}, tpls = $('script[type="text/html"]');
-    window.home = function(){
-        location.hash = '';
-    };
 
-    for (var i = 0, len = tpls.length; i < len; ++i) {
-        var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
-        pages[name] = {
-            name: name,
-            url: '#' + name,
-            template: '#' + tpl.id
+    function preload(){
+        $(window).on("load", function(){
+            var imgList = [
+                "./images/layers/content.png",
+                "./images/layers/navigation.png",
+                "./images/layers/popout.png",
+                "./images/layers/transparent.gif"
+            ];
+            for (var i = 0, len = imgList.length; i < len; ++i) {
+                new Image().src = imgList[i];
+            }
+        });
+    }
+    function androidInputBugFix(){
+        // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
+        // 相关 issue: https://github.com/weui/weui/issues/15
+        // 解决方法:
+        // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
+        // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
+        //    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
+        if (/Android/gi.test(navigator.userAgent)) {
+            window.addEventListener('resize', function () {
+                if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
+                    window.setTimeout(function () {
+                        document.activeElement.scrollIntoViewIfNeeded();
+                    }, 0);
+                }
+            })
+        }
+    }
+    function setJSAPI(){
+        $.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
+            wx.config({
+                beta: true,
+                debug: false,
+                appId: res.appid,
+                timestamp: res.timestamp,
+                nonceStr: res.nonceStr,
+                signature: res.signature,
+                jsApiList: [
+                    'onMenuShareTimeline',
+                    'onMenuShareAppMessage',
+                    'onMenuShareQQ',
+                    'onMenuShareWeibo',
+                    'onMenuShareQZone',
+                    // 'setNavigationBarColor',
+                    'setBounceBackground'
+                ]
+            });
+            wx.ready(function () {
+                /*
+                 wx.invoke('setNavigationBarColor', {
+                 color: '#F8F8F8'
+                 });
+                 */
+                wx.invoke('setBounceBackground', {
+                    'backgroundColor': '#F8F8F8',
+                    'footerBounceColor' : '#F8F8F8'
+                });
+
+                wx.onMenuShareAppMessage({
+                    title: 'WeUI',
+                    desc: '为微信 Web 服务量身设计',
+                    link: location.href,
+                    imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
+                });
+                wx.onMenuShareTimeline({
+                    title: 'WeUI, 为微信 Web 服务量身设计',
+                    desc: 'WeUI, 为微信 Web 服务量身设计',
+                    link: "https://weui.io",
+                    imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
+                });
+                wx.onMenuShareQQ(option);
+            });
+        });
+    }
+    function setPageManager(){
+        for (var i = 0, len = tpls.length; i < len; ++i) {
+            var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
+            pages[name] = {
+                name: name,
+                url: '#' + name,
+                template: '#' + tpl.id
+            };
+        }
+        pages.home.url = '#';
+
+        for (var page in pages) {
+            pageManager.push(pages[page]);
+        }
+        pageManager
+            .setPageAppend(function($html){
+                var $foot = $html.find('.page__ft');
+                if($foot.length < 1) return;
+
+                if($foot.position().top + $foot.height() < winH){
+                    $foot.addClass('j_bottom');
+                }else{
+                    $foot.removeClass('j_bottom');
+                }
+            })
+            .setDefault('home')
+            .init();
+    }
+
+    function init(){
+        preload();
+        androidInputBugFix();
+        setJSAPI();
+        setPageManager();
+
+        window.pageManager = pageManager;
+        window.home = function(){
+            location.hash = '';
         };
     }
-
-    pages.home.url = '#';
-    pages.home.events = {
-        '.js_item': {
-            click: function (e) {
-                var id = $(this).data('id');
-                pageManager.go(id);
-            }
-        },
-        '.js_category': {
-            click: function(){
-                var winH = $(window).height();
-                var categorySpace = 10;
-                return function(){
-                    var $this = $(this),
-                        $inner = $this.next('.js_categoryInner'),
-                        $page = $this.parents('.page'),
-                        $parent = $(this).parent('li');
-                    var innerH = $inner.data('height');
-
-                    if(!innerH){
-                        $inner.css('height', 'auto');
-                        innerH = $inner.height();
-                        $inner.removeAttr('style');
-                        $inner.data('height', innerH);
-                    }
-
-                    if($parent.hasClass('js_show')){
-                        $parent.removeClass('js_show');
-                    }else{
-                        $parent.siblings().removeClass('js_show');
-
-                        if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
-                            $page.scrollTop(this.offsetTop + this.offsetHeight + innerH - winH + categorySpace);
-                        }
-                        $parent.addClass('js_show');
-                    }
-                };
-            }()
-        }
-    };
-
-    pages.input.events = {
-        '#showTooltips': {
-            click: function () {
-                var $tooltips = $('.js_tooltips');
-                if ($tooltips.css('display') != 'none') {
-                    return;
-                }
-
-                // 如果有`animation`, `position: fixed`不生效
-                $('.page.cell').removeClass('slideIn');
-                $tooltips.css('display', 'block');
-                setTimeout(function () {
-                    $tooltips.css('display', 'none');
-                }, 2000);
-            }
-        }
-    };
-    pages.toast.events = {
-        '#showToast': {
-            click: function (e) {
-                var $toast = $('#toast');
-                if ($toast.css('display') != 'none') {
-                    return;
-                }
-
-                $toast.fadeIn(100);
-                setTimeout(function () {
-                    $toast.fadeOut(100);
-                }, 2000);
-            }
-        },
-        '#showLoadingToast': {
-            click: function (e) {
-                var $loadingToast = $('#loadingToast');
-                if ($loadingToast.css('display') != 'none') {
-                    return;
-                }
-
-                $loadingToast.fadeIn(100);
-                setTimeout(function () {
-                    $loadingToast.fadeOut(100);
-                }, 2000);
-            }
-        }
-    };
-    pages.dialog.events = {
-        '#showDialog1': {
-            click: function (e) {
-                var $dialog = $('#dialog1');
-                $dialog.fadeIn(200);
-                $dialog.find('.weui-dialog__btn').one('click', function () {
-                    $dialog.fadeOut(200);
-                });
-            }
-        },
-        '#showDialog2': {
-            click: function (e) {
-                var $dialog = $('#dialog2');
-                $dialog.fadeIn(200);
-                $dialog.find('.weui-dialog__btn').one('click', function () {
-                    $dialog.fadeOut(200);
-                });
-            }
-        },
-        '#showDialog3': {
-            click: function (e) {
-                var $dialog = $('#dialog3');
-                $dialog.fadeIn(200);
-                $dialog.find('.weui-dialog__btn').one('click', function () {
-                    $dialog.fadeOut(200);
-                });
-            }
-        },
-        '#showDialog4': {
-            click: function (e) {
-                var $dialog = $('#dialog4');
-                $dialog.fadeIn(200);
-                $dialog.find('.weui-dialog__btn').one('click', function () {
-                    $dialog.fadeOut(200);
-                });
-            }
-        }
-    };
-    pages.progress.events = {
-        '#btnStartProgress': {
-            click: function () {
-
-                if ($(this).hasClass('weui-btn_disabled')) {
-                    return;
-                }
-
-                $(this).addClass('weui-btn_disabled');
-
-                var progress = 0;
-                var $progress = $('.js_progress');
-
-                function next() {
-                    $progress.css({width: progress + '%'});
-                    progress = ++progress % 100;
-                    setTimeout(next, 30);
-                }
-
-                next();
-            }
-        }
-    };
-
-    for (var page in pages) {
-        pageManager.push(pages[page]);
-    }
-    pageManager
-        .setPageAppend(function($html){
-            var $foot = $html.find('.page__ft');
-            if($foot.length < 1) return;
-
-            if($foot.position().top + $foot.height() < winH){
-                $foot.addClass('j_bottom');
-            }else{
-                $foot.removeClass('j_bottom');
-            }
-        })
-        .setDefault('home')
-        .init();
-
-    $.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
-        wx.config({
-            beta: true,
-            debug: false,
-            appId: res.appid,
-            timestamp: res.timestamp,
-            nonceStr: res.nonceStr,
-            signature: res.signature,
-            jsApiList: [
-                'onMenuShareTimeline',
-                'onMenuShareAppMessage',
-                'onMenuShareQQ',
-                'onMenuShareWeibo',
-                'onMenuShareQZone',
-                // 'setNavigationBarColor',
-                'setBounceBackground'
-            ]
-        });
-        wx.ready(function () {
-            /*
-            wx.invoke('setNavigationBarColor', {
-                color: '#F8F8F8'
-            });
-             */
-            wx.invoke('setBounceBackground', {
-                'backgroundColor': '#F8F8F8',
-                'footerBounceColor' : '#F8F8F8'
-            });
-
-            wx.onMenuShareAppMessage({
-                title: 'WeUI',
-                desc: '为微信 Web 服务量身设计',
-                link: location.href,
-                imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
-            });
-            wx.onMenuShareTimeline({
-                title: 'WeUI, 为微信 Web 服务量身设计',
-                desc: 'WeUI, 为微信 Web 服务量身设计',
-                link: "https://weui.io",
-                imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
-            });
-            wx.onMenuShareQQ(option);
-        });
-    });
-
-    // preload
-    $(window).on("load", function(){
-        var imgList = [
-            "./images/layers/content.png",
-            "./images/layers/navigation.png",
-            "./images/layers/popout.png",
-            "./images/layers/transparent.gif"
-        ];
-        for (var i = 0, len = imgList.length; i < len; ++i) {
-            new Image().src = imgList[i];
-        }
-    });
-
-    // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
-    // 相关 issue: https://github.com/weui/weui/issues/15
-    // 解决方法:
-    // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
-    // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
-    //    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
-    if (/Android/gi.test(navigator.userAgent)) {
-        window.addEventListener('resize', function () {
-            if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
-                window.setTimeout(function () {
-                    document.activeElement.scrollIntoViewIfNeeded();
-                }, 0);
-            }
-        })
-    }
+    init();
 });
\ No newline at end of file
diff --git a/src/example/fragment/dialog.html b/src/example/fragment/dialog.html
index 1757c43..adcb31c 100644
--- a/src/example/fragment/dialog.html
+++ b/src/example/fragment/dialog.html
@@ -4,66 +4,93 @@
         <p class="page__desc">对话框</p>
     </div>
     <div class="page__bd page__bd_spacing">
-        <a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog1">iOS Dialog样式一</a>
-        <a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog2">iOS Dialog样式二</a>
-        <a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog3">Android Dialog样式一</a>
-        <a href="javascript:;" class="weui-btn weui-btn_default" id="showDialog4">Android Dialog样式二</a>
+        <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
+        <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
+        <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
+        <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog2">Android Dialog样式二</a>
     </div>
     <div class="page__ft">
         <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
     </div>
 
-    <!--BEGIN dialog1-->
-    <div id="dialog1" style="display: none;">
-        <div class="weui-mask"></div>
-        <div class="weui-dialog">
-            <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
-            <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
-            <div class="weui-dialog__ft">
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+    <div id="dialogs">
+        <!--BEGIN dialog1-->
+        <div class="js_dialog" id="iosDialog1" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog">
+                <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
+                <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
+                <div class="weui-dialog__ft">
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+                </div>
             </div>
         </div>
-    </div>
-    <!--END dialog1-->
-    <!--BEGIN dialog2-->
-    <div id="dialog2" style="display: none;">
-        <div class="weui-mask"></div>
-        <div class="weui-dialog">
-            <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
-            <div class="weui-dialog__ft">
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
+        <!--END dialog1-->
+        <!--BEGIN dialog2-->
+        <div class="js_dialog" id="iosDialog2" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog">
+                <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
+                <div class="weui-dialog__ft">
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
+                </div>
             </div>
         </div>
-    </div>
-    <!--END dialog2-->
-    <!--BEGIN dialog3-->
-    <div id="dialog3" style="display: none;">
-        <div class="weui-mask"></div>
-        <div class="weui-dialog weui-skin_android">
-            <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
-            <div class="weui-dialog__bd">
-                弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
-            </div>
-            <div class="weui-dialog__ft">
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+        <!--END dialog2-->
+        <!--BEGIN dialog3-->
+        <div class="js_dialog" id="androidDialog1" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog weui-skin_android">
+                <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
+                <div class="weui-dialog__bd">
+                    弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
+                </div>
+                <div class="weui-dialog__ft">
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+                </div>
             </div>
         </div>
-    </div>
-    <!--END dialog3-->
-    <!--BEGIN dialog4-->
-    <div id="dialog4" style="display: none;">
-        <div class="weui-mask"></div>
-        <div class="weui-dialog weui-skin_android">
-            <div class="weui-dialog__bd">
-                弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
-            </div>
-            <div class="weui-dialog__ft">
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
-                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+        <!--END dialog3-->
+        <!--BEGIN dialog4-->
+        <div class="js_dialog" id="androidDialog2" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog weui-skin_android">
+                <div class="weui-dialog__bd">
+                    弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
+                </div>
+                <div class="weui-dialog__ft">
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+                </div>
             </div>
         </div>
+        <!--END dialog4-->
     </div>
-    <!--END dialog4-->
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+    $(function(){
+        var $iosDialog1 = $('#iosDialog1'),
+            $iosDialog2 = $('#iosDialog2'),
+            $androidDialog1 = $('#androidDialog1'),
+            $androidDialog2 = $('#androidDialog2');
+
+        $('#dialogs').on('click', '.weui-dialog__btn', function(){
+            $(this).parents('.js_dialog').fadeOut(200);
+        });
+
+        $('#showIOSDialog1').on('click', function(){
+            $iosDialog1.fadeIn(200);
+        });
+        $('#showIOSDialog2').on('click', function(){
+            $iosDialog2.fadeIn(200);
+        });
+        $('#showAndroidDialog1').on('click', function(){
+            $androidDialog1.fadeIn(200);
+        });
+        $('#showAndroidDialog2').on('click', function(){
+            $androidDialog2.fadeIn(200);
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/src/example/fragment/home.html b/src/example/fragment/home.html
index 3e19e5d..5f0377b 100644
--- a/src/example/fragment/home.html
+++ b/src/example/fragment/home.html
@@ -194,4 +194,40 @@
     <div class="page__ft">
         <a href="javascript:home()"><img src="./images/icon_footer.png" /></a>
     </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+    $(function(){
+        var winH = $(window).height();
+        var categorySpace = 10;
+
+        $('.js_item').on('click', function(){
+            var id = $(this).data('id');
+            window.pageManager.go(id);
+        });
+        $('.js_category').on('click', function(){
+            var $this = $(this),
+                $inner = $this.next('.js_categoryInner'),
+                $page = $this.parents('.page'),
+                $parent = $(this).parent('li');
+            var innerH = $inner.data('height');
+
+            if(!innerH){
+                $inner.css('height', 'auto');
+                innerH = $inner.height();
+                $inner.removeAttr('style');
+                $inner.data('height', innerH);
+            }
+
+            if($parent.hasClass('js_show')){
+                $parent.removeClass('js_show');
+            }else{
+                $parent.siblings().removeClass('js_show');
+
+                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
+                    $page.scrollTop(this.offsetTop + this.offsetHeight + innerH - winH + categorySpace);
+                }
+                $parent.addClass('js_show');
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/src/example/fragment/input.html b/src/example/fragment/input.html
index 8fb8074..8fd54bf 100644
--- a/src/example/fragment/input.html
+++ b/src/example/fragment/input.html
@@ -196,4 +196,21 @@
     <div class="page__ft">
         <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
     </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+    $(function(){
+        var $tooltips = $('.js_tooltips');
+
+        $('#showTooltips').on('click', function(){
+            if ($tooltips.css('display') != 'none') return;
+
+            // toptips的fixed, 如果有`animation`, `position: fixed`不生效
+            $('.page.cell').removeClass('slideIn');
+
+            $tooltips.css('display', 'block');
+            setTimeout(function () {
+                $tooltips.css('display', 'none');
+            }, 2000);
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/src/example/fragment/progress.html b/src/example/fragment/progress.html
index 5eadc1b..7f5b2c9 100644
--- a/src/example/fragment/progress.html
+++ b/src/example/fragment/progress.html
@@ -31,10 +31,35 @@
             </a>
         </div>
         <div class="weui-btn-area">
-            <a href="javascript:;" class="weui-btn weui-btn_primary" id="btnStartProgress">上传</a>
+            <a href="javascript:;" class="weui-btn weui-btn_primary" id="btnUpload">上传</a>
         </div>
     </div>
     <div class="page__ft">
         <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
     </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+    $(function(){
+        var $progress = $('.js_progress'),
+            $btnUpload = $('#btnUpload');
+        var progress = 0;
+
+        function next() {
+            if(progress > 100){
+                progress = 0;
+                $btnUpload.removeClass('weui-btn_disabled');
+                return;
+            }
+            $progress.css({width: progress + '%'});
+            progress = ++progress;
+            setTimeout(next, 20);
+        }
+
+        $btnUpload.on('click', function(){
+            if ($btnUpload.hasClass('weui-btn_disabled')) return;
+
+            $btnUpload.addClass('weui-btn_disabled');
+            next();
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/src/example/fragment/toast.html b/src/example/fragment/toast.html
index 5278925..7ddd10f 100644
--- a/src/example/fragment/toast.html
+++ b/src/example/fragment/toast.html
@@ -29,4 +29,31 @@
             <p class="weui-toast__content">数据加载中</p>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+    // toast
+    $(function(){
+        var $toast = $('#toast');
+        $('#showToast').on('click', function(){
+            if ($toast.css('display') != 'none') return;
+
+            $toast.fadeIn(100);
+            setTimeout(function () {
+                $toast.fadeOut(100);
+            }, 2000);
+        });
+    });
+
+    // loading
+    $(function(){
+        var $loadingToast = $('#loadingToast');
+        $('#showLoadingToast').on('click', function(){
+            if ($loadingToast.css('display') != 'none') return;
+
+            $loadingToast.fadeIn(100);
+            setTimeout(function () {
+                $loadingToast.fadeOut(100);
+            }, 2000);
+        });
+    });
+</script>
\ No newline at end of file