jQuery Mobile之入门 -

朝着梦想

浏览: 2719 次
性别:
来自: 长沙

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Mobile之入门

博客分类：

java

大四了，终于有时间把一些该学习的知识学习一下了。前一段时间学习了android，发现布局真的好烦。最近学习了jQuery Mobile，发现它真的省去了好多事。

今天，就让我总结一下我的jQuery Mobile入门遇到的一些问题。

首先，在运行代码之前，我们需要配置运行环境。运行环境很简单了，就是android模拟器了，要按照Java JDK----Android SDK的顺序来了，然后就是创建Android模拟器了。最后我们还要去jquery官网上去下载jqeury.zip和jquery mobile.zip文件。另外推荐几款，jQuery Mobile的开发工具：Notepad++,DreamWeaver。

我们在运行代码前，需要先新建一个Android项目，然后将webView控件加入到页面布局中，

如图：

然后，我们需要在AndroidMainfest.xml文件中加入网络权限：

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

最后我们需要需要在MainActivity文件中加入如下代码：

protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		webview=(WebView)findViewById(R.id.webView1);
		WebSettings webSettings = webview.getSettings();
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);
        webview.loadUrl("file:///android_asset/test2.html");//本地
        
	}

注意一点：我们的html文件和jquery文件都是保存在我们所建立android项目的assets目录下的。如下图所示：

如图所示：其中css和js路径是jQuery Mobile的文件包。

我们开始写第一个入门程序了：保存在test2.html文件中，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<title>无标题文档</title>
</head>

<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="content">
    <p>现在我已经成为一名移动开发者！</p>
  </div>

  <div data-role="footer">
  <h1>页脚文本</h1>
  </div>
</body>
</html>

代码中：<!DOCTYPE html>：是HTML5新的标签定义I，表示一个HTML5文档的开始。在任何使用jQuery Mobile实现的页面中，必须以<！DOCTYPE html>中开始；接下来定义jQuery mobile的路径。之后的代码：

<div data-role ="page">表示一个页面，<div data-role="content">表示页面中的征文部分。

<header>表示页面中的页眉，<footer>表示页面中的页脚。

最后我们就可以在模拟器中运行我们的第一个程序了：

要是遇到下面的问题，解决办法在下面：

[2014-07-18 16:18:26 - ] You must restart adb and Eclipse.
[2014-07-18 16:18:26 - ] Please ensure that adb is correctly located at 'D:\java\sdk\platform-tools\adb.exe' and can be executed.

解决问题：

百度google大家多说的是任务管理器 kill掉adb 或者重启adb server，但我任务管理器就没有adb ,猜测是某个程序占用了adb端口。于是按此思路查找。

解决步骤：

1.打开cmd界面，输入命令 netstat -ano ,获取如下界面

其中发现了

进程id为4136的进程占用了adb的默认端口5037，这时候就发现了问题的所在

2.打开任务管理器，点击查看，进入选择列选项界面，如下

将pid的显示勾上

3.根据对应的pid将占用端口的进程结束，然后重启eclipse

4.恭喜你，应该可以正常使用了！！

好了，我们的界面出来了：：