weui学习总结——3、微信样式界面切换

前言：weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档，所以这篇博客就当是方便以后开发而使用吧。
weui资源下载（也可以从官网下载）：
http://download.csdn.net/download/zhengyikuangge/9940737

• 手机移动web开发必须要做的两点：1、body中加上ontouchstart，即...；2、页面上加入
• 需要事先导入的资源：weui.css、example.css、zepto.min.js和example.js，这四个资源在上述weui资源中包含，可自行下载查找。另外在我的资源中也有下载地址，weui.css下载地址：http://download.csdn.net/download/zhengyikuangge/9956240；后面三个资源的下载地址：http://download.csdn.net/download/zhengyikuangge/9956337

---

微信样式的界面切换

效果图：

---

全部代码如下：

"//www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">

"UTF-8">
name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

-- 导入所需资源，注意资源的路径 -->
"stylesheet" href="weui.css" />
"stylesheet" href="example.css"/>
<script src="zepto.min.js">script>
<script src="example.js">script>

<script type="text/javascript">
-- 这段js代码具体操作界面切换的功能 -->
    $(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');
            bear = $page;

            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');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop = this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }
        });
    });
script>

-- js中创建div界面，也就是成功提示界面，注意js的id -->
<script type="text/html" id="tpl_msg_success">
<div class="page">
    <div class="weui-msg">
        <div class="weui-msg__icon-area">class="weui-icon-success weui-icon_msg">div>
        <div class="weui-msg__text-area">
            
class="weui-msg__title">操作成功
            
class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现"javascript:void(0);">文字链接
        div>
        <div class="weui-msg__opr-area">
            
class="weui-btn-area">
                "javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作
                "javascript:history.back();" class="weui-btn weui-btn_default">辅助操作
            
        div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                
class="weui-footer__links">
                    "javascript:void(0);" class="weui-footer__link">底部链接文本
                
                
class="weui-footer__text">Copyright &copy; 2008-2016 weui.io
            div>
        div>
    div>
div>
script>

-- js中创建div界面，也就是警告提示界面，注意js的id -->
<script type="text/html" id="tpl_msg_warn">
<div class="page">
    <div class="weui-msg">
        <div class="weui-msg__icon-area">class="weui-icon-warn weui-icon_msg">div>
        <div class="weui-msg__text-area">
            
class="weui-msg__title">操作失败
            
class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现"javascript:void(0);">文字链接
        div>
        <div class="weui-msg__opr-area">
            
class="weui-btn-area">
                "javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作
                "javascript:history.back();" class="weui-btn weui-btn_default">辅助操作
            
        div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                
class="weui-footer__links">
                    "javascript:void(0);" class="weui-footer__link">底部链接文本
                
                
class="weui-footer__text">Copyright &copy; 2008-2016 weui.io
            div>
        div>
    div>
div>
script>




    -- 这段代码必须有，类似于界面切换的容器 -->
    <div class="container" id="container">div>

-- js中创建div界面，也就是主界面，注意js的id -->
<script type="text/html" id="tpl_home">
    <div class="page">
    <div class="page__hd">
        
class="page__title">Msg
        
class="page__desc">提示页
    div>
    <div class="page__bd page__bd_spacing">
        -- 这里要注意a的链接msg_success与成功提示界面的id相符 -->
        "#msg_success" class="weui-btn weui-btn_default">成功提示页
        -- 这里要注意a的链接msg_warn与警告提示界面的id相符 -->
        "#msg_warn" class="weui-btn weui-btn_default">失败提示页
    div>
    div>

script>  

---

当我看到这段代码的时候特别纠结，也是第一次看到这样写的代码

关于weui暂时只写这三篇博客，因为目前其他的还没有用到，有兴趣的同仁可以留言讨论~