本方法基于SDK中的集成方式实现，通过js调用相关接口，实现蓝牙功能

注意：目前只支持安卓端

1、是否打开蓝牙设备 plus.bluetooth.isBlueToothOpened
2、打开蓝牙设备 plus.bluetooth.openBlueTooth
3、关闭蓝牙设备 plus.bluetooth.closeBlueTooth
4、获取可用设备 plus.bluetooth.getEnableDevices
5、设置当前设备 plus.bluetooth.setCurrentDevice
6、连接设备 plus.bluetooth.connectDevice
7、断开连接设备 plus.bluetooth.disconnectDevice
8、开始扫描 plus.bluetooth.startScan

目前版本已经测试调通，但仍带改进，如果有问题可以交流

              <header class="mui-bar mui-bar-nav" style="box-shadow: 0px 0px 0px #413D4A;">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left color-e"></a>  
            <h1 class="mui-title font-size-20">基本信息</h1>  
        </header>

因为项目需要能步进小数点的数字输入框，但是mui 的数字输入框只能步进整数
原本是打算参考 mui 源码自已写一个
後来发现只要把 parseInt 改成 parseFloat 就搞定

感谢官方，感谢工作人员

以下代码除了 parseInt 改成 parseFloat 之外，其馀都没有变动
放在 js 文档内，可直接使用

/**  
 * 数字输入框  
 * varstion 1.0.1  
 * by Houfeng  
 * Houfeng@DCloud.io  
 */  

(function($) {  

    var touchSupport = ('ontouchstart' in document);  
    var tapEventName = touchSupport ? 'tap' : 'click';  
    var changeEventName = 'change';  
    var holderClassName = 'mui-numbox';  
    var plusClassName = 'mui-numbox-btn-plus';  
    var minusClassName = 'mui-numbox-btn-minus';  
    var inputClassName = 'mui-numbox-input';  

    var Numbox = $.Numbox = $.Class.extend({  
        /**  
         * 构造函数  
         **/  
        init: function(holder, options) {  
            var self = this;  
            if (!holder) {  
                throw "构造 numbox 时缺少容器元素";  
            }  
            self.holder = holder;  
            options = options || {};  
            options.step = parseFloat(options.step || 1);  
            self.options = options;  
            self.input = $.qsa('.' + inputClassName, self.holder)[0];  
            self.plus = $.qsa('.' + plusClassName, self.holder)[0];  
            self.minus = $.qsa('.' + minusClassName, self.holder)[0];  
            self.checkValue();  
            self.initEvent();  
        },  
        /**  
         * 初始化事件绑定  
         **/  
        initEvent: function() {  
            var self = this;  
            self.plus.addEventListener(tapEventName, function(event) {  
                var val = parseFloat(self.input.value) + self.options.step;  
                self.input.value = val.toString();  
                $.trigger(self.input, changeEventName, null);  
            });  
            self.minus.addEventListener(tapEventName, function(event) {  
                var val = parseFloat(self.input.value) - self.options.step;  
                self.input.value = val.toString();  
                $.trigger(self.input, changeEventName, null);  
            });  
            self.input.addEventListener(changeEventName, function(event) {  
                self.checkValue();  
                var val = parseFloat(self.input.value);  
                //触发顶层容器  
                $.trigger(self.holder, changeEventName, {  
                    value: val  
                });  
            });  
        },  
        /**  
         * 获取当前值  
         **/  
        getValue: function() {  
            var self = this;  
            return parseFloat(self.input.value);  
        },  
        /**  
         * 验证当前值是法合法  
         **/  
        checkValue: function() {  
            var self = this;  
            var val = self.input.value;  
            if (val == null || val == '' || isNaN(val)) {  
                self.input.value = self.options.min || 0;  
                self.minus.disabled = self.options.min != null;  
            } else {  
                var val = parseFloat(val);  
                if (self.options.max != null && !isNaN(self.options.max) && val >= parseFloat(self.options.max)) {  
                    val = self.options.max;  
                    self.plus.disabled = true;  
                } else {  
                    self.plus.disabled = false;  
                }  
                if (self.options.min != null && !isNaN(self.options.min) && val <= parseFloat(self.options.min)) {  
                    val = self.options.min;  
                    self.minus.disabled = true;  
                } else {  
                    self.minus.disabled = false;  
                }  
                self.input.value = val;  
            }  
        },  
        /**  
         * 更新选项  
         **/  
        setOption: function(name, value) {  
            var self = this;  
            self.options[name] = value;  
        }  
    });  

    $.fn.numbox = function(options) {  
        var instanceArray = [];  
        //遍历选择的元素  
        this.each(function(i, element) {  
            if (element.numbox) return;  
            if (options) {  
                element.numbox = new Numbox(element, options);  
            } else {  
                var optionsText = element.getAttribute('data-numbox-options');  
                var options = optionsText ? JSON.parse(optionsText) : {};  
                options.step = element.getAttribute('data-numbox-step') || options.step;  
                options.min = element.getAttribute('data-numbox-min') || options.min;  
                options.max = element.getAttribute('data-numbox-max') || options.max;  
                element.numbox = new Numbox(element, options);  
            }  
        });  
        return this[0] ? this[0].numbox : null;  
    }  

    //自动处理 class='mui-locker' 的 dom  
    $.ready(function() {  
        $('.' + holderClassName).numbox();  
    });  

}(mui))

附件为参考效果图

引入mui.css和mui.js 在plusReady中调用initCalendar();就可以了

//CSS  
.riqi {  
    background: white;  
    width: 94%;  
    left: 50%;  
    overflow: hidden;  
    margin: auto;  
    margin-top: 40px;  
    z-index: 2;  
    position: fixed;  
    margin-left: -47%;  
    padding: 1em 0.5em;  
    top: 10%;  
    display: block;  
}  

.toubu {  
    width: 99%;  
    margin: auto;  
}  

.toubu>div {  
    width: 50%;  
    float: left;  
}  

.toubu>div>*,  
.toubu>div {  
    height: 30px;  
    line-height: 30px;  
    text-align: center;  
}  

.toubu>div>a {  
    background: #41BC7B;  
    color: white;  
    width: 30px;  
    font-size: 18px;  
    float: left;  
}  

.toubu>div>div {  
    float: left;  
    width: 60px;  
    text-align: center;  
    border-top: 1px solid darkgray;  
    border-bottom: 1px solid darkgray;  
}  

.toubu>div>div>span {}  

.toubu>div.yue>* {  
    float: right;  
}  

/**table************************/  

table {  
    border-collapse: collapse;  
}  

table>thead>tr>th {  
    font-size: 14px;  
    padding: 2px 2px;  
    border: 1px solid #D7D7D7;  
}  

table,  
th,  
td {  
    border: 1px solid #D7D7D7;  
    text-align: center;  
    color: #666666;  
    width: 14.28%;  
    font-size: 12px;  
    height: 2em;  
    line-height: 2em;  
}  

.table>table {  
    margin-top: 4em;  
    width: 100%;  
}  

.table>table td.light {  
    color: white;  
    background: #41BC7B;  
}  

.table>table td {  
    color: #5C5B5B;  
    background-color: #BDBDBD;  
}  

.jiezhishijian .shifouxuanzhong a {  
    font-size: 12px;  
    height: 2.5em;  
    line-height: 2.5em;  
    padding: 0;  
}  

#sure {  
    float: right;  
    color: #41BC7B;  
    margin: 10px 15px;  
}  

#cancle {  
    float: right;  
    color: #41BC7B;  
    margin: 10px 15px;  
}  

.table>table td.choose {  
    background-color: red;  
}

//JS  
var currentday, currentyear, currentmonth, nian, yue, tapelement;  
//初始化  
function initCalendar() {  
    var div = document.createElement("div");  
    div.className = 'riqi top_center';  
    div.id = 'riqi';  
    div.innerHTML = '<div class="toubu"><div class="nian"> <a id="nian_jian" class="jian">-</a><div><span id="nian" class="nian">2015</span><span>年</span></div> <a id="nian_jia" class="jia">+</a> </div> <div class="yue"> <a id="yue_jia" class="jia">+</a>  <div><span id="yue" class="yue">12</span><span>月</span></div> <a id="yue_jian" class="jian">-</a> </div> </div> <div class="table"> <table> <thead> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td></td></tr></tbody></table></div><a id="cancle">取消</a><a id="sure">确定</a>';  
    document.body.appendChild(div);  
    nian = document.getElementById("nian");  
    yue = document.getElementById("yue");  
    var data = new Date();  
    currentday = data.getDate(); //获取当前日  
    currentyear = data.getFullYear(); //获取当前年  
    currentmonth = data.getMonth() + 1; //获取当前月（现实月份）  
    boundTap();  
    initcontent(data);  
}  
//绑定点击事件  
function boundTap() {  
    mui('tbody').on('tap', 'td', function() {  
        if (this.innerText == '') {  
            return;  
        }  
        try {  
            tapelement.classList.remove('choose');  
        } catch (e) {  
            //TODO handle the exception  
        }  
        console.log(this.innerText);  
        this.classList.add('choose');  
        tapelement = this;  
    });  
}  

function initcontent(data) {  
    getCalender(data.getFullYear(), data.getMonth() + 1);  
    //加减点击  
    mui('.top_center').on('tap', '.jia,.jian', function() {  
        switch (this.id) {  
            case 'nian_jia':  
                if (nian.innerText == currentyear) {  
                    return;  
                }  
                nian.innerText++;  
                break;  
            case 'nian_jian':  
                nian.innerText--;  
                break;  
            case 'yue_jia':  
                if (yue.innerText == 12) {  
                    if (nian.innerText == currentyear) {  
                        return;  
                    } else {  
                        nian.innerText++;  
                        yue.innerText = 1;  
                    }  
                } else {  
                    yue.innerText++;  
                }  
                break;  
            case 'yue_jian':  
                if (yue.innerText == 1) {  
                    nian.innerText--;  
                    yue.innerText = 12;  
                } else {  
                    yue.innerText--;  
                }  
                break;  
            default:  
                break;  
        }  
        getCalender(nian.innerText, yue.innerText);  
    });  
}  
/**  
 *  返回传递月份的天数  
 * @param {Object} year 年份  
 * @param {Object} month 月份(现实月份)  
 */  
function getDaynum(year, month) {  
    var tianShu;  
    if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {  
        tianShu = 31;  
    } else if (month != 2) {  
        tianShu = 30;  
    } else {  
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {  
            tianShu = 29;  
        } else {  
            tianShu = 28;  
        }  
    }  
    return tianShu;  
}  
/**  
 * 获取日历排列情况  
 * @param {Object} year 年份  
 * @param {Object} month 月份(现实月份)  
 */  
function getCalender(year, month) {  
    var daynum = getDaynum(year, month);  
    var xingqi = new Date(year + '/' + month + '/1').getDay();  
    var current_day = 0;  
    mui('tbody td').each(function(index, element) {  
        if (index >= xingqi && current_day < daynum) {  
            current_day++;  
            element.innerText = current_day;  
            if (year == currentyear && month == currentmonth && current_day == currentday) {  
                element.className = 'light';  
            } else {  
                element.className = '';  
            }  
        } else {  
            element.className = '';  
            element.innerText = '';  
        }  
    });  
}

二重监听事件，含参数函数参数只能传递一次：代码如下

function appendByGallery(id) {  
                document.getElementById("bg_update").style.display = "none";  
                plus.gallery.pick(function(path) {  
                    document.getElementById(id).src = path;  
//                  alert(path);  
                    return false;  
                });  
            }  
            mui(".zzboxli").on('tap','img',function(){  
                var id = this.getAttribute("id");  
                document.getElementById("bg_update").style.display = "block";  
                document.getElementById("b_updates").addEventListener('tap',function(){  
                    appendByGallery(newid);  
                });  
            });  
            document.getElementById("bg_update").addEventListener('tap',function(){  
                document.getElementById("bg_update").style.display = "none";  
            });

利用缓存解决：代码如下

function appendByGallery(id) {  
                document.getElementById("bg_update").style.display = "none";  
                plus.gallery.pick(function(path) {  
                    document.getElementById(id).src = path;  
//                  alert(path);  
                    return false;  
                });  
            }  
            mui(".zzboxli").on('tap','img',function(){  
                var id = this.getAttribute("id");  
                plus.storage.setItem('a', id);  
                document.getElementById("bg_update").style.display = "block";  
                document.getElementById("b_updates").addEventListener('tap',function(){  
                    var newid = plus.storage.getItem('a');  
                    appendByGallery(newid);  
                });  
            });  
            document.getElementById("bg_update").addEventListener('tap',function(){  
                document.getElementById("bg_update").style.display = "none";  
            });

h5+ 能够调用友盟的微社区和社会化分享这两个功能吗？ 如何调用？

openNewpage("a1",'anjian.html','anjian');//调用方法

function openNewpage(id, gethtmlid, geturl) {  
    var page = mui.preload({  
        url: gethtmlid,  
        id: geturl,  
    });  
    var getid = document.getElementById(id);  
    getid.addEventListener('tap', function() {  
        mui.openWindow({  
            url: gethtmlid,  
            id: geturl,  
            show: {  
//              autoShow: false,  
                aniShow:'zoom-out',//参考官方的效果  
            }  
        })  
    });  
}

参考官方的效果集：

<ul class="dlist">   
                <li class="ditem" onclick="animateWindow('pop-in')">从右侧平移入栈</li>  
                <li class="ditem" onclick="animateWindow('slide-in-right')">从右侧横向滑出</li>  
                <li class="ditem" onclick="animateWindow('slide-in-left')">从左侧横向滑出</li>  
                <li class="ditem" onclick="animateWindow('slide-in-top')">从上侧竖向滑出</li>  
                <li class="ditem" onclick="animateWindow('slide-in-bottom')">从下侧竖向滑出</li>  
                <!--<li class="ditem" onclick="animateWindow('zoom-out')">从小到大逐渐放大</li>-->  
                <li class="ditem" onclick="animateWindow('zoom-fade-out')">从小到大并逐渐透明显示</li>  
                <li class="ditem" onclick="animateWindow('fade-in')">从透明到不透明逐渐显示</li>  
                <!--<li class="ditem" onclick="animateWindow('flip-x')">以x轴从上到下翻转效果</li>  
                <li class="ditem" onclick="animateWindow('flip-rx')">以x轴从下到上翻转转效果</li>  
                <li class="ditem" onclick="animateWindow('flip-y')">以y轴从左到右翻转效果</li>  
                <li class="ditem" onclick="animateWindow('flip-ry')">以y轴从右到左翻转效果</li>  
                <li class="ditem" onclick="animateWindow('page-forward')">向前翻书动画效果</li>-->  
                <li class="ditem" onclick="animateWindow('none')">无动画</li>  
            </ul>

这是一款效果十分不错的jQuery仿Google Play多级导航菜单特效插件。插件中使用了ELUSIVE-ICONSWEB字体。

HTML结构

使用该进度条插件，首先要在页面中引入jquery和上面的WEB字体。
<nav class="navigation">
<a href="#" class="active home">
<span class="icon"><i class="icon-home"></i></span> <span class="content">Home</span>
</a>
<a href="#app_nav" class="green">
<span class="icon"><i class="icon-website"></i></span> <span class="content">Apps</span>
</a>
<div class="hide second_level" id="app_nav">
<a href="#" class="back">
<i class="icon-chevron-left"></i>
</a>
<div class="content">
<a href="http://www.google.com">
<span class="content">Popular Apps</span>
</a>
….
</div>
</div>
….
</nav>

class为Home的链接用于返回顶级菜单。后面的链接是二级菜单。和它相邻的div标签是隐藏的二级菜单的内容。当用户顶级二级菜单时，div中的内容将显示。在隐藏的div中，有一个空的链接back。通过它用户可以查看上一级菜单的内容。

JAVASCRIPT

通过下面的语句来调用该多级菜单插件。
$(window).load(function () {
$(".navigation > a").click(function() {
if (!$(this).hasClass("active")) {
$(".navigation").unbind('mouseleave');
$(".navigation .second_level").hide();
var el = $(this);
el.addClass("hover");
$(".navigation > a.active").fadeOut("fast", function() {
var prev = $(this)
prev.removeClass('active');
container_pos = $(".navigation").offset()
button_pos = el.offset()
el.animate({ top: container_pos.top - button_pos.top }, 500, function() {
el.addClass("active").removeClass("hover").css("top", 0);
if (el.attr("href").length > 1 && el.attr("href") != "#") {
$(".navigation > a:not(.active)").hide();
$(el.attr("href")).slideDown("slow");
} else {
prev.fadeIn("fast");
}
});
});
}
});
$(".navigation .back").hover(
function () {
var el = $(this)
$(".navigation .second_level").hide();
$(".navigation > a").show();
$(".navigation").hover(function() {}, function() {
$(this).unbind('mouseleave');
$(".navigation > a:visible:not(.active)").hide();
el.closest(".second_level").show();
});

});  

});

JS代码有一点复杂。所有的链接都被绑定click事件。当我们点击链接时，将当前链接的内容移动顶部，隐藏顶级链接内容。

第二部分的JS代码用于从二级菜单返回。当鼠标滑过返回按钮，顶级菜单出现在顶部，覆盖二级菜单。当鼠标离开，点击菜单消失，二级菜单出现。

我们还可以集成Animate.css到我们的JS文件中，来制作各种有趣的动画效果。看下面的例子：

在下面的例子中，你可以看到两种动画效果<<first-level-animation>>和<<second-level-animation>>。第一种动画时用户鼠标滑过返回按钮时的动画，第二种动画时用户点击第一级菜单，第二级菜单出现的动画。

选择你需要的Animate.css动画效果，然后替换上部的代码。例如：如果你想要两种效果都是bounceIn效果，那么，将<<first-level-animation>>和<<second-level-animation>>都替换为bounceIn。
$(window).load(function () {
$(".navigation > a").click(function() {
if (!$(this).hasClass("active")) {
$(".navigation").unbind('mouseleave');
$(".navigation .second_level").removeClass("animated <<second-level-animation>>").hide();
var el = $(this);
el.addClass("hover");
$(".navigation > a.active").fadeOut("fast", function() {
var prev = $(this)
prev.removeClass('active');
container_pos = $(".navigation").offset()
button_pos = el.offset()
el.animate({ top: container_pos.top - button_pos.top }, 500, function() {
el.addClass("active").removeClass("hover").css("top", 0);
if (el.attr("href").length > 1 && el.attr("href") != "#") {
$(".navigation > a:not(.active)").removeClass("<<first-level-animation>> animated").hide();
$(el.attr("href")).addClass("<<second-level-animation>> animated").show();
} else {
prev.addClass("<<first-level-animation>> animated").fadeIn("fast");
}
});
});
}

});

$(".navigation .back").hover(
function () {
var el = $(this)
$(".navigation .second_level").removeClass("animated <<second-level-animation>>").hide();
$(".navigation > a:not(.active)").addClass("<<first-level-animation>> animated").show()
$(".navigation").hover(function() {}, function() {
$(this).unbind('mouseleave');
$(".navigation > a:visible:not(.active)").hide().removeClass("<<first-level-animation>> animated");
el.closest(".second_level").addClass("animated <<second-level-animation>>").show();
});
});
});

http://www.htmleaf.com/jQuery/Menu-Navigation/201412311048.html
http://www.ux110.com/kaifazhe.php

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <style type="text/css">  
            .divsow{  
                background:#0062CC;  
                height: 20px;  
                margin-bottom: 5px;  
            }  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">adddiv</h1>  
        </header>  
        <div class="mui-content" id="div1">  
            <button type="button" class="mui-btn mui-btn-blue" onclick="adddiv()">增加</button>  
            <div class="divsow">  
            </div>  
        </div>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
            function adddiv() {  
                var i = 0;  
                for(;i<6;i++){  
                    var para = document.createElement("div");  
                    para.setAttribute("class","divsow");//为新增节点div,添加类名，获取当前的样式  
                    var node=document.createTextNode(i);  
                    para.appendChild(node);  
                    var element = document.getElementById("div1");  
                    element.appendChild(para);  
                }  
            }  
        </script>  
    </body>  
</html>

var map = new plus.maps.Map("map");  
                map.getUserLocation(function(state, point) {  
                    if (0 == state) {  
                        var point = new plus.maps.Point(point.longitude, point.latitude);  
                        map.centerAndZoom(point, 12 );  
                        var marker = new plus.maps.Marker(point);  
                        var marker=new plus.maps.Marker(point);  
                        marker.setIcon("img/2.png");  
                        marker.setLabel("我的位置");  
                        map.addOverlay(marker);  
                    } else {  
                        map.centerAndZoom(new plus.maps.Point(116.3977, 39.906016), 12); //指定默认地址  
                        console.log("无法获取当前地址!");  
                    }  
                });

 mui.init();  
            mui.plusReady(function() {  
                mui("ul").on('tap', 'img', function() {  
                    var num = this.src; //获取点击该标签的值  
//                  alert(num); //用于测试，显示该值  
                    plus.storage.setItem('a', num);  
                    setTimeout(function() {  
                        var page = mui.preload({  
                            url: "second.html",  
                            id: "second",  
                        });  
                    }, 0.001);  
                    mui.openWindow({  
                        url: "second.html",  
                        id: "second",  
                    });  
                    plus.nativeUI.closeWaiting();  
                });  
            });