JQuery Mobile试试水

浅浅的花香味﹌ 2021-06-24 16:11 385阅读 0赞

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

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

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

<a href="http://www.iotzzh.com" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

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

![2789632-c361d6fa68db64da.gif][]

测试界面1

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

![2789632-5045fc9f6d8a15b4.png][]

测试界面2

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

![2789632-d8e3dae4db1896b7.png][]

搭建本地服务

![2789632-509aedf92bc15634.png][]

手机显示结果

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

![2789632-ef67fb9734b9249e.png][]

原有样式

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

![2789632-b0f85d65b3fef526.png][]

然后添加代码：

![2789632-2cb686fb9c3f78c4.png][]

现在文字就变大了

![2789632-78fffc2223e6a50d.png][]

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

![2789632-e9cf15c45617a85f.png][]

手机显示结果

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

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

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

![2789632-23c63608a4bb537c.png][]

说好的psd呢？？？

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

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

![2789632-ac066795919e38c7.png][]

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

![2789632-75ab72752fb5547b.png][]

那就像这样分开写好了：

![2789632-cebddb49f02f7edb.png][]

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

![2789632-985dc79f556d48ad.png][]

![2789632-13555d81176b3f92.png][]

看看效果：

![2789632-e64695c455801c84.png][]

头部

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

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

html:

<div data-role="footer" class="my_bottom">
        <a href="#" data-role="button">新浪微博</a>
        <a href="#" data-role="button">腾讯微博</a>
        <a href="#" data-role="button">QQ 空间</a>
        <a href="#" data-role="button">微信聊天</a>
    </div>

效果图：

![2789632-e0548a99cac5f75d.png][]

头部+底部

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

![2789632-3d916bbff9180f5d.png][]

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

![2789632-7e0e4d3d5ff5ba98.gif][]

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

![2789632-34d9b683b252c7a3.png][]

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

![2789632-fd50bb51f411785c.png][]

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery Moblie练习</title>
        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <link rel="stylesheet" href="css/unslider-dots.css" />
        <link rel="stylesheet" href="css/unslider.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/unslider.js"></script>
    
        
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    
        <style type="text/css">
            .ui-header .ui-title{
                font-size: 45px;
            }
            .nav_title{color:#CCCC;}
            .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-mini .ui-btn-inner {
                font-size: 45.5px;
                padding: .55em 11px .5em;
            }
            .ui-btn-text{font-size: 45px;}
            .my_bottom{position: absolute;bottom:0px;width:100%;}
            /*轮播图样式*/
            .banner { position: relative; overflow: auto; }
            .banner li { list-style: none; }
            .banner ul li { float: left; }
            .carousel_img{width: 100%;height: 300px;}
            .unslider-nav ol li {
                display: inline-block;
                width: 6px;
                height: 6px;
                margin: 0 4px;
                background: transparent;
                border-radius: 5px;
                overflow: hidden;
                /* text-indent: -999em; */
                border: 2px solid #ab2020;
                cursor: pointer;
            }
            .ui-field-contain label.ui-input-text {
                vertical-align: top;
                display: inline-block;
                width: 20%;
                margin: 0 2% 0 0;
                font-size: 37px;
            }
            #lname{}
        </style>
        <script language="JavaScript">
            $(function() {
                $('.banner').unslider();
            });
        </script>
    </head>
    <body>
    
    <div data-role="header">
        <a href="#" data-role="button">首页</a>
        <h1 class="nav_title">欢迎来到我的主页</h1>
        <a href="#" data-role="button">搜索</a>
    </div>
    
    <div class="banner">
        <ul>
            <li>![](img/01.jpg)</li>
            <li>![](img/02.jpg)</li>
            <li>![](img/01.jpg)</li>
        </ul>
    </div>
    
    <form method="post" action="demoform.asp" style="margin-top: 20px;">
        <div data-role="fieldcontain">
            <label for="fname">First name:</label>
            <input type="text" name="fname" id="fname"><br/><br/><br/>
            <label for="lname">Last name:</label>
            <input type="text" name="lname" id="lname">
        </div>
    </form>
    
    
    <div data-role="footer" class="my_bottom">
        <a href="#" data-role="button">新浪微博</a>
        <a href="#" data-role="button">腾讯微博</a>
        <a href="#" data-role="button">QQ 空间</a>
        <a href="#" data-role="button">微信聊天</a>
    </div>
    </body>
    </html>

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

![2789632-f87fc51a2237dbfd.png][]

界面

代码：

template>
      <div>
        
        <x-header :left-options="{showBack: false}">小区物业APP</x-header>
        
        <swiper :list="demo03_list" auto style="width:100%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>
    
    
        
        <flexbox  :gutter="0" style="margin-top: 20px;">
          <flexbox-item>
            <a class="item item1" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img meishi"></div>
              <div class="text">社区动态</div>
            </a>
          </flexbox-item>
          <flexbox-item>
            <a class="item item2" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img dianying"></div>
              <div class="text">周边商家</div>
            </a>
          </flexbox-item>
          <flexbox-item>
            <a class="item item3" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img jiudian"></div>
              <div class="text">房屋租售</div>
            </a>
          </flexbox-item>
          <flexbox-item >
            <a class="item item4" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img yule"></div>
              <div class="text">社区论坛</div>
            </a>
          </flexbox-item>
        </flexbox>
        <flexbox  :gutter="0">
          <flexbox-item>
            <a class="item item5" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img huoguo"></div>
              <div class="text">便民工具</div>
            </a>
          </flexbox-item>
          <flexbox-item>
            <a class="item item6" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img lvyou"></div>
              <div class="text">服务预约</div>
            </a>
          </flexbox-item>
          <flexbox-item>
            <a class="item item7" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img daijinquan"></div>
              <div class="text">优惠专区</div>
            </a>
          </flexbox-item>
          <flexbox-item class="vux-1px-r">
            <a class="item item8" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img ktv"></div>
              <div class="text">物管服务</div>
            </a>
          </flexbox-item>
        </flexbox>
        <flexbox  :gutter="0">
          <flexbox-item>
            <a class="item item4" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img yule"></div>
              <div class="text">代收快递</div>
            </a>
          </flexbox-item>
          <flexbox-item>
            <a class="item item1" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img dianying"></div>
              <div class="text">门禁放行</div>
            </a>
          </flexbox-item>
          <flexbox-item>
            <a class="item item5" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img meishi"></div>
              <div class="text">装修申请</div>
            </a>
          </flexbox-item>
          <flexbox-item class="vux-1px-r">
            <a class="item item3" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
              <div class="img jiudian"></div>
              <div class="text">物品租赁</div>
            </a>
          </flexbox-item>
        </flexbox>
    
    
        
        <card>
          <div slot="content" class="card-demo-flex card-demo-content01" style="margin-bottom:0px;">
            <div>
              <span>![](../static/img/chinaz17.png)</span>
              <br/>
              个人中心
            </div>
            <div>
              <span>![](../static/img/chinaz10.png)</span>
              <br/>
              费用查询
            </div>
            <div>
              <span>![](../static/img/chinaz11.png)</span>
              <br/>
              物业管理
            </div>
            <div>
              <span>![](../static/img/chinaz16.png)</span>
              <br/>
              邻里互动
            </div>
          </div>
        </card>
      </div>
    </template>
    
    <script>
      import XHeader from 'vux/dist/components/x-header'
      import Swiper from 'vux/dist/components/swiper'
      import Flexbox from 'vux/dist/components/flexbox'
      import FlexboxItem from 'vux/dist/components/flexbox-item'
      import Divider from 'vux/dist/components/divider'
      import Card from 'vux/dist/components/card'
    
      const imgList = [
        './static/img/1.jpg',
        './static/img/1.jpg',
        './static/img/1.jpg'
      ]
      const demoList = imgList.map((one, index) => ({
        url: 'javascript:',
        img: one
      }))
      export default {
        components: {
          XHeader,
          Swiper,
          Flexbox,
          FlexboxItem,
          Divider,
          Card
        },
        method: {
        },
        data () {
          return {
            demo03_list: demoList,
            menus: {
              menu1: 'Take Photo',
              menu2: 'Choose from photos'
            },
            showMenus: true
          }
        }
      }
    </script>
    <style>
      @import "../node_modules/vux/dist/vux.css";
      @import "../node_modules/vux/dist/styles/1px.css";
      .vux-demo .test{
        height:50px;
        text-align:center;
        line-height: 50px;
      }
      .vux-demo .vux-flexbox {
        background-color: #fff;
      }
      .item {
        display: block;
        box-sizing: border-box;
        font-size: 12px;
        color: #303030;
        position: relative;
        margin-bottom: 10px;
      }
      .img {
        width: 40px;
        height: 40px;
        margin: 8px auto 5px;
        background-repeat: no-repeat;
        background-size: 40px auto!important;
        background-position: center;
      }
      .text {
        font-size: 13px;
        text-align: center;
        line-height: 1em;
      }
        .card-demo-flex {
        display: flex;
      }
      .card-demo-content01 {
        padding: 10px 0;
      }
      .card-padding {
        padding: 15px;
      }
      .card-demo-flex > div {
        flex: 1;
        text-align: center;
        font-size: 12px;
      }
      .card-demo-flex span {
        color: #f74c31;
      }
    </style>

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

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-c361d6fa68db64da.gif]: /images/20210615/acb511f1e96942d999852eb110ad30fc.png
[2789632-5045fc9f6d8a15b4.png]: /images/20210615/b12638aa137842259d3022d1517c5dfc.png
[2789632-d8e3dae4db1896b7.png]: /images/20210615/4b2cfeb29cb04f8ea7dffa6b9c53c326.png
[2789632-509aedf92bc15634.png]: /images/20210615/e1ab19fb3c494491b446a8012dc48086.png
[2789632-ef67fb9734b9249e.png]: /images/20210615/9945fcfc51c04befb81c7ecc313e488c.png
[2789632-b0f85d65b3fef526.png]: /images/20210615/575d549d534d40b4ab1a1f41075cffd2.png
[2789632-2cb686fb9c3f78c4.png]: /images/20210615/3bb0444b7b7f441e9c4a5ee0eb202f79.png
[2789632-78fffc2223e6a50d.png]: /images/20210615/383c8b56016a43799953114d87d328a6.png
[2789632-e9cf15c45617a85f.png]: /images/20210615/642c49dab30d4a85996a324fe37996ad.png
[http_jquerymobile.weebly.com_jquerymobile1997936733.html]: http://jquerymobile.weebly.com/jquerymobile1997936733.html
[http_jquerymobile.com]: http://jquerymobile.com/
[2789632-23c63608a4bb537c.png]: /images/20210615/8c1fae5a7ea14185a3b222f01bf3bc0d.png
[http_www.w3school.com.cn_jquerymobile_jquerymobile_toolbars.asp]: http://www.w3school.com.cn/jquerymobile/jquerymobile_toolbars.asp
[2789632-ac066795919e38c7.png]: /images/20210615/c0a5df31f9474a178245365c8a7d3018.png
[2789632-75ab72752fb5547b.png]: /images/20210615/eaed0877061d4ecc8cf08e0e93707f0c.png
[2789632-cebddb49f02f7edb.png]: /images/20210615/b18696a1f83444068fa80b296eb97b9b.png
[2789632-985dc79f556d48ad.png]: /images/20210615/d51878fce50e43f99381699084daf0e1.png
[2789632-13555d81176b3f92.png]: /images/20210615/809e3510d797435c80c4fdc42d2d4b0f.png
[2789632-e64695c455801c84.png]: /images/20210615/ec2bafc317174e2683e50d7a107ad135.png
[2789632-e0548a99cac5f75d.png]: /images/20210615/489bfe0bca0c41f686f58eb6f8463634.png
[2789632-3d916bbff9180f5d.png]: /images/20210615/5524c07b51a146ec9139a90626373c46.png
[2789632-7e0e4d3d5ff5ba98.gif]: /images/20210615/f598c2ace99f4d9599bcafcb354ed550.png
[2789632-34d9b683b252c7a3.png]: /images/20210615/f3ddbd05b82443b1ad320f3285543aba.png
[2789632-fd50bb51f411785c.png]: /images/20210615/4d64be0198ea4bd487b8a0d375a69243.png
[2789632-f87fc51a2237dbfd.png]: /images/20210615/1863195a7a65478389d62a7b64738b18.png
[2789632-3b18269684ea9294.png]: /images/20210615/407de16571e54d4781f1d031b1e6c530.png