html5总结（1）

1.页面滚动效果

    mui.plusReady(function() {
        mui('.mui-scroll-wrapper').scroll();
    })

2.解决点击页面文本框导致页面放大

<！ - 宽度设置为设备实际宽度，初始化倍数为1，最小倍数为1，最大倍数为1，用户缩放为否 - >  

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width  ----  viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height ------  viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放

  它的作用就是让设备的viewport的width等于设备的width;同时禁止了设备的手动缩放功能。

3.使用mui 发送异步请求

mui.ajax('http://61.163.34.143:8090/zzdy_oa/user/userAll', {
            dataType: 'json', //服务器返回json格式数据
            type: 'post', //HTTP请求类型
            timeout: 10000, //超时时间设置为10秒；
            headers: {
                'Content-Type': 'application/json'
            },
            success: function(data) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                var empslist = data.extend.list;
                //plus.storage.setItem("empslist" ,empslist);
                console.log("---" + empslist);
                emps(empslist);
            },
            error: function(xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });

4，页面之间传值

function chatDetail(toUserId, name) {
            console.log(name);
            // open("chatDetail.html");
            var webview = mui.openWindow({

          //要跳转的页面地址
                url: 'chatDetail.html',

           //定义跳转页面id
                id: 'chatDetail',

           //设置要传的参数
                extras: {
                    ToUserId: toUserId, //扩展参数
                    Name: name
                }
            });
        }

另一个页面接收：

  var self = plus.webview.currentWebview();

var ToUserId =self.ToUserId;//获得参数

  var    toName = self.Name;

如果参数是int型，接收参数的时候转为String型(toString())

5，web存储

HTML 5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储（数据存储期是持久化的，并且没有容量限制）

sessionStorage - 针对一个 session 的数据存储

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

实例

<script type="text/javascript">

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

sessionStorage 方法 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

实例

<script type="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

6，html5开发移动端通过plus.storage可获取应用本地数据管理对象

详情链接http://www.html5plus.org/doc/zh_cn/storage.html

• getLength: 获取应用存储区中保存的键值对的个数
• getItem: 通过键(key)检索获取应用存储的值
• setItem: 修改或添加键值(key-value)对数据到应用数据存储中
• removeItem: 通过key值删除键值对存储的数据
• clear: 清除应用所有的键值对存储数据
• key: 获取键值对中指定索引值的key值

   存值

   plus.storage.setItem(ToUserId,"11122");

  取值

   var    chatRecord=plus.storage.getItem(ToUserId);

  清除单个存储键值对

   plus.storage.removeItem(ToUserId);

6.如何想执行某个js方法之后刷新页面

       location.reload();

7，如何a页面跳转到b页面修改某些条件然后自动返回，a页面执行刷新

  比如更换在线聊天背景，返回背景随之改变

修改背景页面

function chatImg(path){
	//alert("src="+path);
	var btnArray = ['否', '是','返回'];
	mui.confirm("确定使用该图片作为聊天背景吗?","背景设置",btnArray,function(e) {
					if (e.index == 1) {
						  plus.storage.setItem("chatback",path);
						mui.toast("设置成功");
						 var list = plus.webview.currentWebview().opener();　　　　
                        //refresh是A页面自定义事件
                        mui.fire(list, 'refresh',{id:1});
                        //返回true,继续页面关闭逻辑

                        return true;
						
					} if (e.index == 0){
						//info.innerText = 'MUI执行返回'
					}
					if (e.index == 2){
						 var list = plus.webview.currentWebview().opener();　　　　
                        //refresh是A页面自定义事件
                        mui.fire(list, 'refresh',{id:1});
                        //返回true,继续页面关闭逻辑
                        return true;
					}
				})
}

聊天页面

mui.init();
     	window.addEventListener('refresh', function(e){//执行刷新
     		if(e.detail.id==1){
                  location.reload();
                 }
            });

8，如果需要隐藏iOs的上下状态栏实现全屏，只需要再meta标签中加入如下代码就能轻松实现：

<meta name="apple-mobile-web-app-capable" content="yes">
    此属性只针对 iOS，content只有 yes  or no。

欢迎 留言，交流 ！