JQuery Mobile试试水

JQuery Mobile了解，扩展一下知识面……废话不多说，找资料去……
第一步：打开软件——webstorm。（哈哈，让我缓一下）

第二步：找到所需的一些工具，引入进来（先做简单的了解）。

这里使用的是JQuery Mobile中文网提供的CDN。
在body里添加一行代码，测试下，是否已经成功导入了……

Delete

这里面的参数什么意思我就不说了，参考文档里都有，这是一个漫长的道路，用到的时候，自己能找到的……
然后打开谷歌的移动端调试界面：

测试界面1

可是图标好小，是谷歌浏览器问题吗？用火狐打开看看……

测试界面2

这个貌似好多了哈……可是我还是想看看在手机上打开网址是怎么样子的……免得做了半天板式也白做了……我就在自己的电脑上面打开了IIS，然后将自己的练习文件夹部署到了里面，本地的服务器已经搭建好了，然后手机通过本地的IP+端口号+页面名称，就可以访问到自己的页面了……

搭建本地服务

手机显示结果

通过手机的访问很明显看的出来，跟谷歌反应的是一样的……用谷歌调试在界面上，跟手机端的相似度还是蛮大的。
那就只好根据需要，自己去更改大小了。
例如：

原有样式

这个时候就觉得字体有点小了哈……
在浏览器中找到对应的className：

然后添加代码：

现在文字就变大了

这是在手机中测得的结果：

手机显示结果

由此可以将每个元素的样式改成自己需要的那一种……
里面的事件就自己琢磨吧……也都是拿来主义，别人写好的，自己找找拿来用就可以了……

参考网址
（JQuery Mobile中文网）：http://jquerymobile.weebly.com/jquerymobile1997936733.html
（JQuery Mobile官网）：http://jquerymobile.com/
查找资料才发现，原来这也并不是一件简单的事情，那就搭一个简单的界面好了……
下载一个简单的psd文件和PS中……

第三步：打开下载的psd看看什么样的……

说好的psd呢？？？

等了那么久……打开竟然这么一个玩意儿……
那就随便搭个界面好了。界面的网格排布我就不做了，做几块算几块吧，不过一般做的话应该会先把整体的网格做一下，一块一块做，思路清晰一些。
找资料的时候发现原来在W3CSchool里也有相应的教程的。 http://www.w3school.com.cn/jquerymobile/jquerymobile_toolbars.asp

第四步：参照所给界面开始布局。
这个的类名是不能附加的，如果自己添加了类名，分开写样式就好了……

我在h1里加了一个类名，它也能自动添加在前面，可是却改变不样式

那就像这样分开写好了：

像下图这种就不能就附加class的方式，因为被封了最里层，如果在外层附加class话的就需要一层一层往下找（这个未测试）。我是将该文字的原有className提取出来，进行样式修改。

看看效果：

头部

第五步：头部搭建好了，再把底部也做一个吧……
css：

.my_bottom{position: absolute;bottom:0px;width:100%;}

html:

    新浪微博
    腾讯微博
    QQ 空间
    微信聊天

效果图：

头部+底部

第六步：中间加点什么好呢，其实吧，jquery mobile 的UI做的并不怎么好用，或许是我才接触，不知道怎么用吧，也不知道图片在哪里找呢……再加一个轮播图吧，看看怎么加……
bootstrap里面有一试试能不能加进去，有没有什么冲突，手机端调试还是可以用的……

从介绍里把git里的js和css文件拷贝了下来，然后找了两张图片。引入一下，按照步骤走一下，轮不播就出来了……

至于样式什么的，自己没事慢慢调吧……
还剩这么大的空白，加个表单吧……

好了，大概就是这么个步骤吧……里面还有事件，数据这些深层次的东西，我玩起来就不那么容易了，我目前也就只能做到这样了……好了，看看结果显示吧：

代码：

    
    
    
    
    
    
    
    

    
    

    
    




    首页
    
欢迎来到我的主页
    搜索



    

        
![](img/01.jpg)
        
![](img/02.jpg)
        
![](img/01.jpg)
    



    

        First name:
        



        Last name:
        
    




    新浪微博
    腾讯微博
    QQ 空间
    微信聊天

不过呢我还是推荐使用vux。个人感觉要好用一些。下面是我曾经的一个小练习：

界面

代码：

template>
  

    
    小区物业APP
    
    


    
    
      
        
          

          
社区动态
        
      
      
        
          

          
周边商家
        
      
      
        
          

          
房屋租售
        
      
      
        
          

          
社区论坛
        
      
    
    
      
        
          

          
便民工具
        
      
      
        
          

          
服务预约
        
      
      
        
          

          
优惠专区
        
      
      
        
          

          
物管服务
        
      
    
    
      
        
          

          
代收快递
        
      
      
        
          

          
门禁放行
        
      
      
        
          

          
装修申请
        
      
      
        
          

          
物品租赁
        
      
    


    
    
      

        

          ![](../static/img/chinaz17.png)
          

          个人中心
        
        

          ![](../static/img/chinaz10.png)
          

          费用查询
        
        

          ![](../static/img/chinaz11.png)
          

          物业管理
        
        

          ![](../static/img/chinaz16.png)
          

          邻里互动
        
      
    
  

代码是在node下运行的，js框架用的vue，组件用的vux。

公众号.png