jBox使用_jconsole使用教程JBox使用详解

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注