JBox插件总结

父窗口jsp:

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'box.jsp' starting page</title>


<link rel="stylesheet" type="text/css" href="./js/module/jBox/Skins/Blue/jbox.css">
<script type="text/javascript" src="./js/module/jBox/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/module/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="./js/module/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript" src="./js/test.js"></script>
</head>

<body>

<input type="button" id="test" name="button" value="test" onclick="Test.test()">
<br>
</body>
</html>

js代码:

/**
* @description: test
* @author: BrinPage
* @date: 2012-09-03
* @return {TypeName}
*/
var Test = function(){
  return{
    test:function(){
      var url = "http://localhost:8080/weblog/home/jboxtest";
      var name = null;
      var phone = null;
      var address = null;
      var desc = null;
      $.jBox("get:http://localhost:8080/weblog/home/user.jsp",{
        title:"AddUser",
        650,
        height:450,
        buttons:{"提交":'ok',"取消":'cancel'},
        buttonsFocus:'ok',
        submit:function(v,h,f){
          if(v == "ok"){
            name = f.name;
            phone = f.phone;
            address = f.address;
            desc = f.desc;
            $.post(url,{"jBox.name":name,"jBox.phone":phone, "jBox.address":address, "jBox.desc":desc},function(data,status){
              if("success" == status){
                alert(status);
                $.jBox.success("Data Transufal success!","success");
                parent.location.reload();
              }else{
                $.jBox.error("Error Transufal", "Error");
                return false;
              }
            });
          }
          if(v == "cancel"){
            alert("已取消!");
            return true;
          }
        }
      });
    }
  }
}();

窗口图:

原文地址:https://www.cnblogs.com/Jiphen/p/2668764.html