ui js 用例

这段时间用到的 html 与js 小计，以后就不用再找了：

1.单击div ，div 折叠与打开；好不容易凑起来，效果达到。
　function openclose(id){

if(getComputedStyle(document.getElementById(id)).display == "none")
{

document.getElementById(id).style.display = "block";
}

else{

document.getElementById(id).style.display = "none";

}
　　}

2.jsp 页面用到

<h4><a href="/weixin/html/map6.html?lon1=<%=lon1 %>&lat1=<%=lat1%>&lon2=121.519669&lat2=30.295020">上海五角场宝马店</a></h4>


3.html 页面用到：

<button class="btn btn-large btn-primary span12" type="button"
οnclick="window.location.href='/weixin/html/yuyue6.html?'+url()">立即预约</button>


4.用到的ajax :


用到的Js:
function url(){
/* url 参数拼接 */
var url="lon1="+getUrl('lon1')+"&lat1="+ getUrl('lat1')+"&lon2="+getUrl('lon2')+"&lat2="+getUrl('lat2');

return url;

}

// 获取url参数
function getUrl(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}

单双引号是个特别要注意的地方，还没仔细研究过l

5.用到的ajax
var xmlHttp;

function createXMLHttpRequest() { //建立XMLHttpRequest

try {

xmlHttp= new XMLHttpRequest();

} catch (e) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (ee) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (err) {

xmlHttp = false;

}

}

}

if(!xmlHttp) alert("不能创建XMLHttpRequest对象");

}

function showMes(){ //2设置回调函数
if(xmlHttp.readyState==4){ //数据接收完成并可以使用
if(xmlHttp.status==200){ //http状态OK
//5、在回调函数中针对不同响应状态进行处理
document.getElementById("").innerHTML = xmlHttp.responseText; //服务器的响应内容
}else{
alert("出错："+xmlHttp.statusText); //HTTP状态码对应的文本
}
}else{

}
}


/**
* Post方式向服务器端异步发送数据
* @param url 服务器端的路径,数据发送的目的地
* @param data 发送的数据,格式如: "key1=value1&key2=value2"
* @param callback 回调函数
* @return
*/
/* function postMes(){
createXMLHttpRequest();
var params ="lon1="+getUrl('lon1')+"&lat1="+ getUrl('lat1') + "&lon2="+getUrl('lon2')+"&lat2="+getUrl('lat2');
//var params ="lon1="+getUrl('lon'); //问题原因在url 上，返回项目下，而不是/weixin/html/...
var url = "../rundong/map";//http://127.0.0.1:8080/weixin/rundong/map
//alert(params);
// alert(url);
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send(params);
xmlHttp.onreadystatechange = showMes;
} */


以上都是验证通过，在程序中使用的。


6.js 校验：
<div class="control-group" >
<label class="control-label"><strong>*</strong>您的姓名</label>
<div class="controls" >
<input type="text" name="name" id="input_real_name" class="span12" placeholder="姓名" οnblur="verify_real_name()" οnkeydοwn="keydown_real_name(event)" data-ref='popover' data-placement="top" data-html='true'>
</div>
</div>

<div class="control-group" >
<label class="control-label"><strong>*</strong>您的手机</label>
<div class="controls">
<input type="text" name="phone" id="input_real_phone" class="span12" placeholder="手机" οnblur="verify_real_phone()" οnkeydοwn="keydown_real_name(event)" data-ref='popover' data-placement="top" data-html='true'>
</div>
</div>

前端采用bootstrap 框架
/*清空输入框*/
$(document).ready(function() {
$("#input_email").focus();
$("#input_email").val("");
$("#input_password").val("");
$("#confirm_password").val("");
});


/* 检测真实用户名 */
function verify_real_name() {
var input_real_name = $.trim($("#input_real_name").val());
$("#input_real_name").popover("destroy");
if (input_real_name == "") {
$("#input_real_name").attr("data-content", "<span style='color:red'><i class=' icon-info-sign red'></i>请输入姓名<span>");
$("#input_real_name").popover("show");
return false;
} else if (/^([\u4E00-\u9FA5])*$/.test(input_real_name)) {
return true;
} else {
$("#input_real_name").attr("data-content", "<span style='color:red'><i class=' icon-info-sign'></i>姓名必须为中文名<span>");
$("#input_real_name").popover("show");
return false;
}
}


/* 检测合法手机号 */
function verify_real_phone() {
var input_real_phone = $.trim($("#input_real_phone").val());
$("#input_real_phone").popover("destroy");
if (input_real_name == "") {
$("#input_real_phone").attr("data-content", "<span style='color:red'><i class=' icon-info-sign red'></i>请输入手机号<span>");
$("#input_real_phone").popover("show");
return false;
} else if ((/^1[3|4|5|8][0-9]\d{4,8}$/.test(input_real_phone))) {
return true;
} else {
$("#input_real_phone").attr("data-content", "<span style='color:red'><i class=' icon-info-sign'></i>请输入正确手机号<span>");
$("#input_real_phone").popover("show");
return false;
}


}


7.form 表单

<form action="/weixin/rundong/yuyue" method ="post" class="form-horizontal" οnsubmit="return verify()">

8.中文字符，url 乱码问题

编码：
location.href = "yuyue_done.html?type=" + type+"&salerid="+salerid+"&customer="+escape(name);


解码： document.getElementById('spanname').innerHTML= unescape(customername);

2.javascript中文参数乱码

　　假设Url的部分参数，Title=我是中文

　　escape(Title)　　javascript用来编码的

　　unescape(Title)　　javascript用来解码的

　　context.Server.UrlDecode(context.Request.QueryString["Title"])　　Ashx用来解码的