JSP中JQuery UI Dialog彈窗使用具體操作
阿新 • • 發佈:2019-02-06
1、簡要說明
關於JQuery-UI-Dialog的使用說明確實不少,但是很多文章說明的不夠詳細。
這樣就導致了很多像我一樣的新手,雖然按照人家寫的做了,但是仍然跟人家做的不一樣。
有鑑於此,我就把自己剛剛進行過的操作的具體步驟寫一篇文章,以饗新人。
**注意:這裡說的是JQuery-UI-Dialog,不是Jquery-easyUI-Dialog。**
2、引入JavaScript檔案和CSS樣式
使用JQuery-UI-Dialog需要引入必要的js檔案盒css樣式檔案。 (1)首先引入css樣式檔案: jquery-ui-1.8.4\themes\base/jquery-ui.css jquery-ui-1.8.4/themes/base/jquery.ui.dialog.css, 這兩個檔案在jquery-ui解壓後的資料夾中; (2)引入js檔案: jquery-1.8.2.min.js, jquery-ui-1.8.4.custom.min.js, jquery-ui-1.8.4\ui\jquery.ui.dialog.js。
3、建立彈窗用div塊
在JSP頁面的body標籤中任意位置(我個人建議是是開頭或者結尾),建立一個空的div塊,新增樣式為隱藏。例如我的div程式碼如下:
<div title="標題欄" id="div1" name="div1" style="display: none; padding:0; border:0; margin-top:25px;">
//如果你需要直接彈窗東西的話可以直接在這兒寫
</div>
4、彈窗函式
$(function(){
//給彈窗加了個單選框
var array = {"男" :"","女":""};
var content = "請選擇您的性別:";
for(var i=0; i<array.length; i++){
content += "<input type='radio' id='sex' name='sex'value='"+i+"'/>";
content += "<span>"+array[i]+"</span><br/>";
}
$("#div1").html(content);
});
function showdialog(){
$("#div1").dialog({
width:300,
height:270,
closeOnEscape:false,//右上角沒有叉號
//↑↑↑在彈窗右上角不顯示關閉按鈕,如果要用右上角的關閉就是true或者不寫這個屬性
modal:true,//彈窗的時候不能動頁面的其他地方(模態模式)
create:function(e, ui){//開始執行的方法,用來處理彈出時事件
//給單選按鈕加上預設選項
$("#sex").each(
if($(this).val()==1){
$(this).attr("checked",true);
}
);
},
buttons:{//設定頁面的按鈕
//按鈕的名字:對應的方法
"確認":function(){
var checkoption = $("input:radio[name='sex']:checked").next().text();
//獲取選中的選項
var checkval = $("input:radio[name='sex']:checked").val();
//對應的值
alert("您選中的性別:"+checkoption+",對應的值為:"+checkval);
},
"關閉":function(){
$(this).dialog("close");//關閉當前彈窗
}
"其他":function(){
alert("你按下了其他按鈕");
}
}
});
}