JBox-v2.3修改版

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

79167 383 查看评论 (23)

分享到微信朋友圈

查看演示立即下载

插件描述：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 });