WebApp(JqueryMobile) 实战(二)

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

 

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

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

@{
    Layout = null;
}





    
    
    
    @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没什么可说的。接下来我们先看顶部天气部分。

            
                5℃
                西安 -5℃-5℃
                45优
                
                    晴
                

            

        

天气部分，我们采用了蓝底白字的主题(data-theme="b")，并且是始终显示在页面上的，不会随着滚动条的拉动而消失。OK，这里我们为了使得文字在div中居中，我们设置height和line-height的值都是40px。然后距左右各5px，html中的margin是上右下左的顺序，而silverlight是左下右上的顺序，别搞混了。然后我们还是让晴天向右漂浮，看一下效果

怎么样，还行吧。OK，我们接着往下看，看搜索部分

                    
                    搜索
                

很简单，一个input type="search"，并设置未输入前的文字是"输入关键词"。然后search按钮其实是一个超链接设置其data-role="button"，再设置icon就行了。icon有如下这么多，你可以随便设置。

ok，搜索做好后，它的效果如下

大家看到，放到了两行上，那么为什么会这样，我也不知道，下回再讲。

接下来我们就要看新浪，百度等等12个站点超链接是怎么实现的。大家其实看过上一篇文章的话应该知道Jquery Mobile的网格系统。是的，在这里我要将屏幕分成4份。

那么我们会使用ui-grid-c这个css将div分成四份。

                    
                        
                        新浪
                    

                                                                      百度