html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

layer实现弹窗提交信息_javascript技巧_

[ ] 已经帮助:人解决问题

layer是非常好用的弹窗插件,具体参见官方文档 bqzHTML5中文学习网 - HTML5先行者学习网
点击这里进入。官方有很多示例,使用方法也非常简单,引入官方下载的css和js就可以了。但是有时候,弹窗提醒并不能满足我们的所有要求。例如,在奖品界面,希望点击“编辑奖品”的时候,能弹出对话框让我们来填写信息,如下图所示:bqzHTML5中文学习网 - HTML5先行者学习网

bqzHTML5中文学习网 - HTML5先行者学习网

如何用简洁美观的 layer 实现这一功能呢?官方并没有给我们提供示例,那就自己动手写吧。下面把代码贴出来。bqzHTML5中文学习网 - HTML5先行者学习网

给“添加奖品”按钮加上单击触发confirmUpdateAward方法bqzHTML5中文学习网 - HTML5先行者学习网

bqzHTML5中文学习网 - HTML5先行者学习网

var awards = "";function confirmUpdateAward(i) { layer.open({  type: 1,  closeBtn: false,  shift: 7,  shadeClose: true,  content: "<div style='width:350px;'><div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项名称</p><input id='awardName' class='form-control' type='text' name='awardName' value='"+awards[i].awName+"'/></div>" +  "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项描述</p><input id='awardDescription' class='form-control' type='text' name='awardDescription' value='"+awards[i].awDescription+"'/></div>"+  "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入获奖人数</p><input id='awardUserCount' class='form-control' type='number' name='awardUserCount' value='"+awards[i].awUserCount+"'/></div>"+  "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项类别</p><input id='awardKind' class='form-control' type='text' name='awardKind' value='"+awards[i].awKind+"'/>" +  "<button style='margin-top:5%;' type='button' class='btn btn-block btn-success btn-lg' onclick='updateAward("+awards[i].id+")'>提交</button></div>" });}function updateAward(awardId){ var awardUserCount = $("#awardUserCount").val(); if(awardUserCount*1>8888 || awardUserCount*1<1){  layer.msg('人数必须是1到8888', {   time: 500, //0.5s后自动关闭   // btn: ['明白了', '知道了']  }); }else{  var awardName = $("#awardName").val();  var awardDescription = $("#awardDescription").val();  var awardKind = $("#awardKind").val();  $.ajax({   type: "post",   url : getContextPath() + "/award/updateAward",   dataType:'json',   data: {    "awardId":awardId,    "awardName":awardName,    "awardDescription":awardDescription,    "awardUserCount":awardUserCount,    "awardKind":awardKind   },   success: function(data){    var updateSuccess = data.data;    if(updateSuccess){     layer.msg('修改成功', {      time: 500, //0.5s后自动关闭      // btn: ['明白了', '知道了']     });     refreshPage();    }else{     layer.msg('修改失败', {      time: 500, //20s后自动关闭      // btn: ['明白了', '知道了']     });    }   }  });  layer.closeAll(); }}

这里有几个需要注意的点:bqzHTML5中文学习网 - HTML5先行者学习网

第一:最后一定要用bqzHTML5中文学习网 - HTML5先行者学习网

layer.closeAll();bqzHTML5中文学习网 - HTML5先行者学习网
bqzHTML5中文学习网 - HTML5先行者学习网

否则提交之后弹窗不会自己关闭。bqzHTML5中文学习网 - HTML5先行者学习网

第二:bqzHTML5中文学习网 - HTML5先行者学习网

<input type="number" />bqzHTML5中文学习网 - HTML5先行者学习网
bqzHTML5中文学习网 - HTML5先行者学习网

只能保证用户不能输入字母(实际上字母e是可以输入的,会认为是科学技术法),但是通过Json传到后端的依旧是String类型,在做将该信息用bqzHTML5中文学习网 - HTML5先行者学习网

Integer.valueOf();bqzHTML5中文学习网 - HTML5先行者学习网
bqzHTML5中文学习网 - HTML5先行者学习网

强转为Integer时候,一定要判断String是否为空,否则会抛异常。bqzHTML5中文学习网 - HTML5先行者学习网

第三: bqzHTML5中文学习网 - HTML5先行者学习网
bqzHTML5中文学习网 - HTML5先行者学习网

这里实际上是用到了一个js方法之间调用巧传对象的方法。bqzHTML5中文学习网 - HTML5先行者学习网

当我们从数据库取出若干条奖品记录时,每一条记录都应该有一个“修改”按钮。当我们做修改的时候,用户都希望输入框中显示之前的信息,但是js的方法之间调用的时候,传对象很麻烦,有什么简便的方法呢?bqzHTML5中文学习网 - HTML5先行者学习网

如上面的源码所示,我们只传序号 i 过去。下面这段代码是奖品展示页面的代码,我们可以看到每条记录都有“编辑”按钮。bqzHTML5中文学习网 - HTML5先行者学习网

$(document).ready(function () { refreshPage();});//定义全局变量var awards = "";function refreshPage(){ $.ajax({  type: "post",  url : getContextPath() + "/award/getAllAwards",  dataType:'json',  data: {  },  success: function(data){   awards = data.data;   var awardHtml = "";   var iLen = awards.length;   //遍历取出每一条奖品   for(var i = iLen - 1 ; i >=0 ; i--){    awardHtml+="<tr><td><span id='span"+i+"' style='cursor:pointer;' onclick='selectAward("+i+","+iLen+")' class='label label-default'>"+"选中"+"</span></td><td>"+awards[i].awName+"</td><td>"+awards[i].awDescription+"</td><td>"+     awards[i].awUserCount+"</td><td>"+awards[i].awKind+"</td><td><span style='cursor:pointer;' class='label label-info' onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span></td><td>" +     "<span class='label label-danger' style='cursor:pointer;' onclick='comfirmDeleteAward("+awards[i].id+")'>"+"删除"+"</span></td></tr>";   }   $("#awardTable").html(awardHtml);  } });}

注意看bqzHTML5中文学习网 - HTML5先行者学习网

onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span>bqzHTML5中文学习网 - HTML5先行者学习网
bqzHTML5中文学习网 - HTML5先行者学习网

这句,我们只传了i到我们最开始写的confirmUpdateAward方法里面,却因为在js中定义了全局变量 awards ,就可以巧妙地在confirmUpdateAward方法中使用awards[i]了。bqzHTML5中文学习网 - HTML5先行者学习网

layer做信息提交遇到的坑都写在这里了,应该再没什么别的问题了,有需要的话可以留言评论。bqzHTML5中文学习网 - HTML5先行者学习网

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。bqzHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助