JQuery Mobile试试水

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

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

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

  1. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  2. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  3. <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

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

  1. <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
（JQuery Mobile官网）：http://jquerymobile.com/
查找资料才发现，原来这也并不是一件简单的事情，那就搭一个简单的界面好了……
下载一个简单的psd文件和PS中……

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

2789632-23c63608a4bb537c.png

说好的psd呢？？？

等了那么久……打开竟然这么一个玩意儿……
那就随便搭个界面好了。界面的网格排布我就不做了，做几块算几块吧，不过一般做的话应该会先把整体的网格做一下，一块一块做，思路清晰一些。
找资料的时候发现原来在W3CSchool里也有相应的教程的。 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：

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

html:

  1. <!--底部-->
  2. <div data-role="footer" class="my_bottom">
  3.     <a href="#" data-role="button">新浪微博</a>
  4.     <a href="#" data-role="button">腾讯微博</a>
  5.     <a href="#" data-role="button">QQ 空间</a>
  6.     <a href="#" data-role="button">微信聊天</a>
  7. </div>

效果图：

2789632-e0548a99cac5f75d.png

头部+底部

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

2789632-3d916bbff9180f5d.png

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

2789632-7e0e4d3d5ff5ba98.gif

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

2789632-34d9b683b252c7a3.png

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

2789632-fd50bb51f411785c.png

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery Moblie练习</title>
  6.     <!--带有unslider的，可以通过git下载-->
  7.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
  8.     <link rel="stylesheet" href="css/unslider-dots.css" />
  9.     <link rel="stylesheet" href="css/unslider.css" />
  10.     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  11.     <script src="js/unslider.js"></script>
  13.     <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
  14.     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  16.     <style type="text/css">
  17.         .ui-header .ui-title{
  18.             font-size: 45px;
  19.         }
  20.         .nav_title{color:#CCCC;}
  21.         .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-mini .ui-btn-inner {
  22.             font-size: 45.5px;
  23.             padding: .55em 11px .5em;
  24.         }
  25.         .ui-btn-text{font-size: 45px;}
  26.         .my_bottom{position: absolute;bottom:0px;width:100%;}
  27.         /*轮播图样式*/
  28.         .banner { position: relative; overflow: auto; }
  29.         .banner li { list-style: none; }
  30.         .banner ul li { float: left; }
  31.         .carousel_img{width: 100%;height: 300px;}
  32.         .unslider-nav ol li {
  33.             display: inline-block;
  34.             width: 6px;
  35.             height: 6px;
  36.             margin: 0 4px;
  37.             background: transparent;
  38.             border-radius: 5px;
  39.             overflow: hidden;
  40.             /* text-indent: -999em; */
  41.             border: 2px solid #ab2020;
  42.             cursor: pointer;
  43.         }
  44.         .ui-field-contain label.ui-input-text {
  45.             vertical-align: top;
  46.             display: inline-block;
  47.             width: 20%;
  48.             margin: 0 2% 0 0;
  49.             font-size: 37px;
  50.         }
  51.         #lname{}
  52.     </style>
  53.     <script language="JavaScript">
  54.         $(function() {
  55.             $('.banner').unslider();
  56.         });
  57.     </script>
  58. </head>
  59. <body>
  60. <!--头部导航-->
  61. <div data-role="header">
  62.     <a href="#" data-role="button">首页</a>
  63.     <h1 class="nav_title">欢迎来到我的主页</h1>
  64.     <a href="#" data-role="button">搜索</a>
  65. </div>
  66. <!--添加一个轮播图-->
  67. <div class="banner">
  68.     <ul>
  69.         <li>![](img/01.jpg)</li>
  70.         <li>![](img/02.jpg)</li>
  71.         <li>![](img/01.jpg)</li>
  72.     </ul>
  73. </div>
  74. <!--表单-->
  75. <form method="post" action="demoform.asp" style="margin-top: 20px;">
  76.     <div data-role="fieldcontain">
  77.         <label for="fname">First name:</label>
  78.         <input type="text" name="fname" id="fname"><br/><br/><br/>
  79.         <label for="lname">Last name:</label>
  80.         <input type="text" name="lname" id="lname">
  81.     </div>
  82. </form>
  84. <!--底部-->
  85. <div data-role="footer" class="my_bottom">
  86.     <a href="#" data-role="button">新浪微博</a>
  87.     <a href="#" data-role="button">腾讯微博</a>
  88.     <a href="#" data-role="button">QQ 空间</a>
  89.     <a href="#" data-role="button">微信聊天</a>
  90. </div>
  91. </body>
  92. </html>

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

2789632-f87fc51a2237dbfd.png

界面

代码：

  1. template>
  2.   <div>
  3.     <!--header-->
  4.     <x-header :left-options="{showBack: false}">小区物业APP</x-header>
  5.     <!--轮播图片-->
  6.     <swiper :list="demo03_list" auto style="width:100%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>
  9.     <!--内部模块划分-->
  10.     <flexbox  :gutter="0" style="margin-top: 20px;">
  11.       <flexbox-item>
  12.         <a class="item item1" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  13.           <div class="img meishi"></div>
  14.           <div class="text">社区动态</div>
  15.         </a>
  16.       </flexbox-item>
  17.       <flexbox-item>
  18.         <a class="item item2" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  19.           <div class="img dianying"></div>
  20.           <div class="text">周边商家</div>
  21.         </a>
  22.       </flexbox-item>
  23.       <flexbox-item>
  24.         <a class="item item3" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  25.           <div class="img jiudian"></div>
  26.           <div class="text">房屋租售</div>
  27.         </a>
  28.       </flexbox-item>
  29.       <flexbox-item >
  30.         <a class="item item4" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  31.           <div class="img yule"></div>
  32.           <div class="text">社区论坛</div>
  33.         </a>
  34.       </flexbox-item>
  35.     </flexbox>
  36.     <flexbox  :gutter="0">
  37.       <flexbox-item>
  38.         <a class="item item5" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  39.           <div class="img huoguo"></div>
  40.           <div class="text">便民工具</div>
  41.         </a>
  42.       </flexbox-item>
  43.       <flexbox-item>
  44.         <a class="item item6" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  45.           <div class="img lvyou"></div>
  46.           <div class="text">服务预约</div>
  47.         </a>
  48.       </flexbox-item>
  49.       <flexbox-item>
  50.         <a class="item item7" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  51.           <div class="img daijinquan"></div>
  52.           <div class="text">优惠专区</div>
  53.         </a>
  54.       </flexbox-item>
  55.       <flexbox-item class="vux-1px-r">
  56.         <a class="item item8" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  57.           <div class="img ktv"></div>
  58.           <div class="text">物管服务</div>
  59.         </a>
  60.       </flexbox-item>
  61.     </flexbox>
  62.     <flexbox  :gutter="0">
  63.       <flexbox-item>
  64.         <a class="item item4" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  65.           <div class="img yule"></div>
  66.           <div class="text">代收快递</div>
  67.         </a>
  68.       </flexbox-item>
  69.       <flexbox-item>
  70.         <a class="item item1" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  71.           <div class="img dianying"></div>
  72.           <div class="text">门禁放行</div>
  73.         </a>
  74.       </flexbox-item>
  75.       <flexbox-item>
  76.         <a class="item item5" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  77.           <div class="img meishi"></div>
  78.           <div class="text">装修申请</div>
  79.         </a>
  80.       </flexbox-item>
  81.       <flexbox-item class="vux-1px-r">
  82.         <a class="item item3" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=社区动态">
  83.           <div class="img jiudian"></div>
  84.           <div class="text">物品租赁</div>
  85.         </a>
  86.       </flexbox-item>
  87.     </flexbox>
  90.     <!--<card :header="{title:'我的钱包'}">-->
  91.     <card>
  92.       <div slot="content" class="card-demo-flex card-demo-content01" style="margin-bottom:0px;">
  93.         <div>
  94.           <span>![](../static/img/chinaz17.png)</span>
  95.           <br/>
  96.           个人中心
  97.         </div>
  98.         <div>
  99.           <span>![](../static/img/chinaz10.png)</span>
  100.           <br/>
  101.           费用查询
  102.         </div>
  103.         <div>
  104.           <span>![](../static/img/chinaz11.png)</span>
  105.           <br/>
  106.           物业管理
  107.         </div>
  108.         <div>
  109.           <span>![](../static/img/chinaz16.png)</span>
  110.           <br/>
  111.           邻里互动
  112.         </div>
  113.       </div>
  114.     </card>
  115.   </div>
  116. </template>
  118. <script>
  119.   import XHeader from 'vux/dist/components/x-header'
  120.   import Swiper from 'vux/dist/components/swiper'
  121.   import Flexbox from 'vux/dist/components/flexbox'
  122.   import FlexboxItem from 'vux/dist/components/flexbox-item'
  123.   import Divider from 'vux/dist/components/divider'
  124.   import Card from 'vux/dist/components/card'
  126.   const imgList = [
  127.     './static/img/1.jpg',
  128.     './static/img/1.jpg',
  129.     './static/img/1.jpg'
  130.   ]
  131.   const demoList = imgList.map((one, index) => ({
  132.     url: 'javascript:',
  133.     img: one
  134.   }))
  135.   export default {
  136.     components: {
  137.       XHeader,
  138.       Swiper,
  139.       Flexbox,
  140.       FlexboxItem,
  141.       Divider,
  142.       Card
  143.     },
  144.     method: {
  145.     },
  146.     data () {
  147.       return {
  148.         demo03_list: demoList,
  149.         menus: {
  150.           menu1: 'Take Photo',
  151.           menu2: 'Choose from photos'
  152.         },
  153.         showMenus: true
  154.       }
  155.     }
  156.   }
  157. </script>
  158. <style>
  159.   @import "../node_modules/vux/dist/vux.css";
  160.   @import "../node_modules/vux/dist/styles/1px.css";
  161.   .vux-demo .test{
  162.     height:50px;
  163.     text-align:center;
  164.     line-height: 50px;
  165.   }
  166.   .vux-demo .vux-flexbox {
  167.     background-color: #fff;
  168.   }
  169.   .item {
  170.     display: block;
  171.     box-sizing: border-box;
  172.     font-size: 12px;
  173.     color: #303030;
  174.     position: relative;
  175.     margin-bottom: 10px;
  176.   }
  177.   .img {
  178.     width: 40px;
  179.     height: 40px;
  180.     margin: 8px auto 5px;
  181.     background-repeat: no-repeat;
  182.     background-size: 40px auto!important;
  183.     background-position: center;
  184.   }
  185.   .text {
  186.     font-size: 13px;
  187.     text-align: center;
  188.     line-height: 1em;
  189.   }
  190.     .card-demo-flex {
  191.     display: flex;
  192.   }
  193.   .card-demo-content01 {
  194.     padding: 10px 0;
  195.   }
  196.   .card-padding {
  197.     padding: 15px;
  198.   }
  199.   .card-demo-flex > div {
  200.     flex: 1;
  201.     text-align: center;
  202.     font-size: 12px;
  203.   }
  204.   .card-demo-flex span {
  205.     color: #f74c31;
  206.   }
  207. </style>

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

2789632-3b18269684ea9294.png

公众号.png

发表评论

表情：
评论列表 （有 0 条评论，422人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery Mobile

    jQuery Mobile是一个基于jQuery Core的触摸友好UI框架，适用于所有流行的移动，平板电脑和桌面平台。 官网：[http://jquerymobile.co

    小灰灰小灰灰/ 0 赞/ 614 阅读