原副标题：Android App合作开发超新颖示例 | jQuery Mobile在Android智能手机上建立Grignols紧密结合的导航系统按键
jQuery Mobile是jQuery 在智能手机上和智能手机电子设备上的版，jQuery Mobile不但包涵jQuery核心理念库，所以提供更多了两个完备标准化的jQuery终端UI架构，全力支持亚洲地区非主流的终端网络平台；jQuery Mobile将“写得更少、做得更多”这一经营理念提高到了捷伊层级。上面这个示例模拟了采用jQuery Mobile在Android智能手机上建立Grignols紧密结合的导航系统按键。此示例在Android Studio合作开发自然环境中撰写且运转在Android智能手机上。
01
示例机能
此示例主要就透过增设div原素的data-role特性为navbar，建立Grignols紧密结合的导航系统按键。当示例运转后，在导航系统栏中将再次出现Grignols紧密结合的按键，空格键下述按键，将在上方提示信息这边空格键了别的按键，效用如图1所示。
■ 图1
02
同时实现标识符
<!DOCTYPE html>
< html>
< head>
< metacharset= “utf-8”>
< metaname= “viewport”content= “width=device-width, initial-scale=1”>
<!–引用jQuery Mobile架构的css样式–>
< linkrel= “stylesheet”href= “https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<!–引用jQuery架构–>
< src= “https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js”> </ >
<!–引用jQuery Mobile架构–>
< src= “https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ >
< language= “Java”>
$( document).ready( function( ) {
$( “#myBar li”).click( function( ) {
$( “#myInfo”).text( “这边空格键的按键是：”+$( this).text);
}); });
</ >
</ head>
< body>
< divdata-role= “page”>
< divdata-role= “navbar”id= “myBar”>
< ul> < li> < ahref= “#”data-icon= “home”> 首页 </ a> </ li>
< li> < ahref= “#”data-icon= “search”> 搜索 </ a> </ li>
< li> < ahref= “#”data-icon= “gear”> 增设 </ a> </ li>
< li> < ahref= “#”data-icon= “info”> 评论 </ a> </ li>
< li> < ahref= “#”data-icon= “refresh”> 刷新 </ a> </ li> </ ul> </ div>
< center> < pid= “myInfo”> </ p> </center>
</ div> </ body> </ html>
03
标识符说明
上面这段标识符在MyCode＼MySampleG15＼app＼src＼main＼assets＼myPage.html文件中。在这段标识符中，data-role=”navbar”表示建立两个导航系统栏。data-icon特性用于增设(导航系统栏上的)按键图标，data-icon特性全力支持的图标如表1所示。
■ 表1data-icon特性全力支持的图标
在Android应用中，myPage.html页面文件通常存放在assets文件夹(如果不存在，请先建立此文件夹)中，并采用WebView控件显示。在布局文件中，WebView控件的主要就标识符如下：
<?xml version=“1.0”encoding= “utf-8”?>
< RelativeLayoutxmlns:android= “http://schemas.android.com/apk/res/android”
xmlns:tools= “http://schemas.android.com/tools”
android:id= “@+id/activity_main”
android:layout_width= “match_parent”
android:layout_height= “match_parent”
tools:context= “com.bin.luo.mysample.MainActivity”>
< WebViewandroid:id= “@+id/myWebView”
android:layout_width= “match_parent”
android:layout_height= “match_parent”/>
</ RelativeLayout>
上面这段标识符在MyCode＼MySampleG15＼app＼src＼main＼res＼layout＼activity_main.xml文件中。WebView控件加载页面文件myPage.html的主要就标识符如下：
publicclassMainActivityextendsActivity{
WebView myWebView;
@Override
protectedvoidonCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myWebView = (WebView) findViewById(R.id.myWebView);
myWebView.setWebChromeClient(newWebChromeClient);
WebSettings myWebSettings = myWebView.getSettings;
myWebSettings.setJavaEnabled(true);
myWebView.loadUrl( “file:///android_asset/myPage.html”); //加载页面文件
}
}
上面这段标识符在MyCode＼MySampleG15＼app＼src＼main＼java＼com＼bin＼luo＼mysample＼ MainActivity.java文件中。在这段标识符中，myWebView.loadUrl(“file:///android_assets/myPage.html”)表示加载并显示在assets文件夹中的myPage.html页面文件。需要注意的是，由于jQuery Mobile应用通常需要引用在网络服务器上的jquery.min.js、jquery.mobile-1.4.5.min.css、jquery.mobile-1.4.5.min.js等文件，因此需要在AndroidManifest.xml文件中添加权限，此设置即意味着测试本书的所有示例必须保持网络畅通。
此示例的完备标识符在MyCode＼MySampleG15文件夹中。
04
补充说明
在测试标识符时，必须保持网络畅通。
05
源标识符下载
“Android App合作开发超新颖标识符001”即可获得完备源标识符。
06
参考书籍
扫码优惠购书
《Android App合作开发超新颖标识符集锦——jQuery Mobile+OpenCV+O》
作者：罗帅、罗斌
定价：99元
问题描述+解决方案+真实源码+效用截图
介绍jQuery Mobile、OpenCV、OpenGL等在Android网络平台运转的应用
300个示例，提供更多完备源标识符，边看边做边学
责任编辑：
