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，需要特别说明一下，直接下载的代码里面的服务器地址都是我本地的，里面的用例只是我用来测试的测试数据，真实的数据最好可以在你们本地的服务器测试。