//定義彈框html
<div id="delete" class="easyui-dialog" title="Delete" data-options="closed: true" style="width: 400px; height: 280px;"> <form method="post" class="easyui-form" > <div class="notice">You are deleting a comment now!</div> <div class="delreason"> <input type="radio" checked="true" name="delReason" value="unhealthy" />unhealthy <input type="radio" name="delReason" value="other" />other </div> <input type="hidden" name="itemId" id="itemId" value=""/> <div class="head"> <div><span class="bold">Marks</span></div> </div> <textarea class="textarea" name="delComment" id="delComment"></textarea> <div class="center"> <input onclick="fnSubmit('delete','your request url')" type="button" value="submit"/> </div> </form> </div>
設置一個按鈕
<button class="r-button" id="deletebtn">Delete</button>
對應的js操作,初始化彈框以及提交表單
$('#deletebtn').click(function (e) {
e.preventDefault();
$('#delete_publicity').dialog({
onOpen:function() {
//AAA參數可以為外界變量
$('#itemId').val(AAA);
$('#del_post').val('-1');
$('#deleteMarks').val('');
}
//也可以在此處設定初始值,而免於在html中設定了
//title: 'My Dialog',
//width: 400,
//height: 200,
//closed: false,
//cache: false,
//href: 'get_content.php',
//modal: true
});
$('#delete_publicity').dialog('open');
showModalMask('.modal-mask');
$('#delete_publicity').window('center');
});
提交表單操作
function fnSubmit(id,url) {
if(id=='delete_reply'){
//注意,easyui表單提交實際上是利用jquery的serialize方法將表單數據轉化為query string的形式append到url地址上
var submitPar = $('#'+id+' form').serialize();
submitPar = submitPar.toString();
var delReason = submitPar.substring(submitPar.indexOf('=')+1,submitPar.indexOf('&'));
var delComment = submitPar.substring(submitPar.lastIndexOf('=')+1,submitPar.length);
delComment = delComment.trim();
//根據easyui 表單提交的方式,若存在文本框在form內,且輸入有空格時 將會將空格對應的轉化為+號,具體可參見easyui表單提交部分
if(delReason == 'other' && (delComment==''||/^[\+]+$/.test(delComment))){
$.messager.alert('Notice','Please enter the reason for the deletion');
}else{
ajaxRequest(id,url);
}
}else{
ajaxRequest(id,url);
}
function ajaxRequest(id,url){
$('#'+id+' form').form('submit',{
url:url,
onSubmit:function(){
//return $(this).form('validate');
},
success:function(data){
if(data){
data = JSON.parse(data);
}
if(data.code==200){
$('#'+id).dialog('close');
$.messager.alert('Notice',data.message);
*****
}else{
*********
}
}else{
$.messager.alert('Notice','submit Fail.');
}
}
});
}
}
