前端消息提示框汇总
<script type="text/javascript"> var rr = false; function layer_confirm() { //询问框 var index = layer.confirm('支付成功将扣除相应金额,是否确认支付?', { btn: ['确认', '取消'] //按钮 }, function (index) { rr = true; __doPostBack('<%= btn_pay.UniqueID %>', ''); layer.close(index); }, function (index) { rr = false; layer.close(index); }); return rr; } </script>
↑ 这是普通按钮在OnServerClick之前的OnClick方法中的js形式的消息框 OnClick="return layer_Convfirm();",要先定rr=false是因为如果不定义false那么提示框结果默认为true,闪现之后直接执行后面的方法,先定义false之后提示框会一直停留,直到用户选择确定或者取消按钮才会消失
↓ 这是适用于repeater的oncommand方法的提示框,如果在repeater中循环添加了很多按钮,那么按钮的响应事件就是在oncommand方法中实现,
可是有时候并不想直接执行方法,会在执行前进行一个询问框的提示,只有在询问框中选择yes才会执行oncommand方法,这时候就用以下方式进行消息提示框的显示
//这是在cs中pageload方法前的初始化以及判断repeater中的参数是否为空的方法 private string Argument = string.Empty; private string CommandName = string.Empty; protected void Page_Load(object sender, EventArgs e) { CommandName = Request.Params.Get("__EVENTTARGET"); Argument = Request.Params.Get("__EVENTARGUMENT"); if (!string.IsNullOrEmpty(Argument)) { if (Argument == "rep_UsedBookList_ItemCommand") { rep_UsedBookList_ItemCommand(CommandName); } } }
//这是在repeater的默认oncommand方法中将参数传递给重载的oncommand方法 protected void rep_UsedBookList_ItemCommand(object source, RepeaterCommandEventArgs e) { if (e.CommandName == "tuihuo") { rep_UsedBookList_ItemCommand(e.CommandName + "," + e.CommandArgument); } if (e.CommandName == "querenshouhuo") { //在后台设置前台提示框的方法 StartupScript.Register(this, "layer_confirm('" + e.CommandName + "," + e.CommandArgument + "','rep_UsedBookList_ItemCommand','是否确认收货?');"); } }
protected void rep_UsedBookList_ItemCommand(string btname) { try { //将得到的参数分解,如果分解得到的不是两个参数,直接return var CommandArgument = string.Empty; var CommandName = string.Empty; string[] arr = btname.Split(','); if (arr.Length != 2) { return; } for (int i = 0; i < arr.Length; i++) { if (string.IsNullOrEmpty(arr[i])) { return; } if (i == 0) CommandName = arr[i]; if (i == 1) CommandArgument = arr[i]; } var ID = CommandArgument; //进行原本会在默认oncommand方法中执行的方法 //点击确认收货按钮 if (CommandName == "querenshouhuo") { }
}
}
↓ 后台设置前端的提示框,将div设置成提示框的样式,在js中执行显示方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--退货原因--> <div id="inputReason" class="ui-form ui-form-popover sizing" runat="server"> <div class="form-popover sizing"> <div class="form-main"> <div class="ui-input-group"> <input type="text" id="txt_reason" runat="server" value="" class="ui-input-item" placeholder="请输入退货原因" /> </div> <div class="ui-button-group"> <button class="ui-btn ui-btn-submit" style="width: 40%" runat="server" id="btn_Commit" onserverclick="btn_Commit_OnServerClick">确认</button> <button class="ui-btn ui-btn-submit" style="width: 40%" runat="server" id="btn_Cancel" onserverclick="btn_Cancel_OnServerClick">取消</button> </div> </div> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//这是按钮的响应事件 protected void lb_querenshouhuo_Click(object sender, EventArgs e) { var btn = (LinkButton)sender; //执行js中的方法,显示div StartupScript.Register(this, "inputReason()"); }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 输入退货原因 function inputReason() { //inputreason是div的id $('#inputReason').show(); $('.ui-overlay').show(); //$(".ui-tabs-main > .ui-tabs-content").eq(1).fadeIn().siblings().hide(); };