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"
       onclick="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="姓名" onblur="verify_real_name()" onkeydown="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="手机" onblur="verify_real_phone()" onkeydown="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"  onsubmit="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用来解码的