| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 | 
登录
注册
用户控制面板
搜索
道具
风格
短消息
论坛展区
帮助
编程论坛 → 非技术区 → 『 闲聊灌水 』 → html+jquery 的使用
我的收件箱(0)
欢迎加入我们，一同切磋技术
用户名：   
 
密　码：  
共有 1055 人关注过本帖
标题：html+jquery 的使用
只看楼主 加入收藏
sweet6hero
Rank: 1
等　级：新手上路
帖　子：87
专家分：0
注　册：2013-6-9
结帖率：40%
楼主
收藏
 已结贴√  问题点数：20 回复次数：13 
html+jquery 的使用
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
  <div>
      <form class="form-horizontal login">
        <div class="control-group">
          <label class="control-label">username:</label>
          <div class="controls">
            <input type="text"/>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label">password:</label>
          <div class="controls">
            <input type="password"/>
          </div>
        </div>
        
        <div class="spacer-small"></div>

        <div class="row-fluid offset1">
            <div class="span3">
              <a href="accounts.html" class="btn" role="button" data-toggle="modal">Login</a>
            </div>
            <div class="span3 offset1">
              <button class="btn">Reset</button>
            </div>
        </div>
      </form>
  </div>
</body>
</html>
搜索更多相关主题的帖子: controls　content　title　
2014-07-03 09:00
sweet6hero
Rank: 1
等　级：新手上路
帖　子：87
专家分：0
注　册：2013-6-9
第 2 楼
收藏
 得分:0 
回复 楼主 sweet6hero
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>

<div class="container-fluid">
    <div class="navbar">
        <div class="container-fluid">
            <div class="underline">
               <div class="top-head">
                  <div class="row">
                    <a class="big-title brand" href="#">I</a>
                  </div>
                  <div class="row">
                    <span>Welcome, Tom</span> <a class="pull-right" href="index.html"><i class="icon-off"></i><span class="underline">Logout</span></a>
                  </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="sidebar-nav well">
            <div class="nav">
                <li class="active"><a href="accounts.html">U</a></li>
                <li><a href="devicesmanagement.html">D</a></li>
                <li><a href="testcasemanagement.html">T</a></li>
            </div>
        </div>
        <div class="main-content">
            <div class="page-header">
                <span class="h2-small">Accounts</span> <a class="pull-right"
                                role="button" data-toggle="modal" id="addUser"
                                    data-backdrop="static"><i class="icon-plus"></i>Create Account</a>
            </div>
            <div class="container-fluid">
                <form class="form form-inline pull-right">
                    <input id="searchinput" type="text" class="search-query">
                    <i id="search" class="icon-search move-left"></i>
                </form>
                <div id="usertable">
                    <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                  <th>Id</th>
                  <th>UserName</th>
                  <th>IsAdmin</th>
                  <th>Status</th>
                  <th>Enabled</th>
                  <th>Action</th>
                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                    </table>
                </div>
                <div id="datatable" style="display: none;">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                  <th>Id</th>
                  <th>UserName</th>
                  <th>IsAdmin</th>
                  <th>Status</th>
                  <th>Enabled</th>
                  <th>Action</th>
                </tr>
                            </thead>
                            <tbody>
                                <tr class="{{item}}">
                                  <td><input type="checkbox" /></td>
                                  <td title="userid">{{userid}}</td>
                                  <td title="username">{{username}}</td>
                                  <td title="isadmin">{{isadmin}}</td>
                                  <td title="status">{{status}}</td>
                                  <td><a title="check"><i class="icon-check"></i></a>
                                      <a title="remove"><i class="icon-remove"></i></a></td>
                </tr>
                            </tbody>
                          </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="add-account" class="modal hide fade" tabindex="-1"
        role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">脳</button>
        <h3 id="add-account-title" onclick="waiting()">Add User</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label">User Name:</label>
                <div class="controls">
                    <input type="text" id="username"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Password:</label>
                <div class="controls">
                    <input size="16" type="text" value="" id="password">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Is Admin:</label>
                <div class="controls">
                    <select>
                        <option>no</option>
                        <option>yes</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
        <label class="control-label">Status:</label>
        <div class="controls">
        <select>
                    <option>available</option>
                    <option>unavailable</option>
        </select>
            </div>
        </div>
      </form>
   </div>
   <div class="modal-footer">
        <button class="btn btn-save" data-dismiss="modal" aria-hidden="true">Close</button>
        <button id="saveUser" class="btn btn-save btn-primary">Save</button>
    </div>
</div>

<div id="account-info" class="modal hide fade" tabindex="-1"
        role="dialog" aria-labelledby="account-info-title" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">脳</button>
        <h3 id="account-info-title">Account Information</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label">User Name:</label>
                <div class="controls">
                    <input type="text" />
        </div>
            </div>
            <div class="control-group">
        <label class="control-label">Password:</label>
        <div class="controls">
                    <input size="16" type="text" value="">
        </div>
            </div>
            <div class="control-group">
        <label class="control-label">Is Admin:</label>
                <div class="controls">
                    <select id="isadmin">
                        <option value="no">no</option>
            <option value="yes">yes</option>
                    </select>
        </div>
            </div>
            <div class="control-group">
        <label class="control-label">Status:</label>
        <div class="controls">
          <select id="status">
                    <option value="available">available</option>
                    <option value="unavailable">unavailable</option>
          </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
    <button id="cancel" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button id="saveUser" class="btn btn-primary">Save</button>
        <!-- <button class="btn">Reset</button> -->
    </div>
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="lib/json2.js"></script>
<script type="text/javascript" src="js/account.js"></script>
</body>
</html>
2014-07-03 09:01
sweet6hero
Rank: 1
等　级：新手上路
帖　子：87
专家分：0
注　册：2013-6-9
第 3 楼
收藏
 得分:0 
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>I</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
  </head>
  <body>

    <div class="container-fluid">
      <div class="navbar">
        <div class="container-fluid">
          <div class="underline">
            <div class="top-head">
              <div class="row">
                <a class="big-title brand" href="#">I</a>
              </div>
              <div class="row">
                <span>Welcome, Tom</span>
                <a class="pull-right" href="index.html"><i class="icon-off"></i><span class="underline">Logout</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      
      <div class="row-fluid">
        <div id="sidebar-nav" class="sidebar-nav well">
          <div class="nav">
            <li><a href="accounts.html">U</a></li>
            <li class="active"><a href="devicesmanagement.html">D</a></li>
            <li><a href="testcasemanagement.html">T</a></li>
          </div>
        </div>
        
        
        <!--table-->
        <div class="main-content">
          <div class="page-header">
            <span class="h2-small">Devices List</span>
            <!--Add New Target Service Pop Dialog-->
            <a class="pull-right" role="button" id="addDevice"><i class="icon-plus"></i>Add A Device</a>
          </div>
          <div class="container-fluid">
            <form class="form form-inline pull-right">
               <input id="searchiput" type="text" class="search-query">
               <i id="search" class="icon-search move-left"></i>
            </form>
            <div id="distable">
              <table class="table table-bordered table-striped">
               <thead>
                <tr>
                  <th><input type="checkbox"/></th>
                  <th>Id</th>
                  <th>DeviceName</th>
                  <th>MacAddress</th>
                  <th>IpAddress</th>
                  <th>SerialNumber</th>
                  <th>Port</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
             </table>
            </div>
            <div id="devicetable" style="display: none;">
            <table class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th><input type="checkbox"/></th>
                  <th>Id</th>
                  <th>DeviceName</th>
                  <th>MacAddress</th>
                  <th>IpAddress</th>
                  <th>SerialNumber</th>
                  <th>Port</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr class="{{item}}">
                  <td><input type="checkbox"/></td>
                  <td>{{_id}}</td>
                  <td>{{name}}</td>
                  <td>{{mac_addr}}</td>
                  <td>{{ip_addr}}</td>
                  <td>{{serial_number}}</td>
                  <td>{{port}}</td>
                  <td>
                    <a href="#" title="edit"><i class="icon-edit"></i></a>
                    <a href="#" title="remove"><i class="icon-remove"></i></a>
                  </td>
                </tr>
              </tbody>
            </table>
            </div>
            <!--End table-->
          </div>
        </div>
      </div>
    </div>
   
   
    <!--Modal-->
    <div id="addoreditDevice" class="modal mediummodal hide fade" tabindex="-1" >
      <div id="modalhead" class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <span class="text-left"><label>Add A New Device</label></span>
      </div>

      <!--modalbody-->
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="control-group required">
            <label class="control-label">DeviceName:</label>
            <div class="controls">
              <input id="id" class="input-large" type="text" style="display:none;"/>
              <input id="devicename" class="input-large" type="text" pattern="[a-zA-Z0-9 _-]{3,}" required="required"/>
              <span class="help-inline text-small">DeviceName at least 3 chars</span>
            </div>
          </div>
          <div class="control-group required">
            <label class="control-label">MacAddress:</label>
            <div class="controls">
              <input id="macaddress" class="input-large" type="text" pattern="[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}" />
              <span class="help-inline text-small">MacAddressis</span>
            </div>
          </div>
          <div class="control-group required">
            <label class="control-label">IpAddress:</label>
            <div class="controls">
              <input id="ipaddress" class="input-large" type="text"  required="required"
                       pattern="((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))"
                        />
              <span class="help-inline text-small">IpAddress</span>
            </div>
          </div>
          <div class="control-group required">
            <label class="control-label">SerialNumber:</label>
            <div class="controls">
              <input id="serialnumber" class="input-large" type="text"  required="required"
                       pattern="((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))"
                        />
              <span class="help-inline text-small">serialnumber</span>
            </div>
          </div>
          <div class="control-group required">
            <label class="control-label">Port:</label>
            <div class="controls">
              <input id="port" class="input-large" type="text" pattern="([1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]{1}|6553[0-5])"
                     />
              <span class="help-inline text-small">Port is number 1-655535</span>
            </div>
          </div>
        </form>
      </div>
      <!--end modalbody-->
      <div class="modal-footer">
        <div id="savebutton" class="text-right">
          <a id="savedevice" class="btn btn-primary" >Save</a>
        </div>
      </div>
    </div>
   
   
    <script type="text/javascript" src="lib/jquery/jquery.js"></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="lib/json2.js"></script>
    <script type="text/javascript" src="lib/json2Template.js"></script>
    <script type="text/javascript" src="js/device.js"></script>
  </body>
</html>
2014-07-03 09:03
sweet6hero
Rank: 1
等　级：新手上路
帖　子：87
专家分：0
注　册：2013-6-9
第 4 楼
收藏
 得分:0 
.underline {
    border-bottom: 1px solid #888;
}

.navbar div .big-title {
    font-size: 36px;
    font-weight: 800;
    margin-top: 20px;
    color: #1b1b1b;
}

.navbar .container-fluid {
    padding-right: 0;
}

.top-head {
    padding-left: 20px;
    padding-bottom: 10px;
}

.sidebar-nav {
    min-height: 300px;
    width: 200px;
    margin-left: 20px;
    margin-right: 30px;
    float: left;
}

.main-content {
    overflow: hidden;
}

.sidebar-nav li {
    width: 180px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    text-align: center;
}
.sidebar-nav li a {
    border: 2px solid #5e5e5e;
    border-radius: 20px;
}
.sidebar-nav li.active a {
    color: white !important;
    background-color: #0088cc;
}

span.underline {
    line-height: 28px;
}
.split {
    text-align: center;
    height: 6px;
    margin-top: 20px;
    border-top: 2px solid;
    border-bottom: 2px solid;
}

.spacer {
    min-height: 100px;
}
.spacer-small {
    min-height: 30px;
}

.hspacer {
    display: inline-block;
    min-width: 60px;
}
.table a {
    text-decoration: underline;
}

.bordered {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px;
}

.bordered-noradius {
    border: 1px solid #ccc;
    padding: 10px;
}

.bigmodal {
    width: 860px;
    margin-left: -430px;
}

.bigmodal .modal-body{
    max-height: 480px;
    height: 480px;
}

.bigmodal hr {
    margin: 4px 0px 2px 0px;
    border-color: #aaaaaa;
}

.medium-modal {
    width: 680px;
    margin-left: -430px;
}

.medium-modal .modal-body{
    max-height: 360;
    height: 240px;
}

.medium-modal hr {
    margin: 4px 0px 2px 0px;
    border-color: #aaaaaa;
}

.mediummodal {
    width: 700px;
}
form.form-horizontal legend {
    margin-bottom: 0;
}

.login {
    position: absolute;
    width: 600px;
    height: 250px;
    top: 50%;
    bottom: 50%;
    left: 50%;
    margin-top: -125px;
    margin-bottom: -125px;
    margin-left: -300px;
}

.move-left {
    margin-left: -24px;
}

.move-up {
    margin-bottom: 50px;
}
.move-down {
    margin-top: 50px;
}

#addPlan, #viewPlan, #statPlan {
    width: 800px;
    margin-left: -400px;
}

.text-small {
    font-size: 0.8em;
}

.text-larger {
    font-size: 1.2em;
}

.required label:after{
    content: "*";
    color: red;
    font-size: 0.8em;
    vertical-align: top;
}

.required .help-inline {
    display: none;
}

.error.required .help-inline {
    display: inline;
}

.h2-small {
  font-size: 24.5px;
}

.page-header {
    margin-right: 20px;
}

.float-left {
    float: left;
    margin: 20px 20px;
}

.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-image: url('../lib/spinners/spinner_24.gif');
    vertical-align: middle;
    line-height: 24px;
}

.spinner-large {
    display: inline-block;
    width: 96px;
    height: 96px;
    background-repeat: no-repeat;
    background-image: url('../lib/spinners/spinner_96.gif');
    vertical-align: middle;
    line-height: 96px;
}

.spinner-verylarge {
    display: inline-block;
    width: 192px;
    height: 192px;
    background-repeat: no-repeat;
    background-image: url('../lib/spinners/spinner_192.gif');
    vertical-align: middle;
    line-height: 192px;
}

.text-pending {
    color: #666666;
}
.div-span2{
    border: 1px #797272 solid;
    width: 100px;
    height: 100px;
    margin:10px;
   }
.selet-pending{
    width: 130px;
    height: 130px;
  }

.gray-filter {
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);
}
2014-07-03 09:04
sweet6hero
Rank: 1
等　级：新手上路
帖　子：87
专家分：0
注　册：2013-6-9
第 5 楼
收藏
 得分:0 
(function($){
    function waiting() {
        $('body').append('<div class="modal-backdrop" style="cursor: wait; opacity: 0.5;"></div>');
    }
        
    function finishWaiting(delay) {
        delay = delay | 0;
        setTimeout(function() {
            $('body .modal-backdrop').fadeOut();
            setTimeout(function() {
                $('body .modal-backdrop').remove();
            }, 400);
        }, delay);
    }
        
        function successed(data){
               if (data.status){
                    $('#distable tbody').children().remove();
                    return false;
                    }
               var datasource={};
               datasource.item=data;
               //console.log(data);
               $('#distable').children().remove();
               $('#distable').bindTemplate({source: datasource, template: $('#devicetable')});
            }
            
        function failed(){
            //location.reload(false);
            console.log('failjjjj');
            }
            
   
        API_PREX='/automate_platform/device';
        function Device1(id){
            this._id=id;
            }
        function Device2(id,devicename,macaddress,ipaddress,serialnumber,port) {
            this._id=id;
            this.name=devicename;
            this.mac_addr=macaddress;
            this.ip_addr=ipaddress;
            this.serial_number=serialnumber;
            this.port=port;
    }
        function Device(devicename,macaddress,ipaddress,serialnumber,port) {
            this.name=devicename;
            this.mac_addr=macaddress;
            this.ip_addr=ipaddress;
            this.serial_number=serialnumber;
            this.port=port;
    }
        
    $.extend(Device, {
        findAll : function(successed, failed) {
            failed = failed || function() {};
            waiting();
                        //send httprequest and get reture json data
            $.ajax({
                           url : API_PREX + '/listDevices',
                           type    : 'GET',
                           dataType : "json",
                           success : successed
                           })
            .fail(failed)
            .always(finishWaiting);
        },
                findbyname : function(name,successed, failed) {
            failed = failed || function() {};
            waiting();
                        //send httprequest and get reture json data
            $.getJSON(API_PREX + '/getDeviceByName?name='+name,successed)
            .fail(failed)
            .always(finishWaiting);
        },
               
               save :function(device,failed){
                        failed = failed || function() {};
                        //alert(device);
            waiting();
            $.ajax({
                url     : API_PREX + '/addDevice',
                type    : 'GET',
                                data :device,
                success : function(){
                                     $('#addoreditDevice').modal('hide');
                                     Device.findAll(successed,failed);
                                    }
                            })
                        .fail(failed)
            .always(finishWaiting);
                    },
                update :function(device,failed){
                        failed = failed || function() {};
                        //alert(device);
            waiting();
            $.ajax({
                url     : API_PREX + '/updateDeviceDetails',
                type    : 'GET',
                                data :device,
                success : function(){
                                     $('#addoreditDevice').modal('hide');
                                     Device.findAll(successed,failed);
                                    }
                            })
                        .fail(failed)
            .always(finishWaiting);
                    },
               
                remove : function(device, failed) {
            failed = failed || function() {};
            waiting();
            $.ajax({
                url     : API_PREX + '/delDevice',
                type    : 'GET',
                                data :device,
                success : function(){
                                      Device.findAll(successed,failed);
                                    }
                            })
                        .fail(failed)
            .always(finishWaiting);
               },
               
        
               bindevent:function(){
                   var flag="save";
                   //search device by name
                   $('#search').click(function(){
                        var name=$('#searchiput').val();
                        
                        Device.findbyname(name,successed,failed);
                    });
                  $('#addDevice').click(function(event){
                      $('form input').val('');
                      $('#addoreditDevice').modal('show');
                      return false;   
                      });
                    
                  //save device to mogondb  
                  $('#savedevice').click(function(){
                      var devicename=$('#devicename').val();
                      var macaddress=$('#macaddress').val()||'';
                      var ipaddress=$('#ipaddress').val()||'';
                      var serialnumber=$('#serialnumber').val()||'';
                      var port=$('#port').val()||'';
                      if (flag=="edit"){
                         var id=$('#id').val();
                         var device=new Device2(id,devicename,macaddress,ipaddress,serialnumber,port);
                         Device.update(device);
                      }
                      if (flag=="save"){
                          var device=new Device(devicename,macaddress,ipaddress,serialnumber,port);
                          Device.save(device);
                      }
                      flag="save"
                      return false;
                    });
                 
                 $("#distable").on("click","a[title=edit]",function(){
                        $('#addoreditDevice').modal('show');
                        flag="edit"
                        $('#id').val($(this).parents("tr").children("td:eq(1)").text());
                        $('#devicename').val($(this).parents("tr").children("td:eq(2)").text());
                        $('#macaddress').val($(this).parents("tr").children("td:eq(3)").text());
                        $('#ipaddress').val($(this).parents("tr").children("td:eq(4)").text());
                        $('#serialnumber').val($(this).parents("tr").children("td:eq(5)").text());
                        $('#port').val($(this).parents("tr").children("td:eq(6)").text());
                        return false;
                     
                    });
                    
                 $("#distable").on("click","a[title=remove]",function(){
                        var id=$(this).parents("tr").children("td:eq(1)").text();
                        //alert(id);
                        var device=new Device1(id);
                        Device.remove(device,failed);
                        return false;
                    })
             }
    });
   
        
   
        
    $(function() {
        Device.findAll(successed,failed);
                Device.bindevent();
        });
}
)(jQuery);
2014-07-03 09:05
sweet6hero
Rank: 1
等　级：新手上路
帖　子：87
专家分：0
注　册：2013-6-9
第 6 楼
收藏
 得分:0 
(function($) {
    function waiting() {
        $('body').append('<div class="modal-backdrop" style="cursor: wait; opacity: 0.5;"></div>');
    }

    function finishWaiting(delay) {
        delay = delay | 0;
        setTimeout(function() {
            $('body .modal-backdrop').fadeOut();
            setTimeout(function() {
                $('body .modal-backdrop').remove();
            }, 400);
        }, delay);
    }

    function successed(data) {
                if (data.status=="1")
                    return false;
               $('#usertable').children().remove();
        var datasource = {};
        datasource.item = data;
        $('#usertable').bindTemplate({
            source : datasource,
            template : $('#datatable')
        });
    }
   
    function failed() {
        //location.reload(false);
        console.log('failjjjj');
    }

    API_PREX = '/automate_platform/account';
   
    function User(userid, username, isadmin, status) {
        this.userid = userid;
        this.username = username;
        this.isadmin = isadmin;
        this.status = status;
    }

    $.extend(User, {
        findAll : function(successed, failed) {
            failed = failed || function() {
            };
            waiting();
            //send httprequest and get reture json data
            $.ajax({
                url : API_PREX + '/listUsers',
                dataType : "json",
                success : successed
            }).fail(failed).always(finishWaiting);
        },
        
        findByName : function(username, successed, failed) {
            failed = failed || function() {};
            waiting();
            //send httprequest and get reture json data
            $.getJSON(API_PREX + '/listUsers/' + username, null, successed).fail(
                    failed).always(finishWaiting);
        },

        save : function(user, failed) {
            failed = failed || function() {
            };
            //alert(device);
            waiting();
            $.ajax({
                url : API_PREX + '/addUser/',
                type : 'POST',
                data : user,
                success : function() {
                    $('#add-account').modal('hide');
                    User.findAll(successed, failed);
                }
            }).fail(failed).always(finishWaiting);
        },

        remove : function(userid, failed) {
            failed = failed || function() {
            };
            waiting();
            $.ajax({
                url : API_PREX + '/delUser/' + userid,
                type : 'DELETE',
                success : function() {
                    User.findAll(successed, failed);
                }
            }).fail(failed).always(finishWaiting);
        },

        bindevent : function() {
            //search device by name
            $('#search').click(function() {
                var name = $('#searchiput').val();
                return User.findByName(name, successed, failed);
            });

            $('#addUser').click(function(event) {
                $('#add-account').modal('show');
                $('#username').val('');
                $('#password').val('');
                event.stopPropagation();
                                return false;
            });

            //save device to mogondb  
            $('#saveUser').click(function() {
                        var username = $('#username').val() || '';
                        var password = $('#password').val() || '';
                        var isadmin = $('#isadmin').val() || '';
                        var isselected = $('#status').val() || '';
                        var user = new User(username, password, isadmin, isselected);
                        User.save(user);
                                                return false;
                    });
            
            $('#cancel').click(function() {
                        $('#add-account').modal('hide');
                                                return false;
                    });

            $("#usertable").on(
                    "click",
                    "a[title=check]",
                    function() {
                        $('#add-account').modal('show');
                        $('#username').val(
                                $(this).parents("tr").children("td:eq(1)")
                                        .text());
                        $('#password').val(
                                $(this).parents("tr").children("td:eq(2)")
                                        .text());
                        $('#isadmin').val(
                                $(this).parents("tr").children("td:eq(3)")
                                        .text());
                        $('#status').val(
                                $(this).parents("tr").children("td:eq(4)")
                                        .text());
                                                return false;

                    });

            $("#usertable").on("click", "a[title=remove]", function() {
                var id = $(this).parents("tr").children("td:eq(0)").text();
                //alert(id);
                User.remove(id, failed);
                                return false;
            })
        }
    });

    $(function() {
        User.findAll(successed,failed);
        User.bindevent();
        /*Device.findAll(successed,failed);
                Device.bindevent();*/
        /*waiting();*/
    });
})(jQuery);
2014-07-03 09:05
sweet6hero
Rank: 1
等　级：新手上路
帖　子：87
专家分：0
注　册：2013-6-9
第 7 楼
收藏
 得分:0 
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>I</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/alertdialogs/css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
  
</head>
<body>
<div class="container-fluid">
     
     <div class="navbar">
       <div class="container-fluid">
         <div class="underline">
           <div class="top-head">
             <div class="row">
               <a class="big-title brand" href="#">I</a>
             </div>
             <div class="row">
               <span>Welcome, Tom</span>
               <a class="pull-right" href="index.html"><i class="icon-off"></i><span class="underline">Logout</span></a>
             </div>
           </div>
         </div>
       </div>
      </div>


     <div class="row-fluid">
        <div class="sidebar-nav well">
          <div class="nav">
            <li><a href="accounts.html">U</a></li>
            <li><a href="devicesmanagement.html">D</a></li>
            <li class="active"><a href="testcasemanagement.html">T</a></li>
          </div>
        </div>
        <div class="main-content">
           <div class="page-header">
             <span class="h2-small">TestCase List</span>
             <a class="pull-right" role="button" id="addcasebut"><i class="icon-plus"></i>Add Case</a>
           </div>
           <div class="container-fluid">
             <form class="form  pull-right form-horizontal">
               <input id="searchiput" type="text" class="search-query">
               <i id="search" class="icon-search move-left"></i></input>
             </form>
           </div>
           
           <div id="distable">
               <table class="table table-bordered">
               <thead>
                 <tr>
                   <th><input id="checkstats" type="checkbox"/></th>
                   <th>Id</th>
                   <th>CaseName</th>
                   <th>Roles</th>
                   <th>stats</th>
                   <th>Action</th>
                 </tr>
                </thead>
                <tbody>
                </tbody>
             </table>
           </div>
           <div id="devicetable" class="container-fluid" style="display: none;">
              <table class="table table-bordered">
               <thead>
                 <tr>
                   <th><input id="checkstats" type="checkbox"/></th>
                   <th>Id</th>
                   <th>CaseName</th>
                   <th>Roles</th>
                   <th>stats</th>
                   <th>Action</th>
                 </tr>
                </thead>
                <tbody>
                 <tr title="testcase" class="{{item}}">
                   <td><input type="checkbox"/></td>
                   <td>{{_id}}</td>
                   <td>{{name}}</td>
                   <td>{{roles}}</td>
                   <td>{{state}}</td>
                   <td>
                     <a title="edit"><i class="icon-edit"></i></a>
                     <a title="start"><i class="icon-play"></i></a>
                     <a title="stop"><i class="icon-pause"></i></a>
                     <a title="remove"><i class="icon-remove"></i></a>
                     <a title="output"><i class="icon-file"></i></a>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
           <div id="tabs" class="container-fluid" style="display: none;">
               <ul class="nav nav-tabs" id="service-tabs">
                  <li id="listats"><a href="#stats" data-toggle="tab">Running Status</a></li>
                  <li id="liroles"><a href="#roles" data-toggle="tab">Roles</a></li>
                  <li id="lilog"><a href="#rolelog" data-toggle="tab">Rolelog</a></li>
                  <a id="closestatus" class="pull-right"><i class="icon-remove"></i></a>
               </ul>
               
               <div class="tab-content">
                  <div class="tab-pane" id="stats">
                      <fieldset>
                         <legend >TestCase Running Status</legend>
                         <div id="runstatus" class="container" width="500" height="250" >
                             
                         </div>
                      </fieldset>
                  </div>
                  <div class="tab-pane" id="roles">
                      <fieldset>
                         <legend>The Roles of The TestCase</legend>
                         <div id="rolestatus" class="container" width="500" height="250" >
                         </div>
                      </fieldset>
                 </div>
                 <div class="tab-pane " id="rolelog">
                      <fieldset>
                         <legend>The Log of The Device</legend>
                         <div id="devicestatus" class="container" width="500" height="250" style="display: none;">
                             <table class="table table-bordered">
                                 <thead>
                                    <tr>
                                      <th>LogTime</th>
                                      <th>LogMsg</th>
                                    </tr>
                                 </thead>
                                 <tbody id="logtable">
                                    
                                </tbody>
                             </table>
                         </div>
                      </fieldset>
                 </div>
              </div>
           </div>
           
           
           <div id="outputtable" class="container-fluid" style="display: none;">
                <fieldset>
                <legend >TestCase OutPut</legend>
                <a id="closeoutputtable" class="pull-right"><i class="icon-remove"></i></a>
                <div>
                   <table class="table table-bordered">
                     <thead>
                       <tr>
                        <th>OutputTime</th>
                        <th>Role</th>
                        <th>Output</th>
                       </tr>
                     </thead>
                     <tbody id="output">
                     </tbody>
                  </table>
                </div>
           </div>
            
            
      
        </div>
         
      
     </div>
</div>


   
<!-- popup window for Add -->  
<!-- ko with: creatingPlan -->
<div id="addcase" class="modal hide fade" role="dialog" ">
    <div class="modal-header">
      <h3>add testcase</h3>
    </div>
    <div class="modal-body">
        <img id="loading" src="images/loading.gif" style="display:none;">
        <form name="form" method="POST" enctype="multipart/form-data">
          <p>Please select a file and click Upload button</p>
          <div class="control-group">
             <input type="file" name="fileToUpload" id="fileToUpload"/>            
          </div>
          <div class="pull-right">
             <button id="uploadsubmit" class="btn btn-save">upload</button>
             <button id="uploadclose"  class="btn">Close</button>
          </div>
        </form>
    </div>
</div>
  
  
<!-- popup window for Add -->
<!-- ko with: creatingPlan -->
<div id="updatecase" class="container-fluid modal mediummodal hide fade" tabindex="-1" >
      <div id="modalhead" class="modal-header">
        <button type="button" class="close" id="close">x</button>
        <span class="text-left"><label>Attached Device To TestCase</label></span>
      </div>
      <!--modalbody-->
      <div class="modal-body">
        <form class="form-horizontal ">
          <div class="control-group required">
            <label class="control-label">TestCaseName:</label>
            <div class="controls">
              <input id="testcaseid" class="input-large hide" type="text" style="display:none;"/>
              <input id="testcasename" class="input-large" type="text"/>
            </div>
          </div>
          <div id="lists" class="row container-fluid">
             <div id="devicelist" class="span0 container-fluid well-large" ></div>
             <div id="displaydevicelist" class="span0 container-fluid well-large" style="display: none;">
                <label>DevicesList</label>
                <select id="deviceselect" size="5" multiple="multiple" class="selet-pending">
                  <option class="{{item}}" value ="{{_id}}">{{name}}</option>
                </select>
             </div>
          </div>
        </form>
        <div id="helplist" class="span0 container-fluid well-large"></div>
     </div>
     <div class="pull-right">
        <button id="save" class="btn btn-save">Save</button>
        <button id="close1"  class="btn">Close</button>
     </div>
</div>
  <!-- /ko -->
  <script type="text/javascript" src="lib/jquery/jquery.js"></script>
  <script type="text/javascript" src="lib/bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="lib/json2.js"></script>
  <script type="text/javascript" src="lib/json2Template.js"></script>
  <script type="text/javascript" src="lib/upload/ajaxfileupload.js"></script>
  <script type="text/javascript" src="js/testcase.js"></script>
  <script type="text/javascript" src="lib/alertdialogs/js/jquery.ui.draggable.js"></script>   
  <script type="text/javascript" src="lib/alertdialogs/js/jquery.alerts.js"></script>
  
</body>
</html>
2014-07-03 09:13
sweet6hero
Rank: 1
等　级：新手上路
帖　子：87
专家分：0
注　册：2013-6-9
第 8 楼
收藏
 得分:0 
(function($){
    function waiting() {
        $('body').append('<div class="modal-backdrop" style="cursor: wait; opacity: 0.5;"></div>');
    }
        
    function finishWaiting(delay) {
        delay = delay | 0;
        setTimeout(function() {
            $('body .modal-backdrop').fadeOut();
            setTimeout(function() {
                $('body .modal-backdrop').remove();
            }, 400);
        }, delay);
    }
        
        function successed(data){
               if (data.status){
                    $('#distable tbody').children().remove();
                    return false;
                    }
               var datasource={};
               datasource.item=data;
               //console.log(data);
               $('#distable').children().remove();
               $('#distable').bindTemplate({source: datasource, template: $('#devicetable')});
            }
            
        function failed(){
            //location.reload(false);
            console.log('failjjjj');
            }
            
   
        API_PREX='/automate_platform/device';
        function Device1(id){
            this._id=id;
            }
        function Device2(id,devicename,macaddress,ipaddress,serialnumber,port) {
            this._id=id;
            this.name=devicename;
            this.mac_addr=macaddress;
            this.ip_addr=ipaddress;
            this.serial_number=serialnumber;
            this.port=port;
    }
        function Device(devicename,macaddress,ipaddress,serialnumber,port) {
            this.name=devicename;
            this.mac_addr=macaddress;
            this.ip_addr=ipaddress;
            this.serial_number=serialnumber;
            this.port=port;
    }
        
    $.extend(Device, {
        findAll : function(successed, failed) {
            failed = failed || function() {};
            waiting();
                        //send httprequest and get reture json data
            $.ajax({
                           url : API_PREX + '/listDevices',
                           type    : 'GET',
                           dataType : "json",
                           success : successed
                           })
            .fail(failed)
            .always(finishWaiting);
        },
                findbyname : function(name,successed, failed) {
            failed = failed || function() {};
            waiting();
                        //send httprequest and get reture json data
            $.getJSON(API_PREX + '/getDeviceByName?name='+name,successed)
            .fail(failed)
            .always(finishWaiting);
        },
               
               save :function(device,failed){
                        failed = failed || function() {};
                        //alert(device);
            waiting();
            $.ajax({
                url     : API_PREX + '/addDevice',
                type    : 'GET',
                                data :device,
                success : function(){
                                     $('#addoreditDevice').modal('hide');
                                     Device.findAll(successed,failed);
                                    }
                            })
                        .fail(failed)
            .always(finishWaiting);
                    },
                update :function(device,failed){
                        failed = failed || function() {};
                        //alert(device);
            waiting();
            $.ajax({
                url     : API_PREX + '/updateDeviceDetails',
                type    : 'GET',
                                data :device,
                success : function(){
                                     $('#addoreditDevice').modal('hide');
                                     Device.findAll(successed,failed);
                                    }
                            })
                        .fail(failed)
            .always(finishWaiting);
                    },
               
                remove : function(device, failed) {
            failed = failed || function() {};
            waiting();
            $.ajax({
                url     : API_PREX + '/delDevice',
                type    : 'GET',
                                data :device,
                success : function(){
                                      Device.findAll(successed,failed);
                                    }
                            })
                        .fail(failed)
            .always(finishWaiting);
               },
               
        
               bindevent:function(){
                   var flag="save";
                   //search device by name
                   $('#search').click(function(){
                        var name=$('#searchiput').val();
                        
                        Device.findbyname(name,successed,failed);
                    });
                  $('#addDevice').click(function(event){
                      $('form input').val('');
                      $('#addoreditDevice').modal('show');
                      return false;   
                      });
                    
                  //save device to mogondb  
                  $('#savedevice').click(function(){
                      var devicename=$('#devicename').val();
                      var macaddress=$('#macaddress').val()||'';
                      var ipaddress=$('#ipaddress').val()||'';
                      var serialnumber=$('#serialnumber').val()||'';
                      var port=$('#port').val()||'';
                      if (flag=="edit"){
                         var id=$('#id').val();
                         var device=new Device2(id,devicename,macaddress,ipaddress,serialnumber,port);
                         Device.update(device);
                      }
                      if (flag=="save"){
                          var device=new Device(devicename,macaddress,ipaddress,serialnumber,port);
                          Device.save(device);
                      }
                      flag="save"
                      return false;
                    });
                 
                 $("#distable").on("click","a[title=edit]",function(){
                        $('#addoreditDevice').modal('show');
                        flag="edit"
                        $('#id').val($(this).parents("tr").children("td:eq(1)").text());
                        $('#devicename').val($(this).parents("tr").children("td:eq(2)").text());
                        $('#macaddress').val($(this).parents("tr").children("td:eq(3)").text());
                        $('#ipaddress').val($(this).parents("tr").children("td:eq(4)").text());
                        $('#serialnumber').val($(this).parents("tr").children("td:eq(5)").text());
                        $('#port').val($(this).parents("tr").children("td:eq(6)").text());
                        return false;
                     
                    });
                    
                 $("#distable").on("click","a[title=remove]",function(){
                        var id=$(this).parents("tr").children("td:eq(1)").text();
                        //alert(id);
                        var device=new Device1(id);
                        Device.remove(device,failed);
                        return false;
                    })
             }
    });
   
        
   
        
    $(function() {
        Device.findAll(successed,failed);
                Device.bindevent();
        });
}
)(jQuery);
2014-07-03 09:13
zklhp
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来　自：china
等　级：贵宾
威　望：254
帖　子：11485
专家分：33241
注　册：2007-7-10
第 9 楼
收藏
 得分:7 
直接上文件不好么
2014-07-03 09:51
tlliqi
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等　级：贵宾
威　望：204
帖　子：15453
专家分：65956
注　册：2006-4-27
第 10 楼
收藏
 得分:7 
怎跑这了？
2014-07-03 11:05
快速回复：html+jquery 的使用
数据加载中...
 
　　　



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有，并保留所有权利。
Powered by Discuz, Processed in 0.130216 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved