WebApp(JqueryMobile)实战(二)

天比较冷，在这里我就不费话了，本片还是介绍前台布局，看下图，用过Android手机的用户都知道打开UC浏览器之后会出现下面的网址导航界面。

创新互联是网站建设技术企业，为成都企业提供专业的网站制作、成都网站设计，网站设计，网站制作，网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例，为您定制适合企业的网站。10多年品质，值得信赖！

WebApp(JqueryMobile) 实战(二)

看到了吧，就是这两张，一个是主界面，一个是展开Collapse后的界面。

OK，那么我们先看一下第一张图的布局，首先先看一下head部分，引用了JqueryMobile的css以及JqueryMobile js还有一个angular.js，一个诞生于2009的web前端框架，后被google收购发展壮大。style部分是我自己定义的一些css样式

@{
    Layout = null;
}





    
    
    Main
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymobile")>
    
    
        .img-app {
            width: 18px;
            height: 18px;
            vertical-align: middle;
        }

        .img-app-word {
            font-family: 微软雅黑;
            font-size: 14px;
            vertical-align: middle;
        }

        .ui-grid-x-margin {
            margin-top: 10px;
        }

        hr {
            margin: 15px 5px 0px 5px;
        }

OK，Head没什么可说的。接下来我们先看顶部天气部分。

手机酷站

`website`.`name`

每日资讯

Collapsible content

生活服务

Collapsible content

天猫精选

Collapsible content

轻松大杂烩

Collapsible content

手机酷站

`website`.`name`

function websiteController($scope) { $scope.webistes = [ { block: "a", name: "1号店", link: "http://www.baidu.com" }, { block: "b", name: "天猫", link: "http://www.baidu.com" }, { block: "c", name: "抢车票", link: "http://www.baidu.com" }, { block: "d", name: "小米", link: "http://www.baidu.com" }, { block: "a", name: "唯品会", link: "http://www.baidu.com" }, { block: "b", name: "QQ空间", link: "http://www.baidu.com" }, { block: "c", name: "乐讯", link: "http://www.baidu.com" }, { block: "d", name: "搜房网", link: "http://www.baidu.com" }, { block: "a", name: "汽车之家", link: "http://www.baidu.com" }, { block: "b", name: "去哪儿", link: "http://www.baidu.com" }, { block: "c", name: "智联招聘", link: "http://www.baidu.com" }, { block: "d", name: "太平洋车", link: "http://www.baidu.com" }, { block: "a", name: "携程", link: "http://www.baidu.com" }, { block: "b", name: "百姓网", linhk: "ttp://www.baidu.com" }, { block: "c", name: "UC书城", link: "http://www.baidu.com" }, { block: "d", name: "京东", link: "http://www.baidu.com" } ]; }

大橙子网站建设，新征程启航

WebApp(JqueryMobile)实战(二)

手机酷站

每日资讯

生活服务

天猫精选

轻松大杂烩

手机酷站

其他资讯