提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
解决app内部打开外部网站的问题？
导读：很多人问打开app内部的外网地址，外部网站直接显示在app内，而且打开后也不能关掉，不能后退，这个怎么弄？有调用手机系统浏览器的api吗？...
很多人问打开app内部的外网地址，外部网站直接显示在app内，而且打开后也不能关掉，不能后退，这个怎么弄？有调用手机系统浏览器的api吗？
解决方法：
可以建两个webview，一个webview到app页面，另一个webview加载网页
在第一个webview上添加返回或关闭按钮，这样不就能后退，关闭了。
转载请注明（B5教程网）原文链接：
网友评论：他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)& & & & 最近在开发APP的过程中，遇到一个问题，就是内容有一个固定的头部和底部。
& &&& & 头部就是我们常用的header了，底部的话，就放置一个button，用来提交页面数据或者进入下一个页面等，效果如下：
这里面需要注意到的地方就是，头和底是固定的，但是中间的部分呢，由于要设置24小时的内容，从图中可以看到，只显示了03:00~13:00的内容，剩下的内容没显示出来。这里面，我们就需要用到区域滚动了，就是保持头和底不动，中间滚动，所以，我们就要用到MUI的scorll组件，根据MUI官网的介绍，如下：
scroll(区域滚动)
在App开发中，div区域滚动的需求是普遍存在的，但系统默认实现又有如下问题：
Android平台4.0以下不支持div滚动
Android平台4.0以上支持div滚动，但不显示滚动条
弹出层的div滚动在iOS平台存在事件透传的问题
因此，mui额外提供了区域滚动组件，使用时需要遵循如下DOM结构
&div class="mui-scroll-wrapper"&&div class="mui-scroll"&&!--这里放置真实显示的DOM内容--&&/div&&/div&
区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置滚动区域的位置（top和height）
若使用区域滚动组件，需手动初始化scroll控件，代码如下：
mui('.mui-scroll-wrapper').scroll({deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006});
但是我发现，我在实际使用中，这样代码虽然能用，但是有些地方他还没有讲明白，如果贸然添加这样的一个区块代码，不一定能实现滚动效果，所以，我增加了一些注释，以便各位理解如下：
我贴上代码，代码就是我上面截图的内容，如下：
&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"&区域滚动例子&/h1&
&div class="line
mui-bar-nav" style="text-indent: 10 height: 50 line-height: 50 margin-top: 50"&
&div class="line" style="width:200 float: font-weight: font-size: 18"&&label id="lbLightName"&灯箱名称&/label&&/div&
&div class="line" style="width:120 float: text-align:"&03月23日 星期三&/div&
&div class="mui-content"&
&div id="scroll1" class="mui-scroll-wrapper" style="top: 100 bottom: 50"&
&!--MUI默认是position是absolute--&
&div class="mui-scroll"&
&img src="img/contrlTypeNext.png" width="100%" /&
&ul class="mui-table-view"&
&li class="mui-table-view-cell"&
第一个选项卡子项-1
&li class="mui-table-view-cell"&
第一个选项卡子项-2
&li class="mui-table-view-cell"&
第一个选项卡子项-3
&li class="mui-table-view-cell"&
第一个选项卡子项-4
&li class="mui-table-view-cell"&
第一个选项卡子项-5
&li class="mui-table-view-cell"&
第一个选项卡子项-6
&li class="mui-table-view-cell"&
第一个选项卡子项-7
&li class="mui-table-view-cell"&
第一个选项卡子项-8
&li class="mui-table-view-cell"&
第一个选项卡子项-9
&li class="mui-table-view-cell"&
第一个选项卡子项-10
&li class="mui-table-view-cell"&
第一个选项卡子项-11
&li class="mui-table-view-cell"&
第一个选项卡子项-12
&li class="mui-table-view-cell"&
第一个选项卡子项-13
&li class="mui-table-view-cell"&
第一个选项卡子项-14
&li class="mui-table-view-cell"&
第一个选项卡子项-15
&li class="mui-table-view-cell"&
第一个选项卡子项-16
&li class="mui-table-view-cell"&
第一个选项卡子项-17
&li class="mui-table-view-cell"&
第一个选项卡子项-18
&li class="mui-table-view-cell"&
第一个选项卡子项-19
&li class="mui-table-view-cell"&
第一个选项卡子项-20
&div class="line" style="position:bottom: -10 z-index: 10;"&
&!--需要固定在底部，所以需要用到绝对定位，另外，由于MUI本身的组件的z-index要高于我们自己的div，所以，这里需要自定义z-index，一般10就足够。--&
&div id="btnCtrl" class="mui-btn mui-btn-primary mui-btn-block"&
里面有一些注释文字，如果未能理解，可以仔细阅读，最后，我放上全部代码以便各位调试，如下：
&!DOCTYPE html&
&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" /&
&link rel="stylesheet" type="text/css" href="css/style.css" /&
&script type="text/javascript" charset="UTF-8"&
mui.init();
&!--侧滑菜单容器--&
&div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable"&
&!--菜单部分--&
&aside id="offCanvasSide" class="mui-off-canvas-right"&
&div id="offCanvasSideScroll" class="mui-scroll-wrapper"&
&div class="mui-scroll"&
&div class="content"&
&p style="margin: 10px 15"&
&button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20"&关闭侧滑菜单&/button&
&div class="title" style="margin-bottom: 5"&管控面板&/div&
&ul id="menulist" class="mui-table-view mui-table-view-chevron mui-table-view-inverted"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right" href="../projectMapMain.html"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right" href="../listManagement.html"&
&div class="title" style="margin-bottom: 5"&系统申请&/div&
&ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right" href="../lightApply.html"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right" href="../lightSearch.html"&
&div class="title" style="margin-bottom: 5"&数据管理&/div&
&ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right"&
&div class="title" style="margin-bottom: 5"&系统设置&/div&
&ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right" href="../accountManagement.html"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right"&
&li class="mui-table-view-cell"&
&a class="mui-navigate-right"&
&div class="mui-inner-wrap"&
&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"&区域滚动例子&/h1&
&div class="line
mui-bar-nav" style="text-indent: 10 height: 50 line-height: 50 margin-top: 50"&
&div class="line" style="width:200 float: font-weight: font-size: 18"&&label id="lbLightName"&灯箱名称&/label&&/div&
&div class="line" style="width:120 float: text-align:"&03月23日 星期三&/div&
&div class="mui-content"&
&div id="scroll1" class="mui-scroll-wrapper" style="top: 100 bottom: 50"&
&!--MUI默认是position是absolute--&
&div class="mui-scroll"&
&img src="img/contrlTypeNext.png" width="100%" /&
&ul class="mui-table-view"&
&li class="mui-table-view-cell"&
第一个选项卡子项-1
&li class="mui-table-view-cell"&
第一个选项卡子项-2
&li class="mui-table-view-cell"&
第一个选项卡子项-3
&li class="mui-table-view-cell"&
第一个选项卡子项-4
&li class="mui-table-view-cell"&
第一个选项卡子项-5
&li class="mui-table-view-cell"&
第一个选项卡子项-6
&li class="mui-table-view-cell"&
第一个选项卡子项-7
&li class="mui-table-view-cell"&
第一个选项卡子项-8
&li class="mui-table-view-cell"&
第一个选项卡子项-9
&li class="mui-table-view-cell"&
第一个选项卡子项-10
&li class="mui-table-view-cell"&
第一个选项卡子项-11
&li class="mui-table-view-cell"&
第一个选项卡子项-12
&li class="mui-table-view-cell"&
第一个选项卡子项-13
&li class="mui-table-view-cell"&
第一个选项卡子项-14
&li class="mui-table-view-cell"&
第一个选项卡子项-15
&li class="mui-table-view-cell"&
第一个选项卡子项-16
&li class="mui-table-view-cell"&
第一个选项卡子项-17
&li class="mui-table-view-cell"&
第一个选项卡子项-18
&li class="mui-table-view-cell"&
第一个选项卡子项-19
&li class="mui-table-view-cell"&
第一个选项卡子项-20
&div class="line" style="position:bottom: -10 z-index: 10;"&
&!--需要固定在底部，所以需要用到绝对定位，另外，由于MUI本身的组件的z-index要高于我们自己的div，所以，这里需要自定义z-index，一般10就足够。--&
&div id="btnCtrl" class="mui-btn mui-btn-primary mui-btn-block"&
&script type="text/javascript"&
var vText = null; //灯箱名称
var vLng = null; //经度
var vLat = null; //纬度
var vNextPage = null;
mui.init();
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
//关闭侧滑按钮
var offCanvasHide = document.getElementById("offCanvasHide");
//Android暂不支持整体移动动画
if (!mui.os.android) {
var spans = document.querySelectorAll('.android-only');
for (var i = 0, len = spans. i & i++) {
spans[i].style.display = "none";
offCanvasHide.addEventListener('tap', function() {
offCanvasWrapper.offCanvas('close');
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classL
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
classList.remove('mui-slide-in');
classList.remove('mui-scalable');
switch (this.value) {
case 'main-move':
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
moveTogether = false;
case 'main-move-scalable':
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
classList.add('mui-scalable');
case 'menu-move':
classList.add('mui-slide-in');
case 'all-move':
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
offCanvasWrapper.offCanvas().refresh();
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台的侧滑关闭页面；
if (mui.os.plus && mui.os.ios) {
offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
plus.webview.currentWebview().setStyle({
'popGesture': 'close'
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
//菜单列表点击事件
mui('.mui-table-view-inverted').on('tap', 'a', function() {
var id = this.getAttribute('href');
var href = this.
if (href == null || href == '') {
plus.nativeUI.toast('正在开发中...');
//Android暂不支持整体移动动画
if (!mui.os.android) {
var spans = document.querySelectorAll('.android-only');
for (var i = 0, len = spans. i & i++) {
spans[i].style.display = "none";
offCanvasWrapper.offCanvas('close');
mui.openWindow({
url: this.href,
popGesture: 'close'
aniShow: 'pop-in'
waiting: {
autoShow: false
//菜单列表点击事件
mui('#segmentedControl').on('tap', 'a', function() {
var vValue = this.getAttribute('href');
var vDt = new Date().Format("yyyy-MM-dd hh:mm:ss.S");
var vLightName = vT
var vID = vText.substr(vText.length - 1, 1);
var btnArray = ['是', '否'];
mui.confirm('确认设置【' + vLightName + '】为：' + vValue + '% ?', '提示', btnArray, function(e) {
if (e.index == 0) {
vValue = parseInt(vValue);
if (vValue == 25) {
vValue = 255 / 4;
} else if (vValue == 50) {
vValue = 255 / 2;
} else if (vValue == 75) {
vValue = 255 / 4 * 3;
} else if (vValue == 100) {
vValue = 255;
vValue = parseInt(vValue);
type: "get", //具体项目中，我们用的是post方式，这里只是做一个示例
url: vUrl + "NetLableMgr_Login.asmx/SetCmdToDbHTML?jsoncallback=?", //后台生成订单的那个接口
jsonParam: "{\"AddByUserId\":1,\"Cmd\":\"" + vValue + "\",\"CmdFlag\":1,\"CmdType\":\"SetPwm\",\"ControlUserId\":1,\"DevAddr\":1,\"DevId\":" + vID + ",\"DevLineIndex\":1,\"GatewayId\":1,\"GroupAddr\":0,\"ID\":1,\"ProjectId\":1,\"TypeProjGateDevGroup\":1}",
UUID: '1',
dataType: "jsonp",
jsonp: "jsoncallback",
timeout: 3000,
async: false,
success: function(data) {
var vData = JSON.stringify(data);
plus.nativeUI.toast(vData);
if (data.Status) {
plus.nativeUI.toast('操作成功。');
plus.nativeUI.toast('操作失败，请重试。');
error: function(xhr, type, errorThrown) {
console.log(xhr);
console.log(type);
console.log(errorThrown);
plus.nativeUI.toast('您已取消');
mui.plusReady(function() {
var wv = plus.webview.currentWebview();
vText = wv.lightN
vLng = wv.
vLat = wv.
document.getElementById("lbLightName").innerHTML = vT
//添加上一个页面自定义事件监听
window.addEventListener('DIY_DATA', function(event) {
//获得事件参数
//`var id = event.detail.
vText = event.detail.lightN
vLng = event.detail.
vLat = event.detail.
document.getElementById("lbLightName").innerHTML = vT
好了，本次教程到此结束，转载请保留原作者地址以及姓名（本人无偿分享经验，有偿接单制作APP（基于MUI）和中小型管理系统（基于EasyUI），有需要可以联系我。）；
我新建一个QQ群，如果有问题，可以在群里提。如果合适，也会根据大家提的比较多的问题，来写篇博文，帮助更多的人，群号：
点击链接加入群【.Net,MVC,EasyUI,MUI,Html,JS】：
（如果有私活，或者一起合作的，也可以私信找我呀，嘿嘿）；
作者：南宫萧尘 &
阅读(...) 评论()初学HBuilder之MUI框架---实现百度地图定位功能
时间： 16:55:16
&&&& 阅读：5474
&&&& 评论：
&&&& 收藏：0
标签：　　　　最近接触了一款移动端APP框架，CSS库是MUI，JS库是5+Runtime。 个人感觉这两个库使用起来特别方便。
　　　　话不多说，直接上代码：
　　　　这是引用百度地图的JS
&script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HR3RRyTsXYdQ3QzzG5yUkg0q"&&/script&
&script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"&&/script&
　　　　这个是MUI封装好的JS，可用来调用移动设备底层功能：
&script src="../js/mui.min.js"&&/script&
　　　　HTML代码：
&div id="allmap"&
地图加载中...
　　　　JS调用底层：
mui.plusReady(function(){
plus.geolocation.getCurrentPosition(translatePoint,function(e){
mui.toast("异常:" + e.message);
　　　　最核心的部分，创建地图并且转换坐标：
function translatePoint(position){
var currentLon = position.coords.
var currentLat = position.coords.
var gpsPoint = new BMap.Point(currentLon,currentLat);
BMap.Convertor.translate(gpsPoint,2,initMap); //坐标转换
function initMap(point){
map = new BMap.Map("allmap"); //创建地图
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point,15);
map.addOverlay(new BMap.Marker(point));
　　这样，一个移动端的百度地图GPS定位已经完成了，当然还有很多其他功能，但是我暂时还没有使用上，待以后使用的时候，再来追加~~
&标签：原文地址：http://www.cnblogs.com/zlmxy/p/5311762.html
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！