jQuery是一款非常流行的JavaScript庫,它可以幫助開發者更快地開發頁面交互效果,其中之一的功能就是UI模塊。
UI模塊則包含了諸如確認框、對話框、提示框等常見的組件,為用戶提供一種友好的交互方式。下面我們就來介紹一下如何使用jQuery UI中的確認框功能:
//創建確認框 $( "#dialog-confirm" ).dialog({ resizable: false, height:"auto", modal: true, buttons: { "確認": function() { //確認后的邏輯處理 $( this ).dialog( "close" ); }, "取消": function() { $( this ).dialog( "close" ); } } }); //觸發確認框 $( "#confirm-btn" ).on( "click", function() { $( "#dialog-confirm" ).dialog( "open" ); });
上面的代碼中,我們首先通過dialog方法來創建了一個確認框。其中,resizable表示是否可縮放,height表示確認框高度,modal表示是否使用遮罩層,buttons則定義了確認框的兩個按鈕及點擊后的處理函數。
接著,我們通過on方法給“確認按鈕”綁定了一個點擊事件,當該按鈕被點擊時,便會觸發確認框的顯示。
如此一來,我們便成功使用了jQuery UI中的確認框功能,為用戶提供了一種簡單明了的交互方式。