JBox-v2.3修改版 支持 Jquery 1.*的所有版本。
$.jBox()
函數原型:
$.jBox(content, options);
└ 或者 jBox(content, options);
參數說明:
- content (string,json)
└ 可以是string或json。當是string時,需要加上前綴標識(html:、id:、get:、post:、iframe:),如果沒有加標識,系統會自動加上html:,具體請看應用例子。當是json時,表示一個或多個狀態,每個狀態的默認值為 $.jBox.stateDefaults。
- options [可選] (json)
└ 其它參數選項,默認值為 $.jBox.defaults。
備注:如果想手動關閉jBox(不包括下面的tip與messager,它們另有方法),請調用 $.jBox.close(token) 方法。
示例(一):
// 此例省略了前綴html:,前綴標識是不區分大小寫的,也可以是HTML: var info = 'jQuery jBox<br /><br />版本:v2.0<br />日期:2011-7-24<br />'; info += '官網:<a target="_blank" href="http://kudystudio.com/jbox">http://kudystudio.com/jbox</a>'; $.jBox.info(info);
示例(二):
// 顯示id為id-html的div內部html,同時設置了bottomText $.jBox('id:id-html', { bottomText: '這是底部文字' });
示例(三):
// ajax get 頁面ajax.html的內容并顯示,例如要提交id=1,則地址應該為 ajax.html?id=1,post:前綴的使用與get:的一樣 $.jBox("get:ajax.html");
示例(四):
// 用iframe顯示http://www.baidu.com的內容,并設置了標題、寬與高、按鈕 $.jBox("iframe:http://www.baidu.com", { title: "百度一下", width: 800, height: 350, buttons: { '關閉': true } });
示例(五):
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);
示例(六):
var html = "<div style='padding:10px;'>輸入姓名:<input type='text' id='yourname' name='yourname' /></div>"; var submit = function (v, h, f) { if (f.yourname == '') { $.jBox.tip("請輸入您的姓名。", 'error', { focusId: "yourname" }); // 關閉設置 yourname 為焦點 return false; } $.jBox.tip("你叫:" + f.yourname); //$.jBox.tip("你叫:" + h.find("#yourname").val()); //$.jBox.tip("你叫:" + h.find(":input[name='yourname']").val()); return true; }; $.jBox(html, { title: "你叫什么名字?", submit: submit });