JBox演示30种不同的调用方法

收藏

jBox 是一款基于 jQuery 的多功能对话框插件，有alert警告框、confirm确认框和prompt输入对话框等，并且兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流浏览器。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入jQuery和jBox相关插件

<script type="text/javascript" src="jBox/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="jBox/i18n/jquery.jBox-zh-CN.js"></script>
<link type="text/css" rel="stylesheet" href="jBox/Skins/皮肤文件夹/jbox.css"/>
// 或
<link type="text/css" rel="stylesheet" href="jBox/Skins2/皮肤文件夹/jbox.css"/>

演示一：调用HTML

var info = 'jBoxHTML内容调用';
$.jBox.info(info);

演示二：调用某个div的内容，并且弹出层附带底部文字

// 显示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

// 用iframe显示http://www.erdangjiade.com的内容，并设置了标题、宽与高、按钮
$.jBox("iframe:http://www.erdangjiade.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);

演示六：prompt对话提示框

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 });

更多jBox演示效果，请看演示代码讲解。