zoukankan      html  css  js  c++  java
  • 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;
              }
            }
          });
        }
      }
    }();

    窗口图:

  • 相关阅读:
    超棒的前端开发界面套件 InK
    现代浏览器的web音频javascript类库 Howler.js
    富有创意的菱形响应式页面设计
    创意味儿十足的web布局及交互设计
    一个超酷的横向多列响应式布局效果
    帮助你生成响应式布局的CSS模板 xyCSS
    免费素材大荟萃:免费图标和UI设计
    使用浏览器生成超棒的midi音乐 midi.js
    JavaScript 和 .NET 中的 JavaScript Object Notation (JSON) 简介
    推荐一批基于web的开源html文本编辑器(40+)
  • 原文地址:https://www.cnblogs.com/Jiphen/p/2668764.html
Copyright © 2011-2022 走看看