JQuery实现Android底部按钮自动更新

JQuery实现Android底部按钮自动更新

前几天学了一下JQuery相关的知识，我发现很多东西当时看语法知识的时候有印象，可是过后没多久就记不太清楚了，所以我想还是做一点儿东西来实践一下吧~，于是我想起了前段时间写的一个混合开发的demo，里面的h5部分都是用基础的js来写的，我何不如先用JQuery把这个小demo改一下，巩固一下学习的知识呢！

没有看过上一遍文章的小伙伴，可以先简单的看一下，今天的这篇文章我只是讲h5相关的优化部分，关于原生和h5的js交互方法我就不再讲了，原文链接：http://blog.csdn.net/zhimingshangyan/article/details/52767939

运行的效果截图以及采取的容错措施，我都不再重复讲解了，上面的文章中都有详细的说明。

一、 页面布局

页面布局相对于上一个版本有了一些简化，当然CSS相关的代码并没有变化，只是对每个控件的属性定义进行了精简，源码如下：

<div>
<label id="one">
<input type="radio" name="tabBtn" checked>
<img>
<p style="color: #f00;"></p>
</label>
<label id="two">
<input type="radio" name="tabBtn">
<img>
<p></p>
</label>
<label id="three">
<input type="radio" name="tabBtn">
<img>
<p></p>
</label>
<label id="four">
<input type="radio" name="tabBtn">
<img>
<p></p>
</label>
</div>

上面的代码已经去掉了一些没有必要定义的属性，比如：img的”id“属性。

二、 JQuery代码

1、 使用jquery语法定义和获取变量

var one = $("label#one");
var two = $("label#two");
var three = $("label#three");
var four = $("label#four");

2、 为了避免图片地址丢失或图片读取失败，我们需要先定义本地图片的地址和按钮的标题文案

var datas;
var isOk = true;

var icons = new Array();
var icon1 = new Object();
icon1.icon_sel = "images/icon_tab_one_sel.png";
icon1.icon_nor = "images/icon_tab_one_nor.png";
icon1.title = "tab0";
icons.push(icon1);

var icon2 = new Object();
icon2.icon_sel = "images/icon_tab_two_sel.png";
icon2.icon_nor = "images/icon_tab_two_nor.png";
icon2.title = "tab1";
icons.push(icon2);

var icon3 = new Object();
icon3.icon_sel = "images/icon_tab_three_sel.png";
icon3.icon_nor = "images/icon_tab_three_nor.png";
icon3.title = "tab2";
icons.push(icon3);

var icon4 = new Object();
icon4.icon_sel = "images/icon_tab_four_sel.png";
icon4.icon_nor = "images/icon_tab_four_nor.png";
icon4.title = "tab3";
icons.push(icon4);

3、 tab按钮的点击事件

/*
通过js调用本地方法,改变tab选中状态
*/
$(document).ready(function () {
$("label").click(function () {
$("p").css({"color": "black"});
if (isOk) {
one.find("img").attr('src', datas[0].icon_nor);
two.find("img").attr('src', datas[1].icon_nor);
three.find("img").attr('src', datas[2].icon_nor);
four.find("img").attr('src', datas[3].icon_nor);
} else {
one.find("img").attr('src', icons[0].icon_nor);
two.find("img").attr('src', icons[1].icon_nor);
three.find("img").attr('src', icons[2].icon_nor);
four.find("img").attr('src', icons[3].icon_nor);
}
});

one.click(function () {
setChecked('one');
iconSelected(this, 0);
});
two.click(function () {
setChecked('two');
iconSelected(this, 1);
});
three.click(function () {
setChecked('three');
iconSelected(this, 2);
});
four.click(function () {
setChecked('four');
iconSelected(this, 3);
});
});

function iconSelected(id, i) {
$(id).find("input").checked = true;
$(id).find("p").css({"color": "red"});
if (isOk) {
$(id).find("img").attr('src', datas[i].icon_sel);
} else {
$(id).find("img").attr('src', icons[i].icon_sel);
}
}

/*
提供给原生的方法,原生调用该方法,实现设置某个tab选中
*/
function setChecked(id) {
if (typeof appNative !== "undefined" && appNative.changeTab) {
appNative.changeTab(id);
}
}

说明：触发点击事件的时候，需要将文字的颜色和图标的样式还原，不然整个控件就乱了。

4、 原生页面向h5传递数据的方法

/*
判断native传过来的对象是否为空
*/
function isEmpty(obj) {
for (var name in obj) {
return false;
}
return true;
}

function tranData(jsondata) {
datas = eval(jsondata);
if (isEmpty(jsondata)) {
isOk = false;
} else {
for (i = 0; i < datas.length; i++) {
if (typeof datas[i].icon_sel === "undefined" || typeof datas[i].icon_nor === "undefined") {
isOk = false;
}
}
}
if (isOk) {
one.find("img").attr('src', datas[0].icon_sel);
one.find("p").text(datas[0].title);
one.find("img").error(function () {
$(this).attr('src', icons[0].icon_sel);
isOk = false;
});

two.find("img").attr('src', datas[1].icon_nor);
two.find("p").text(datas[1].title);
two.find("img").error(function () {
$(this).attr('src', icons[1].icon_nor);
isOk = false;
});

three.find("img").attr('src', datas[2].icon_nor);
three.find("p").text(datas[2].title);
three.find("img").error(function () {
$(this).attr('src', icons[2].icon_nor);
isOk = false;
});

four.find("img").attr('src', datas[3].icon_nor);
four.find("p").text(datas[3].title);
four.find("img").error(function () {
$(this).attr('src', icons[3].icon_nor);
isOk = false;
});
} else {
one.find("img").attr('src', icons[0].icon_sel);
one.find("p").text(icons[0].title);

two.find("img").attr('src', icons[1].icon_nor);
two.find("p").text(icons[1].title);

three.find("img").attr('src', icons[2].icon_nor);
three.find("p").text(icons[2].title);

four.find("img").attr('src', icons[3].icon_nor);
four.find("p").text(icons[3].title);
}
}

三、 补充说明

源码下载地址：http://download.csdn.net/detail/zhimingshangyan/9679233，需要特别说明一下，直接下载的代码里面的服务器地址都是我本地的，里面的用例只是我用来测试的测试数据，真实的数据最好可以在你们本地的服务器测试。