jBox的 详细解说与介绍， 好用的jquery对话框插件

插件说明
- jBox 是一款基于 jQuery 的多功能对话框插件，能够实现网站的整体风格效果，给用户一个新的视觉享受。
运行环境

- 兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流浏览器。备注：IE不支持边框的圆角样式，不推荐大家使用蛋痛的IE浏览器。

1. <script type="text/javascript" src="jBox/jquery-1.4.2.min.js"></script>  
2.   <script type="text/javascript" src="jBox/jquery.jBox-2.3.min.js"></script>  
3.   <script type="text/javascript" src="jBox/i18n/jquery.jBox-zh-CN.js"></script>  
4.   
5.   <link type="text/css" rel="stylesheet" href="jBox/Skins/皮肤文件夹/jbox.css"/>  
6.  // 或   <link type="text/css" rel="stylesheet" href="jBox/Skins2/皮肤文件夹/jbox.css"/>
   
7. 1. 函数原型：   
   2. $.jBox(content, options);   
   3. 　　　 └ 或者 jBox(content, options);   
   1. 参数说明：   
   2. - content　(string,json)   
   3. 　　　└ 可以是string或json。当是string时，需要加上前缀标识（html:、id:、get:、post:、iframe:），如果没有加标识，系统会自动加上html:，具体请看应用例子。当是json时，表示一个或多个状态，每个状态的默认值为 $.jBox.stateDefaults。   
   4. - options　[可选] (json)   
   5. 　　　└ 其它参数选项，默认值为 $.jBox.defaults。   
   6.   
   7. 备注：如果想手动关闭jBox（不包括下面的tip与messager，它们另有方法），请调用　$.jBox.close(token)　方法。
   8. 
      
   1. 示例（一）:   
   2.   
   3. // 此例省略了前缀html:，前缀标识是不区分大小写的，也可以是HTML:  
   4. var info = 'jQuery jBox<br /><br />版本：v2.0<br />日期：2011-7-24<br />';  
   5. info += '官网：<a target="_blank" href="http://kudystudio.com/jbox">http://kudystudio.com/jbox</a>';  
   6. $.jBox.info(info);  
   7.   
   8. 示例（二）:   
   9.   
   10. // 显示id为id-html的div内部html，同时设置了bottomText  
   11. $.jBox('id:id-html', { bottomText: '这是底部文字' });  
   12. 这里是id为id-html的div内部html，同时设置了bottomText  
   13.   
   14. 示例（三）:   
   15.   
   16. // ajax get 页面ajax.html的内容并显示，例如要提交id=1，则地址应该为 ajax.html?id=1，post:前缀的使用与get:的一样  
   17. $.jBox("get:ajax.html");  
   18.   
   19. 示例（四）:   
   20.   
   21. // 用iframe显示http://www.baidu.com的内容，并设置了标题、宽与高、按钮  
   22. $.jBox("iframe:http://www.baidu.com", {  
   23.     title: "百度一下",  
   24.     width: 800,  
   25.     height: 350,  
   26.     buttons: { '关闭': true }  
   27. });  
   28.   
   29. 示例（五）:   
   30.   
   31. var content = {  
   32.     state1: {  
   33.         content: '状态一',  
   34.         buttons: { '下一步': 1, '取消': 0 },  
   35.         buttonsFocus: 0,  
   36.         submit: function (v, h, f) {  
   37.             if (v == 0) {  
   38.                 return true; // close the window  
   39.             }  
   40.             else {  
   41.                 $.jBox.nextState(); //go forward  
   42.                 // 或 $.jBox.goToState('state2')  
   43.             }  
   44.             return false;  
   45.         }  
   46.     },  
   47.     state2: {  
   48.         content: '状态二，请关闭窗口哇：）',  
   49.         buttons: { '上一步': 1, '取消': 0 },  
   50.         buttonsFocus: 0,  
   51.         submit: function (v, h, f) {  
   52.             if (v == 0) {  
   53.                 return true; // close the window  
   54.             } else {  
   55.                 $.jBox.prevState() //go back  
   56.                 // 或 $.jBox.goToState('state1');  
   57.             }  
   58.   
   59.             return false;  
   60.         }  
   61.     }  
   62. };  
   63.   
   64. $.jBox(content);  
   65.   
   66. 示例（六）:   
   67.   
   68. var html = "<div style='padding:10px;'>输入姓名：<input type='text' id='yourname' name='yourname' /></div>";  
   69. var submit = function (v, h, f) {  
   70.     if (f.yourname == '') {  
   71.         $.jBox.tip("请输入您的姓名。", 'error', { focusId: "yourname" }); // 关闭设置 yourname 为焦点  
   72.         return false;  
   73.     }  
   74.   
   75.     $.jBox.tip("你叫：" + f.yourname);  
   76.     //$.jBox.tip("你叫：" + h.find("#yourname").val());  
   77.     //$.jBox.tip("你叫：" + h.find(":input[name='yourname']").val());  
   78.   
   79.     return true;  
   80. };  
   81.   
   82. $.jBox(html, { title: "你叫什么名字？", submit: submit });  
   83.  $.jBox.open()  
   84. 函数原型：   
   85. $.jBox.open(content, title, width, height, options);   
   86. 　　　 └ 或者 jBox.open(content, title, width, height, options);   
   87. 参数说明：   
   88. - content　(string,json)   
   89. 　　　└ 可以是string或json。当是string时，需要加上前缀标识（html:、id:、get:、post:、iframe:），如果没有加标识，系统会自动加上html:，具体请看应用例子。当是json时，表示一个或多个状态，每个状态的默认值为 $.jBox.stateDefaults。   
   90. - title　[可选] (string)   
   91. 　　　└ 窗口标题，值为null时为不显示标题，默认值为 $.jBox.defaults.title。   
   92. - width　[可选] (string,number)   
   93. 　　　└ 窗口宽度，值为'auto'或具体像素值（例如350），默认值为 $.jBox.defaults.width。   
   94. - height　[可选] (string,number)   
   95. 　　　└ 窗口高度，值为'auto'或具体像素值（例如100），默认值为 $.jBox.defaults.height。   
   96. - options　[可选] (json)   
   97. 　　　└ 其它参数选项，默认值为 $.jBox.defaults。   
   98.   
   99. 备注：$.jBox.open() 只是 $.jBox() 的一个扩展，方便 title、width、height 参数的传递。   
   100.   
   101. 示例（一）:   
   102.   
   103. $.jBox.open("iframe:http://www.baidu.com", "百度一下", 800, 350, { buttons: { '关闭': true} });  
   104.   
   105. 示例（二）: （content为Json对象，比较复杂一点的例子）   
   106.   
   107. var html1 = '<div class="msg-div">' +  
   108.             '<p>购买数量：</p><div class="field"><input type="text" id="amount" name="amount" value="1" /></div>' +  
   109.             '<p>收货地址：</p><div class="field"><textarea id="address" name="address"></textarea></div>' +  
   110.             '<div class="errorBlock" style="display: none;"></div>' +  
   111.             '</div>';  
   112.   
   113. var html2 = '<div class="msg-div">' +  
   114.             '<p>给卖家留言：</p><div class="field"><textarea id="message" name="message"></textarea></div>' +  
   115.             '</div>';  
   116.   
   117. var data = {};  
   118. var states = {};  
   119. states.state1 = {  
   120.     content: html1,  
   121.     buttons: { '下一步': 1, '取消': 0 },  
   122.     submit: function (v, h, f) {  
   123.         if (v == 0) {  
   124.             return true; // close the window  
   125.         }  
   126.         else {  
   127.             h.find('.errorBlock').hide('fast', function () { $(this).remove(); });  
   128.   
   129.             data.amount = f.amount; //或 h.find('#amount').val();  
   130.             if (data.amount == '' || parseInt(data.amount) < 1) {  
   131.                 $('<div class="errorBlock" style="display: none;">请输入购买数量！</div>').prependTo(h).show('fast');  
   132.                 return false;  
   133.             }  
   134.             data.address = f.address;  
   135.             if (data.address == '') {  
   136.                 $('<div class="errorBlock" style="display: none;">请输入收货地址！</div>').prependTo(h).show('fast');  
   137.                 return false;  
   138.             }  
   139.   
   140.             $.jBox.nextState(); //go forward  
   141.             // 或 $.jBox.goToState('state2')  
   142.         }  
   143.   
   144.         return false;  
   145.     }  
   146. };  
   147. states.state2 = {  
   148.     content: html2,  
   149.     buttons: { '上一步': -1, '提交': 1, '取消': 0 },  
   150.     buttonsFocus: 1, // focus on the second button  
   151.     submit: function (v, o, f) {  
   152.         if (v == 0) {  
   153.             return true; // close the window  
   154.         } else if (v == -1) {  
   155.             $.jBox.prevState() //go back  
   156.             // 或 $.jBox.goToState('state1');  
   157.         }  
   158.         else {  
   159.             data.message = f.message;  
   160.   
   161.             // do ajax request here  
   162.             $.jBox.nextState('<div class="msg-div">正在提交...</div>');  
   163.             // 或 $.jBox.goToState('state3', '<div class="msg-div">正在提交...</div>')  
   164.   
   165.             // asume that the ajax is done, than show the result  
   166.             var msg = [];  
   167.             msg.push('<div class="msg-div">');  
   168.             msg.push('<p>下面是提交的数据</p>');  
   169.             for (var p in data) {  
   170.                 msg.push('<p>' + p + ':' + data[p] + '</p>');  
   171.             }  
   172.             msg.push('</div>');  
   173.             window.setTimeout(function () { $.jBox.nextState(msg.join('')); }, 2000);  
   174.         }  
   175.   
   176.         return false;  
   177.     }  
   178. };  
   179. states.state3 = {  
   180.     content: '',  
   181.     buttons: {} // no buttons  
   182. };  
   183. states.state4 = {  
   184.     content: '',  
   185.     buttons: { '确定': 0 }  
   186. };  
   187.   
   188. $.jBox.open(states, '提交订单', 450, 'auto');  
   189.  $.jBox.prompt()  
   190. 函数原型：   
   191. $.jBox.prompt(content, title, icon, options);   
   192. 　　　 └ 或者 jBox.prompt(content, title, icon, options);   
   193. 参数说明：   
   194. - content　(string)   
   195. 　　　└ 只能是string，不支持前缀标识，默认值为''。   
   196. - title　[可选] (string)   
   197. 　　　└ 窗口标题，值为null时为不显示标题，默认值为 $.jBox.defaults.title。   
   198. - icon　[可选] (string)   
   199. 　　　└ 内容图标，值为'none'时为不显示图标，可选值有'none'、'info'、'question'、'success'、'warning'、'error'，默认值为'none'。   
   200. - options　[可选] (json)   
   201. 　　　└ 其它参数选项，默认值为 $.jBox.defaults。   
   202.   
   203. 备注：以下几个方法由　$.jBox.prompt()　扩展而来，参数类似，请看下面的例子。   
   204. $.jBox.alert(content, title, options);   
   205. 　　　 └ 或者 jBox.alert(content, title, options);   
   206. $.jBox.info(content, title, options);   
   207. 　　　 └ 或者 jBox.info(content, title, options);   
   208. $.jBox.success(content, title, options);   
   209. 　　　 └ 或者 jBox.success(content, title, options);   
   210. $.jBox.error(content, title, options);   
   211. 　　　 └ 或者 jBox.error(content, title, options);   
   212. $.jBox.confirm(content, title, submit, options);   
   213. 　　　 └ 或者 jBox.confirm(content, title, submit, options);   
   214. $.jBox.warning(content, title, submit, options);   
   215. 　　　 └ 或者 jBox.warning(content, title, submit, options);   
   216. 　　　 └ 上面方法中默认按钮的文字设置在 $.jBox.languageDefaults   
   217.   
   218. 示例（一）:   
   219.   
   220. //加了个其它参数closed  
   221. $.jBox.prompt('Hello jBox', 'jBox', 'info', { closed: function () { alert('prompt is closed.'); } });  
   222.   
   223. 示例（二）:   
   224.   
   225. $.jBox.alert('Hello jBox', 'jBox');  
   226.   
   227. 示例（三）:   
   228.   
   229. $.jBox.info('Hello jBox', 'jBox');  
   230.   
   231. 示例（四）:   
   232.   
   233. $.jBox.success('Hello jBox', 'jBox');  
   234.   
   235. 示例（五）:   
   236.   
   237. $.jBox.error('Hello jBox', 'jBox');  
   238.   
   239. 示例（六）:   
   240.   
   241. var submit = function (v, h, f) {  
   242.     if (v == 'ok')  
   243.         jBox.tip(v, 'info');  
   244.     else if (v == 'cancel')  
   245.         jBox.tip(v, 'info');  
   246.   
   247.     return true; //close  
   248. };  
   249.   
   250. $.jBox.confirm("确定吗？", "提示", submit);  
   251.   
   252. 示例（六02）:   
   253.   
   254. var submit = function (v, h, f) {  
   255.     if (v == true)  
   256.         jBox.tip("恩", 'info');  
   257.     else  
   258.         jBox.tip("好吖", 'info');  
   259.   
   260.     return true;  
   261. };  
   262. // 自定义按钮  
   263. $.jBox.confirm("天使，做我女朋友吧？", "表白提示", submit, { buttons: { '恩': true, '好吖': false} });  
   264.   
   265. 示例（七）:   
   266.   
   267. var submit = function (v, h, f) {  
   268.     if (v == 'yes') {  
   269.         $.jBox.tip('已保存。', 'success');  
   270.     }  
   271.     if (v == 'no') {  
   272.         $.jBox.tip('没保存。');  
   273.     }  
   274.     if (v == 'cancel') {  
   275.         $.jBox.tip('已取消。');  
   276.     }  
   277.   
   278.     return true;  
   279. };  
   280. // 可根据需求仿上例子定义按钮  
   281. $.jBox.warning("内容已修改，是否保存？", "提示", submit);  
   282.  $.jBox.tip()  
   283. 函数原型：   
   284. $.jBox.tip(content, icon, options);   
   285. 　　　 └ 或者 jBox.tip(content, icon, options);   
   286. 参数说明：   
   287. - content　(string)   
   288. 　　　└ 只能是string，不支持前缀标识，默认值为''。   
   289. - icon　[可选] (string)   
   290. 　　　└ 内容图标，可选值有'info'、'success'、'warning'、'error'、'loading'，默认值为'info'，当为'loading'时，timeout值会被设置为0，表示不会自动关闭。   
   291. - options　[可选] (json)   
   292. 　　　└ 其它参数选项，默认值为 $.jBox.tipDefaults。   
   293.   
   294. 备注：如果想手动关闭tip，请调用　$.jBox.closeTip()　方法。   
   295.   
   296. 示例（一）:   
   297.   
   298. $.jBox.tip('Hello jBox');  
   299.   
   300. 示例（二）:   
   301.   
   302. //加了个其它参数focusId  
   303. $.jBox.tip('关闭后设置输入框为焦点', 'info', { focusId: 'tip-input' });  
   304. 输入框：   
   305. 示例（三）:   
   306.   
   307. //加了个其它参数closed  
   308. $.jBox.tip('关闭后设置输入框为已选择', 'error', { closed: function () { $('#tip-input2').select(); } });  
   309. 输入框：   
   310. 示例（四）:   
   311.   
   312. $.jBox.tip("正在XX，你懂的...", 'loading');  
   313. // 模拟2秒后完成操作  
   314. window.setTimeout(function () { $.jBox.tip('XX已完成。', 'success'); }, 2000);  
   315.   
   316. 示例（五）:   
   317.   
   318. var submit = function (v, h, f) {  
   319.     if (v == 'ok') {  
   320.         $.jBox.tip("正在删除数据...", 'loading');  
   321.         // 模拟2秒后完成操作  
   322.         window.setTimeout(function () { $.jBox.tip('删除成功。', 'success'); }, 2000);  
   323.     }  
   324.     else if (v == 'cancel') {  
   325.         // 取消  
   326.     }  
   327.   
   328.     return true; //close  
   329. };  
   330.   
   331. $.jBox.confirm("确定要删除数据吗？", "提示", submit);  
   332.  $.jBox.messager()  
   333. 函数原型：   
   334. $.jBox.messager(content, title, timeout, options);   
   335. 　　　 └ 或者 jBox.messager(content, title, timeout, options);   
   336. 参数说明：   
   337. - content　(string)   
   338. 　　　└ 只能是string，不支持前缀标识，默认值为''。   
   339. - title　[可选] (string)   
   340. 　　　└ 窗口标题，值为null时为不显示标题，默认值为 $.jBox.messagerDefaults.title。   
   341. - timeout　[可选] (number)   
   342. 　　　└ 显示多少毫秒后自动关闭，如果为0则不自动关闭，默认值为 $.jBox.messagerDefaults.timeout。   
   343. - options　[可选] (json)   
   344. 　　　└ 其它参数选项，默认值为 $.jBox.messagerDefaults。   
   345.   
   346. 备注：如果想手动关闭messager，请调用　$.jBox.closeMessager()　方法。   
   347.   
   348. 示例（一）:   
   349.   
   350. $.jBox.messager('Hello jBox', 'jBox');  
   351.   
   352. 示例（二）:   
   353.   
   354. $.jBox.messager("Hello jBox 2", "my title", null, { width: 350, showType: 'fade' });  
   355.   
   356. 示例（三）:   
   357.   
   358. $.jBox.messager("Hello jBox 3", "my title", 3000, {  
   359.     width: 350,  
   360.     icon: 'info',  
   361.     showType: 'show',  
   362.     buttons: { '去看看': true },  
   363.     submit: function (v, h, f) {  
   364.         $.jBox.info('看个蛋蛋？');  
   365.         return true;  
   366.     }  
   367. });  
   368.  jBox 其它成员  
   369. 全局设置：   
   370. $.jBox.defaults   
   371. $.jBox.stateDefaults   
   372. $.jBox.tipDefaults   
   373. $.jBox.messagerDefaults   
   374. $.jBox.languageDefaults   
   375. 其它函数：   
   376. - $.jBox.setDefaults(configs);   
   377. 　　　└ 设置全局设置，请参考 demo.js 里的使用。   
   378. - $.jBox.getBox();   
   379. 　　　└ 获取最前面打开的窗口jQuery对象。   
   380. - $.jBox.getIframe(jBoxId);   
   381. 　　　└ 获取最前面打开的或指定ID的窗口里的 iframe jQuery对象。(方便与iframe的交互)   
   382. - $.jBox.getContent();   
   383. 　　　└ 获取最前面打开的窗口的内容html。   
   384. - $.jBox.setContent(content);   
   385. 　　　└ 设置最前面打开的窗口的内容html。   
   386. - $.jBox.getState(stateNmae);   
   387. 　　　└ 获取最前面打开的窗口可见状态内容。（content为多状态下）   
   388. - $.jBox.getStateName();   
   389. 　　　└ 获取最前面打开的窗口可见状态的名称。（content为多状态下）   
   390. - $.jBox.goToState(stateName, stateContent);   
   391. 　　　└ 显示最前面打开的窗口的指定状态，并可设置状态内容。（content为多状态下）   
   392. - $.jBox.nextState(stateContent);   
   393. 　　　└ 显示最前面打开的窗口的下一个状态，并可设置状态内容。（content为多状态下）   
   394. - $.jBox.prevState(stateContent);   
   395. 　　　└ 显示最前面打开的窗口的上一个状态，并可设置状态内容。（content为多状态下）   
   396. - $.jBox.close(token);   
   397. 　　　└ 关闭最前面打开的窗口，token可以是指定jBox的ID或布尔值，如果是true显示关闭所有已打开的窗口。   
   398. - $.jBox.closeTip();   
   399. 　　　└ 关闭提示（由 $.jBox.tip() 打开的）。   
   400. - $.jBox.closeMessager();   
   401. 　　　└ 关闭提示（由 $.jBox.messager() 打开的）。   
   402.   
   403. 示例（iframe）:   
   404.   
   405. // 调父窗口请用 parent 或 top，如果是多层iframe，需要调用多个parent  
   406. var html = "<div style='padding:10px;'>输入点什么：<input type='text' id='some' name='some' /></div>";  
   407. var submit = function (v, h, f) {  
   408.     if (f.some == '') {  
   409.         // f.some 或 h.find('#some').val() 等于 top.$('#some').val()  
   410.         top.$.jBox.tip("请输入点什么。", 'error', { focusId: "some" }); // 关闭设置 some 为焦点  
   411.         return false;  
   412.     }  
   413.     top.$.jBox.info("你输入了：" + f.some);  
   414.   
   415.     return true;  
   416. };  
   417.   
   418. top.$.jBox(html, { title: "输入", submit: submit });