以前学习的jquery mobile的一些笔记

来源：互联网发布：新加坡装甲车事件知乎编辑：程序博客网时间：2024/04/27 22:40

Html5+css+juquery mobile 学习小结

一、开发环境的搭建

1.Java SDK

2.Eclipse

3.Android SDK（DOWNLOAD FOR OTHERPLATFORMS 选择符合自己系统的）

4.ADT Plugin

5.PhoneGap

说明

1. java SDk根据自己的计算机系统挑选安装包下载安装

2. Eclipse要是3.4++以上的版本我用的是3.8（建议使用classic版的）

3. http://dl.google.com/android/installer_r21.1-windows.exe 这个直接下载里面有 Android SDK

4. 打开Eclipse中的菜单“Help”->”InstallNewSoftware”进入软件安装界面，点击“Add”按钮，名字写成ADT Plugin网址https://dl-ssl.google.com/android/eclipse/

5. 单击Eclipse上面的Android manager下载

The latestTools packages (check the Tools folder).

The latestversion of Android (check the first Android folder).

The AndroidSupport Library (open the Extras folder and check Android Support Library).

6. PhoneGap包不用安装，直接解压。

下载

1. jquery mobile.zip包用到里面的 jquery.mobile-1.3.0.min.js和jquery.mobile-1.3.0.min.css两个文件

2. Jquery 1.9.1（可能直接就打开了文件自己复制下来然后新建一个叫做）

要下载的就是这些了

二、开始创建

1.在eclipse中新建Android Project，名字为myfristapp

2.在项目的目录下，建个文件夹：

/assets/www

3.进入将刚刚下载并解压的PhoneGap包里Anroid目录，我们需要的资源都在这个目录下。将phonegap-x.x.x.js这个js文件(具体名称视当时下载的版本而定，重命名为phonegap.js)copy到/assets/www目录下,

把phonegap.jar文件copy到/libs目录下。

再把xml目录copy到android项目的res目录下。

3. 在/assets/www下建立index.html文件

4. 将以下权限配置的xml内容copy到AndroidManifest.xml文件中：

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />

5.将以下内容添加到AndroidManifest.xml文件的activity标签中:

android:configChanges="orientation|keyboardHidden"

6. AndroidManifest.xml最后看起来会像这样

http://images.cnblogs.com/cnblogs_com/random/phonegap/manifest.jpg

7.在刚刚新建的Android Project中找到libs目录并在phonegap.jar上点击右键，选择 Build Path->Add to Build Path再把xml目录（xml整个文件夹）copy到android项目的res目录下。

8.最后再修改下src下的Java主文件：

1)添加importcom.phonegap.*;

2)将类改成继承为DroidGap;

3)删掉importandroid.app.Activity;

4)把setContentView()这行替换为super.loadUrl("file:///android_asset/www/index.html");

记得要protected改为public

5)最后看起来就像这样：http://images.cnblogs.com/cnblogs_com/random/phonegap/2011-12-27_223635.jpg

所有环境搭建完成

编写程序

在www下面建立自己的index.html文件

标准界面代码

<!DOCTYPE HTML>

<html>

<head>

<title>index</title>

</head>

<body>

<h3>移动学习系统-导读</h3>

</div>

<div>

</div>

</ul>

</div>

</body>

</html>

红色字体为标注可以删除

下面是几个可能会用到的代码和标签的用法：

这个是一个关于video标签使用的说明

<videocontrols="controls"代表能够被用户控制的 autoplay="autoplay"代表自动播放的 width="90%" height="90%">

Your browser does not support the video tag.

以上三种视频格式是不同浏览器支持的编码格式

Audio的用法是类似的

</video>

audio的用法类似

上传文件的用法：（里面有两种方式可以按照自己的需要选一个）

<form>

<labelfor="file-1">File: data-clear-btn="false"</label>

<inputtype="file"data-clear-btn="false"name="file-1"id="file-1"value="">

<labelfor="file-2">File: data-clear-btn="true"</label>

<inputtype="file"data-clear-btn="true"name="file-2"id="file-2"value="">

</form>

选择框：

<form>

<fieldsetdata-role="controlgroup"data-iconpos="right">

<legend>Vertical, icon right, mini sized:</legend>

<inputtype="radio"name="radio-choice-w-6"id="radio-choice-w-6a"value="on"checked="checked">

<labelfor="radio-choice-w-6a">One</label>

<inputtype="radio"name="radio-choice-w-6"id="radio-choice-w-6b"value="off">

<labelfor="radio-choice-w-6b">Two</label>

<inputtype="radio"name="radio-choice-w-6"id="radio-choice-w-6c"value="other">

<labelfor="radio-choice-w-6c">Three</label>

</fieldset>

</form>

这个地在里面的代码应该都会用上自己去看效果和代码（http://view.jquerymobile.com/1.3.0/docs/widgets/popup/）

时下手机上非常流行的左滑和右滑动的代码和例子，里面的代码都可以看见的，可以去高度模仿和学习（http://view.jquerymobile.com/1.3.0/docs/widgets/panels/panel-fixed.php ）

弹出一个最前面的对话框背后的页面无法动

<ahref="#"data-prefetch="true"data-rel="dialog">This link will prefetch the page</a>

底部导航布局

<divdata-role="footer" data-id="foo1"data-position="fixed">

<ul>

<li><a href="#">Friends</a></li>

<li><a href="#">Albums</a></li>

<li><a href="#">Emails</a></li>

</ul>

</div>

</div>

分隔列表并支持下载还有计数的小泡文件上传：

<li data-role="list-divider"> 我是分隔行啦！！ <spanclass="ui-li-count">2</span></li>

<imgsrc="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-bb.jpg"class="ui-li-icon">

<lidata-role="list-divider">我是分隔行啦！！<spanclass="ui-li-count">2</span></li>

<imgsrc="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-bb.jpg"class="ui-li-icon">

<spanclass="ui-li-count">0</span>

</a>

<a href="#purchase"data-rel="popup" data-position-to="window"data-transition="pop">Purchase album</a>

</li>

</ul>

<a href=""data-role="button" data-rel="back"data-inline="true" data-mini="true">Cancel</a>

</div>

网格布局应该是会用到的：

<divclass="ui-block-a"><button type="button"data-theme="b">More</button></div>

</div>

<divclass="ui-grid-a">

<divclass="ui-block-a"><button type="button"data-theme="c">Previous</button></div>

<divclass="ui-block-b"><button type="button"data-theme="c">Next</button></div>

<divclass="ui-block-a"><button type="button"data-theme="c">Previous</button></div>

<divclass="ui-block-b"><button type="button"data-theme="c">Next</button></div>

</div>

以下是注意事项：

1. 一般情况下 data-role="button"的话是会一个按钮宽度是会全屏大小的要是想根据元素大小显示的话就加一句data-inline="true"

2.如果想要将几个button放在一起没有间隔的话可以是用data-role="controlgroup"默认是行抱团 data-type="horizontal" 加了这个就可以变成列抱团了，缺点是只能够按照元素大小变化宽度，有一个办法可以让button平均分配宽度的就是在这个网页里面的底部导航的布局方式

3.jquerymobile 有丰富的表单布局UI若：折叠类型的（Collapsibles），

4.虽然data-icon=""data-iconpos="要图标怎么摆有left right top 等参数 " 可以添加各种有用的图标，但是需要现将图片下载下来jquery mobilecss里面的连接的地址是在服务站点根目录的img文件夹下面