JBox-v2.3修改版

所属分类:UI-对话框和灯箱,弹出层

 35896  76  查看评论 (18)
JBox-v2.3修改版 ie兼容6

$.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 });
相关插件-对话框和灯箱,弹出层

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币

    wangxq012 0
    2016/12/7 11:12:29
    我也需要这个,以i前有很多,现在几乎都绝种了 回复
    〖 Kmi 〗 0
    2016/11/22 8:11:36
    正是所需要的东西,谢谢分享~我只能膜拜了,献上我的膝盖! 回复
    iamfzm 0
    2016/7/31 20:07:26
    正是所需要的东西,谢谢分享~ 回复
    ┵Bliss'lullaby 0
    2016/7/19 11:07:57
    我只能膜拜了,献上我的膝盖! 回复
    xiaoxiao 0
    2016/5/26 14:05:37
    priest123456 0
    2016/1/5 13:01:59
    空瓶子 0
    2015/12/29 14:12:14

    这个功能很强大,而且也很实用啊

    回复
    DiamondDog 0
    2015/12/2 18:12:21

    看着很不错啊,很全啊

        A201200390
        2015/12/4 11:12:10

        有下载吗,方便给我发一份吗?578767687@qq.com  谢谢》

    回复
    madma 0
    2015/10/29 16:10:25

    用jbox原版 改下样式就可以了   需要的可以联系我  

    回复
    madma 0
    2015/10/29 13:10:05

    求下载啊  没有分 怎么下

    回复
取消回复