jBox 網頁對話方塊

jBox 是能夠幫您在建置網站的時候，輕鬆地建立對話視窗的一個套件。套件本身建立於 jQuery 框架之下，能夠在警告框和確認框中顯示任意的 HTML 內容包括：文字、圖片和影片等等。對於對話確認之後還有提供回調的方法。 jBox 也支援從其他的 URL 來取得內容，它的外觀介面漂亮而且也可自行訂製不透明度、寬度、提供兩個 skin 供開發者選擇、可拖曳和是否關閉等等的參數設定。

jBox 網頁對話方塊

使用方法：
第一步 先載入程式所需要的 JavaScript 檔
//利用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//jBox 的主程式碼
<script type="text/javascript" src="jBox/jquery.jBox-2.3.min.js"></script>
//jBox 提示方塊的語系檔
<script type="text/javascript" src="jBox/i18n/jquery.jBox-zh-CN.js"></script>
// skin 的CSS 樣式檔
<link type="text/css" rel="stylesheet" href="jBox/Skins/ skin 資料夾 /jbox.css"/>

第二步 寫入讓 jBox 動作的按鈕
<div>
  $.jBox()<br />
  <input type="button" value="執行" onClick="demo1();" />
</div>
<div>
  $.jBox.open()<br />
  <input type="button" value="執行" onClick="demo2();" />
</div>
<div>
  $.jBox.prompt()<br />
  <input type="button" value="執行" onClick="demo3();" />
</div>
<div>
  $.jBox.tip()<br />
  <input type="button" value="執行" onClick="demo4();" />
</div>
<div>
  $.jBox.messager()<br />
  <input type="button" value="執行" onClick="demo5();" />
</div>

第三步 寫入執行的 JavaScript 程式片段
function demo1(){
var content = {
state1: {
content: '状态一',
buttons: { '下一步': 1, '取消': 0 },
buttonsFocus: 0,
submit: function (v, h, f) {
if (v == 0) {
return true; // close the window
}
else {
$.jBox.nextState(); //go forward
// 或 $.jBox.goToState('state2')
}
return false;
}
},
state2: {
content: '状态二，请关闭窗口哇：）',
buttons: { '上一步': 1, '取消': 0 },
buttonsFocus: 0,
submit: function (v, h, f) {
if (v == 0) {
return true; // close the window
} else {
$.jBox.prevState() //go back
// 或 $.jBox.goToState('state1');
}

return false;
}
}
};
$.jBox(content);
}
function demo2(){
$.jBox.open("iframe:http://www.baidu.com", "百度一下", 800, 350, { buttons: { '关闭': true} });
}
function demo3(){
var submit = function (v, h, f) {
if (v == 'ok')
jBox.tip(v, 'info');
else if (v == 'cancel')
jBox.tip(v, 'info');

return true; //close
};
$.jBox.confirm("确定吗？", "提示", submit);
}
function demo4(){
var submit = function (v, h, f) {
if (v == 'ok') {
$.jBox.tip("正在删除数据...", 'loading');
// 模拟2秒后完成操作
window.setTimeout(function () { $.jBox.tip('删除成功。', 'success'); }, 2000);
}
else if (v == 'cancel') {
// 取消
}

return true; //close
};
$.jBox.confirm("确定要删除数据吗？", "提示", submit);
}
function demo5(){
$.jBox.messager("Hello jBox 3", "my title", 3000, {
width: 350,
icon: 'info',
showType: 'show',
buttons: { '去看看': true },
submit: function (v, h, f) {
$.jBox.info('看个蛋蛋？');
return true;
}
});
}

作者網站：http://kudystudio.com/jbox/jbox-demo2.html
檔案大小：1056 KB(包含範例)
檔案下載：http://kudystudio.com/jbox/jbox-v2.3.rar
檔案備份：下載