JBox-v2.3修改版

 2856去下载

JBox-v2.3修改版 支持 Jquery 1.*的所有版本。


JBox-v2.3修改版


$.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) 方法。

示例(一):

  1. // 此例省略了前缀html:,前缀标识是不区分大小写的,也可以是HTML:
  2. var info = 'jQuery jBox<br /><br />版本:v2.0<br />日期:2011-7-24<br />';
  3. info += '官网:<a target="_blank" href="http://kudystudio.com/jbox">http://kudystudio.com/jbox</a>';
  4. $.jBox.info(info);

示例(二):

  1. // 显示id为id-html的div内部html,同时设置了bottomText
  2. $.jBox('id:id-html', { bottomText: '这是底部文字' });

示例(三):

  1. // ajax get 页面ajax.html的内容并显示,例如要提交id=1,则地址应该为 ajax.html?id=1,post:前缀的使用与get:的一样
  2. $.jBox("get:ajax.html");

示例(四):

  1. // 用iframe显示http://www.baidu.com的内容,并设置了标题、宽与高、按钮
  2. $.jBox("iframe:http://www.baidu.com", {
  3.     title: "百度一下",
  4.     width: 800,
  5.     height: 350,
  6.     buttons: { '关闭': true }
  7. });

示例(五):

  1. var content = {
  2.     state1: {
  3.         content: '状态一',
  4.         buttons: { '下一步': 1, '取消': 0 },
  5.         buttonsFocus: 0,
  6.         submit: function (v, h, f) {
  7.             if (== 0) {
  8.                 return true; // close the window
  9.             }
  10.             else {
  11.                 $.jBox.nextState(); //go forward
  12.                 // 或 $.jBox.goToState('state2')
  13.             }
  14.             return false;
  15.         }
  16.     },
  17.     state2: {
  18.         content: '状态二,请关闭窗口哇:)',
  19.         buttons: { '上一步': 1, '取消': 0 },
  20.         buttonsFocus: 0,
  21.         submit: function (v, h, f) {
  22.             if (== 0) {
  23.                 return true; // close the window
  24.             } else {
  25.                 $.jBox.prevState() //go back
  26.                 // 或 $.jBox.goToState('state1');
  27.             }
  28.             return false;
  29.         }
  30.     }
  31. };
  32. $.jBox(content);

示例(六):

  1. var html = "<div style='padding:10px;'>输入姓名:<input type='text' id='yourname' name='yourname' /></div>";
  2. var submit = function (v, h, f) {
  3.     if (f.yourname == '') {
  4.         $.jBox.tip("请输入您的姓名。", 'error', { focusId: "yourname" }); // 关闭设置 yourname 为焦点
  5.         return false;
  6.     }
  7.     $.jBox.tip("你叫:" + f.yourname);
  8.     //$.jBox.tip("你叫:" + h.find("#yourname").val());
  9.     //$.jBox.tip("你叫:" + h.find(":input[name='yourname']").val());
  10.     return true;
  11. };
  12. $.jBox(html, { title: "你叫什么名字?", submit: submit });


本文网址:https://www.zztuku.com/index.php/detail-12849.html
转载请声明来自:站长图库 - JBox-v2.3修改版


使用声明:

1、本站所有素材,仅限学习交流,请勿用于商业用途。

2、本站资源大多无解压密码,如遇需要解压密码,无特殊说明,均为:zztuku.com

3、下载积分可通过日常 签到绑定邮箱 等途径免费获得!

4、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!由于资源大多存储在云盘,如出现链接失效请评论反馈。

5、如果素材损害你的权益,请 联系我们 给予处理。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢