• 移动端移效

    uiZjs特点

    自动化双向数据绑定
    支持PC端快速开发模式和手机端MVC模式
    支持表单和表单的验证
    表格自动切换前端/服务端查询模式
    一站式集成常用插件
    完善的文档和开放的接口
    HTML语法加强
    操作简单易上手
    模块组件化

    源码

    <link href="/js/clubShow.css" rel="stylesheet" /> <!--引用移动端特效CSS文件-->
    <script type="text/javascript">
        function rconchange() {
            $("#hitem").css({
                "animation": $("#showtype").val() + " 3s ease 0s",//切换特效名 就会切换特效效果
                "-webkit-animation": $("#showtype").val() + " 3s ease 0s"
            });
        };
    </script>
    <form id="testform" class="cform">
        <input id="showtype" type="text" class="cselectorRadio" mode="showtype" conchange="rconchange()"/>
    </form>
    <div id="hitem" class="hitem" style="right: 50px; top: 180px; width: 285px; height: 300px;
            animation: fadeIn 3s ease 0s; -webkit-animation: fadeIn 3s ease 0s;">
        <h3>uiZjs特点
        </h3>
        <blockquote>
    自动化双向数据绑定<br />支持PC端快速开发模式和手机端MVC模式<br />
    支持表单和表单的验证<br />表格自动切换前端/服务端查询模式
    <br />一站式集成常用插件<br />完善的文档和开放的接口
    <br />HTML语法加强<br />操作简单易上手<br />模块组件化</blockquote>
    </div>
  • 页面模板

    页面模板 集中放到/mobile目录下,有几点注意事项

    1、以.html结尾 里面只需要提供纯HTML模板 不用涉及任何css和js 相关业务逻辑统一集中在主控制器中处理

    2、页面模板中最大的容器一定要对应页面ID 用于判断是否加载过该页面 如果加载过 就从缓存中取 没有加载过 就加载

    首页模板

    <div id="index" class="view-content">
        <div class="content">
            <div class="cfocus cfocus1" style="height: 160px;" half="true">
                <ul class="box">
                    <li class="item"><a href="/?page=classify"><img src="/img/1.jpg" /></a></li>
                    <li class="item"><a href="/?page=classify"><img src="/img/2.jpg" /></a></li>
                </ul>
                <div class="page"></div>
            </div>
            <ul class="ullist">
                <li class="p82"><a class="li_jade" href="/?page=product&classid=22">
                    <i class="icon-leaf "></i><font>洗发水</font></a></li>
                <li class="p64"><a class="li_green" href="/?page=product&classid=23">
                    <i class="icon-lemon"></i><font>护发素</font></a></li>
            </ul>
            <div class="clear10"></div>
            <ul class="list">
                <li>
                    <a href="/?page=productinfo&amp;productid=13&amp;id=13">
                        <img alt="汰渍洗衣粉净白去渍柠檬清新型 2.8kg/袋" src="http://bcs.duapp.com/ycserver%2F1423975526104.jpg">
                        <h6>汰渍洗衣粉净白去渍柠檬清新型 2.8kg/袋</h6>
                    </a>
                    <a class="buynow" href="/?page=productbuy&amp;productid=13&amp;id=13"><i class="icon-plus-sign"></i></a>
                    <span class="money">19.50</span>
                </li>
                <li>
                    <a href="/?page=productinfo&amp;productid=12&amp;id=12">
                        <img alt="汰渍 薰衣草洗衣粉 洁净薰香香氛3千克/袋" src="http://bcs.duapp.com/ycserver%2F1423976377084.jpg">
                        <h6>汰渍 薰衣草洗衣粉 洁净薰香香氛3千克/袋</h6>
                    </a>
                    <a class="buynow" href="/?page=productbuy&amp;productid=12&amp;id=12"><i class="icon-plus-sign"></i></a>
                    <span class="money">27.60</span>
                </li>
            </ul>
        </div>
    </div>

    产品列表模板

    <div id="product" class="view-content">
        <div class="content">
            <ul id="productlist" class="list" style="display: none;"
                cmd-select="/front/product/query" pulltorefresh="true" clearurlpara="true" pagesize="8">
                <li>
                    <a href="/?page=productinfo&productid={{productid}}&id={{productid}}">
                        <img alt="{{productname}}" src="{{defaultimage}}" />
                        <h6>{{productname}}</h6>
                    </a>
                    <a class="buynow"  href="/?page=productbuy&productid={{productid}}&id={{productid}}">
                        <i class="iconfont">&#xe641;</i></a>
                    <span class="money">{{defaultprice}}</span>
                </li>
            </ul>
        </div>
    </div>

    产品详情模板

    <div id="productinfo" class="view-content">
        <div class="content">
            <form id="productdetail" class="cform" style="display: none;"
                istemplate="true" getcallback="zjs.productinfo.getcallback()" cmd-select="/front/productfront/query">
                <input id="standardid" type="hidden" />
                <div class="row" style="margin-bottom:50px;">
                    <div class="c6">
                        <div id="ImagesBox" class="cfocus">
                            <!--幻灯片-->
                            <ul class="box">
                            </ul>
                            <div class="page"></div>
                        </div>
                    </div>
                    <div class="c6 p10">
                        <h3>{{productname}}</h3>
                        <a class="fr mr10 share"><i class="iconfont">&#xe66a;</i>分享</a>
                        <span class="money productmoney">{{defaultprice}}</span>
                        <tt class="deletelist"><span class="delete">{{referenceprice}}</span></tt>
                        <table id="ParametersBox" border="0" cellpadding="0" cellspacing="5">
                        </table>
                        <div id="Introduction">
                            {{productinfo}}
                        </div>
                    </div>
                </div>
                <div class="navbtn">
                    <a id="goproductbuy" class="btn c12" href="/?page=productbuy&productid={{productid}}&id={{productid}}">
                        <i class="iconfont">&#xe62a;</i>&nbsp;加入购物车</a>
                </div>
            </form>
        </div>
    </div>
  • 控制器主要逻辑示例

    //声明zjs命名空间

    if (!window.zjs) { zjs = {} };

    if (!window.zjss) { zjss = {} };

     

    //上次访问的页面 默认为首页 

    var lastPageid = "index";

     

    var tsfm0 = { 'transform': 'translate3d(0, 0px, 0px)', '-webkit-transform': 'translate3d(0, 0px, 0px)' };

    var tsfm100 = { 'transform': 'translate3d(100%, 0px, 0px)', '-webkit-transform': 'translate3d(100%, 0px, 0px)' };

    var tsfmf100 = { 'transform': 'translate3d(-100%, 0px, 0px)', '-webkit-transform': 'translate3d(-100%, 0px, 0px)' };

    //向左切换页面转场 $now为当前页面 $target为目标页面

    zjs.goNextPage = function ($target, targetid) {

        if (zjs.pageScrollCenter[lastPageid]) {

            zjs.pageScrollCenter[lastPageid] = $(window).scrollTop();

        }

        var $now = $("div.view").children("div#" + lastPageid);

        $now.css(tsfm0).show().animate(tsfmf100, 300, "ease-in-out", function () { $now.hide(); });

        $target.css(tsfm100).show().animate(tsfm0, 300, "ease-in-out", function () {

            $target.removeAttr("style");

            if (zjs.pageScrollCenter[targetid]) {

                $(window).scrollTop(zjs.pageScrollCenter[targetid]);

            }

        });

    };

    //向右切换页面转场 $now为当前页面 $target为目标页面

    zjs.goBackPage = function ($target, targetid) {

        var $now = $("div.view").children("div#" + lastPageid);

        $now.css(tsfm0).show().animate(tsfm100, 300, "ease-in-out", function () { $now.hide(); });

        $target.css(tsfmf100).show().animate(tsfm0, 300, "ease-in-out", function () {

            $target.removeAttr("style");

            if (zjs.pageScrollCenter[targetid]) {

                $(window).scrollTop(zjs.pageScrollCenter[targetid]);

            }

        });

    };

    zjs.pageScrollCenter = { "index": 1 };//是否记录滚动条位置

    zjs.pageEventCenter = { //页面事件中心 当页面加载完以后 就调用对应的页面加载事件 比如初始化表单或者表格

        "index": function () {//首页加载事件 首页加载时 需要加载幻灯片

            if (!window.ctableIndexList) {

                zjs.documentReady();

            }

        },

        "sexercise": function () { //新闻资讯列表页

            if (!window.ctablesexerciseList) {

                zjs.documentReady();

            }

        },

        "sexerciseinfo": function () { //新闻资讯详情页

            if (!window.cformsexercisedetail) {

                zjs.documentReady();

            } else {

                window.cformsexercisedetail.search();

            }

        }

    };//end zjs.pageEventConter 页面事件中心

     

    //页面切换函数

    zjs.pageChange = function (isback) {

        var pageid = "index";//如果没有页面 就是回到首页

        var gps = zjs.getQueryStr();

        if (gps.page) {//如果页面 就进页面

            pageid = gps.page;

        }

     

        if ($("div.view").children("div#" + pageid).length > 0) {

            //如果加载过 就从缓存中取

            var $chil = $("div.view").children("div#" + pageid);

            if (lastPageid == pageid) { }//如果目标页面不是本页面 再转场

            else {

                if (isback) {

                    zjs.goBackPage($chil, pageid);//当前向右退场 新页面从左入场

                } else {

                    zjs.goNextPage($chil, pageid);//当前向左退场 新页面从右入场

                }

            }

            if (zjs.pageEventCenter[pageid])

                zjs.pageEventCenter[pageid].call();

     

            zjs.changeheader(pageid);

     

            lastPageid = pageid;//把当前页面 变为历史页面

        } else {

            //否则就用get请求拿到页面 并加载

            $.ajax({

                async: false, url: "/mobile/" + pageid + ".html?tm=" + (new Date()).getTime(),

                success: function (data) {

                    $("div.view").append(data);

                    var $chil = $("div.view").children("div#" + pageid);

                    if ($("div.view").children().length > 1) {

                        //如果页面中已有元素 就走一下转场 新加载的页面 不可能有退场 只有入场

                        zjs.goNextPage($chil);//当前向左退场 新页面从右入场

    主页面代码示例

    <!DOCTYPE html>
    <html>
    <head>
        <title>深入浅出带你领略前端魅力 - uiZjs</title>
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no" />
        <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <!--字体图标-->
        <link href="/js/layout.m.css" rel="stylesheet" />
        <!--移动端和PC端通用主样式-->
        <link href="/js/laycolor-min.css" rel="stylesheet" />
        <!--色彩配置-->
        <script src="/js/m.zepto.1.1.6.js"></script>
        <!--zepto文件-->
        <script src='/js/m.cselector.config.js'></script>
        <!--uizjs配置文件-->
        <script src="/js/m.cselector.1.0.js"></script>
        <!--uizjs主文件-->
        <script src="/js/m.controller.js"></script>
        <!--主控制器文件-->
    </head>
    <body>
        <div class="headers">
            <!--公共头部-->
            <header id="indexheader" style="display: none;"><!--首页头部-->
                <div class="topbar">
                    <div class="header-title">深入浅出带你领略前端魅力 - uiZjs</div>
                </div>
            </header>
            <header id="meheader" style="display: none;"><!--个人中心头部-->
                <div class="">
                    <a class="appmenus" href="?page=index"><i class="iconfont">&#xe67c;</i></a>
                </div>

            </header>

            <!--其他头部自行添加-->

        </div>
        <!--主容器-->
        <div class="view">
            
        </div>
        <div class="navs">
            <!--公共底部-->
            <nav id="indexnav" style="display: none;"><!--首页底部-->
                <a href="?page=sindex"><i class="iconfont">&#xe6d9;</i><span>去学</span></a>
                <a href="?page=index" class="homeimg">
                    <div>
                        <img src="/img/logo.png" /><span>去动</span>
                    </div>
                </a>
                <a href="?page=me"><i class="iconfont">&#xe6cc;</i><span>我</span></a>
            </nav>
            <nav id="orderinfonav" style="display: none;"><!--订单下单底部-->
                <div class="myinfobtnbox btnbox">
                    <a class="btna btn-org paybtn" style="display: none;">立即支付</a>
                </div>
            </nav>
            <!--其他底部自行添加-->
        </div>
    </body>
    </html>
  • 移动端开发介绍

    普通移动端开发

    普通PC版网站转成移动端的只需要记住几点即可:

    1、将容器宽度设置为100%,但是布局按照480*960大概设计即可

    2、在head中间加上几句关键meta,如下:

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" />
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />

    其实普通的移动端和PC站差不多 只不过是窄了一点,最重要的是移动端不用考虑SB IE问题,可以大胆放心的用css3 html5了

    高级移动端开发

    Single Page Application (单页应用) 已经成为目前主流的移动端开发模式,这种模式下网站只有一个页面,而通过url参数传递,使用ajax请求主体的内容,达到展示不同的网页的效果。这种方式有各种优缺点,如何取舍还是要按照项目的具体需要。

    优点
    缺点
    简化前端开发内容
    节省服务器带宽
    更优秀的用户体验
    开发复杂度增加
    需要通盘的考虑和设计
    无法进行SEO优化

    正常的网页访问逻辑如下:

    1、打开首页面时,加载JS(100K) CSS(30K) HTML(100K) ,共消耗资源(230K)

    2、点击超链接A时,跳转到A页面,加载JS(100K) CSS(30K) HTML(90K),这时JS\CSS可能会从缓存中读取,所以消耗资源(90K)

    3、点击超链接B时,跳到转B页面,加载JS(100K) CSS(30K) HTML(150K),这时JS\CSS可能会从缓存中读取,所以消耗资源(150K)

    4、依次类推,正常的页面加载,资源消耗。


    而在Single Page Application (单页应用)中,逻辑如下:

    1、当第一次打开页面时,加载JS(100K) CSS(30K),共消耗资源(130K)

    2、主控制器加载完成后,由主控制器加载首页的模板10K,加载首页数据10K,渲染成10*10=100K的页面(节省80K资源)

    2、当点超链接A时,加载页面模板3K,加载数据30K,渲染成90K的页面,进行展示。(节省57K资源)

    3、当点超链接B时,加载页面模板5K,加载数据50K,渲染成150K的页面。(节省95K资源)

    4、当从B回到A时,直接展示(不再消耗任何资源 因为前端已有缓存)

    5、当点超链接B时(参数不一样),由于是第二次加载,所以不再需要加载页面模板,只需要加载数据50K,渲染成150K的页面(节省100K资源)

  • 移动端设计思路

    一、整个站点只有一个页面 (比如default.aspx或index.jsp) 在这个页面中需要处理几点:

    1、引用JS文件

    2、CSS样式

    3、放公共headers头部

    4、放公共view主容器

    5、放公共navs底部

    6、最重点一点 引用 主控制器 m.controller.js

    二、在主控制器 m.controller.js 里处理几点:

    1、处理页面事件中心 当页面加载完成后判断url里传的参数 如果有pageid 就进入对应的pageid 如果没有 就进入index默认主页

    2、拦截a的超链接事件 转到页面事件中心处理(如何拦截?请参见下面《关键点pushState》)

    3、处理向左向右转场退场特效

    4、集中处理每个模块的回调函数 比如beforerender setcallback getcallback等等

    5、绑定未来元素的单击和控制事件

    三、页面模板 集中放到/mobile目录下,有几点注意事项

    1、以.html结尾 里面只需要提供纯HTML模板 不用涉及任何css和js 相关业务逻辑统一集中在主控制器中处理

    2、页面模板中最大的容器一定要对应页面ID 用于判断是否加载过该页面 如果加载过 就从缓存中取 没有加载过 就加载

  • 关键点pushState

    Single Page Application (单页应用) 中,有一个非常重点的关键点,就是当页面变更时,浏览器地址要变化,而同时,页面不能重新加载。

    这个关键点就是

    window.history.pushState

    请注意pushstate是HTML5的新属性,所以普通的PC网站,需要兼容SBIE的网站请慎重使用,而我们在上面已经介绍过,移动端网站基本上不用考虑兼容性,所以我们可以放心大胆的使用。

    pushstate接受3个参数(自定义数据,网页标题,网页链接)

    示例

    //切换页面 HTML5属性
    zjs.pushstate = function (title, url, back) {
        if (url != window.location.search) {
            window.history.pushState({ "title": title }, title, url);
            zjs.pageChange(back);//调用页面事件处理中心
        }
    };
    //当切换页面时触发 当按手机上的后退按钮时会触发 会自动触发后退事件
    window.onpopstate = function (ev) {
        zjs.pageChange(true);//后退时也调用页面事件处理中心 同时告诉处理中心 要启用向右退场特效

    };

    //绑定全局超链接 拦截所有超链接事件
    $("a[href]").live("click", function (e) {
        var $t = $(this);
        if ($t.attr("defaulthref") == "true") {

            //如果要启用默认超链接事件 就加上这个defaulthref属性,比如在调用微信支付时 必须让页面跳一次
        } else
            if ($t.attr("href") != "javascript:void(0)") {//如果超链接不为空时
                e.preventDefault();   //这句拦截浏览器默认事件 浏览器就不会跳走了
                e.stopPropagation(); //拦截事件冒泡
                zjs.pushstate($t.text(), $t.attr("href")); //调用pushstate 交给事件处理中心
                return false;             //拦截后续所有动作
            }
    });


继续阅读

    uiZjs