快快乐乐使用Jquery mobile--------第一章认识Jquerymobile

1、第一章:认识Jquery mobile

    什么是Jquery mobile,简单点来说,是一个工具,就像.net框架,封装了一些API,能够让你快速的开发部署出一个网站。它利用了Jquery的技术,配合上html5 和css,让你能够简简单单,快快乐乐的做一个网站。当然,这网站是用在手机上的。

 

准备:

  我们需要准备什么东西呢? 当然,是开发工具、调试工具和手机(当然最好是苹果6plus啦,可惜俺买不起)……………………

  首先说说开发工具,看某大师级别的教学视频,使用的是A字开头的一款开发工具,俺试着安装了一下,需要安装java的包包,装完以后,居然安装正式工具的时候跳不过去,最后度娘了一下,发现好像该软件不支持64位的系统,好吧,哥飘过,只能默默的打开DW CS6了,对,DreamWeaver Cs6 盗版的……对,从ASP时代到htm5时代,我发现最顺手的还是DW 。好吧,我会被轻视了。当然除了这个以外 ,如果是不喜欢写代码的,只是用来做demo的,请使用Codiqa吧,据说是一款可视化的jqm的工具,好吧,我是百度的,我自己倒是没有用过,我还是喜欢Ctrl+C+V代码。

     调试工具方面,当然是浏览器了,html5的直接可以用浏览器来打开,当然,使用的是google的浏览器,那个叫啥…… 好吧,自己去google一下吧,google不了? 那好吧,是叫chrome,恩,为啥选它,因为它可以模拟手机环境,是的,只要把它缩小到手机尺寸就可以了。当然有的人说火狐火狐,我支持,好吧,你就装一个座位备用吧。

  再说说jqm包吧,来,我们直接看看代码

  <script type="text/javascript" charset="utf-8" src="jquery.js"></script>

首先引入的是jquery 这个是最关键的一个包包啦,当然,你可以用min版 或者是压缩版,当然个人喜爱。

   <link rel="stylesheet" href="jquery-mobile.css" />

    document.write("<script type='text/javascript' charset='utf-8' src='jquery-mobile.js?" + Math.random() + "'></" + "script>");

第二步要准备的当然是mobile的css 和 js 包了,有人问什么是css,对不起,解释不了,还是度娘吧。

最后我们要看一下,我们的html5里面的<head></head> 里面还需要什么东东。

<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

对了,就是这两行,第一行,应该是html5的关键,可以适应浏览器,第二行就不解释了,标准配置,大家把它抄上就好了。恩,那我们完成了第一课的学习。好吧,大家觉得还是不够,那我们贴贴代码,看看第一节课学习了 html5里面的 head的配置吧。

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title>第一个程序</title>
 5 <meta name="viewport" content="width=default-width; user-scalable=no" />
 6 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 7 
 8 <script type="text/javascript" charset="utf-8" src="jquery.js"></script>
 9 <link rel="stylesheet" href="jquery-mobile.css" />
10 <script type="text/javascript" charset="utf-8">
11 document.write("<script type='text/javascript' charset='utf-8' src='jquery-mobile.js?" + Math.random() + "'></" + "script>");
12 </script>
13 
14 </head>
15 
16 <body></body>

 

posted @ 2014-10-19 22:21  风谷.Net  阅读(265)  评论(0编辑  收藏  举报