Android App开发超实用实例 | jQuery Mobile在Android手机上创建图文结合的导航按钮
jQuery Mobile是jQuery 在手机上和平板设备上的版本，jQuery Mobile不仅包含jQuery核心库，而且提供了一个完整统一的jQuery移动UI框架，支持全球主流的移动平台；jQuery Mobile将“写得更少、做得更多”这一理念提升到了新的层次itunes下载的固件在哪个文件夹 。下面这个实例演示了使用jQuery Mobile在Android手机上创建图文结合的导航按钮。此实例在Android Studio开发环境中编写且运行在Android手机上。
01
实例功能
此实例主要通过设置div元素的data-role属性为navbar，创建图文结合的导航按钮itunes下载的固件在哪个文件夹 。当实例运行之后，在导航栏上将出现图文结合的按钮，单击任一按钮，将在下方提示刚才单击了哪个按钮，效果如图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= ";
<!--引用jQuery框架-->
< src= ";
<!--引用jQuery Mobile框架-->
< src= ";
< 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文件中itunes下载的固件在哪个文件夹 。在这段代码中，data-role="navbar"表示创建一个导航栏。data-icon属性用于设置(导航栏上的)按钮图标，data-icon属性支持的图标如表1所示。
■ 表1data-icon属性支持的图标
在Android应用中，myPage.html页面文件通常存放在assets文件夹(如果不存在，请先创建此文件夹)中，并使用WebView控件显示itunes下载的固件在哪个文件夹 。在布局文件中，WebView控件的主要代码如下：
<?xml version= "1.0"encoding= "utf-8"?>
< RelativeLayoutxmlns:android= ""
xmlns: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文件中itunes下载的固件在哪个文件夹 。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文件中itunes下载的固件在哪个文件夹 。在这段代码中，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文件夹中itunes下载的固件在哪个文件夹 。
04
补充说明
在测试代码时，必须保持网络畅通itunes下载的固件在哪个文件夹 。
05
源代码下载
关注微信公众号，后台回复关键词 “Android App开发超实用代码001” 即可获得完整源代码itunes下载的固件在哪个文件夹 。
06
参考书籍
扫码优惠购书
《Android App开发超实用代码集锦——jQuery Mobile+OpenCV+O》
作者：罗帅、罗斌
定价：99元
问题描述+解决方案+真实源码+效果截图
介绍jQuery Mobile、OpenCV、OpenGL等在Android平台运行的应用
300个实例itunes下载的固件在哪个文件夹 ，提供完整源代码，边看边做边学
爱资源吧版权声明：以上文中内容来自网络，如有侵权请联系删除，谢谢。