沃梦达建站 > 网页特效 > 正文详情
JBox演示30种不同的调用方法
最近更新 2023-07-10
资源编号 419

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

现在升级为VIP会员可享受除金币资源外其他资源无限制下载!
VIP优势:
VIP专享栏目无限制下载
静态模板栏目无限制下载
网站源码栏目无限制下载

免费下载(注册会员每天可下载3个资源)

查看演示 VIP会员介绍 加入收藏
详情介绍
jBox 是一款基于 jQuery 的多功能对话框插件,有alert警告框、confirm确认框和prompt输入对话框等,并且兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流浏览器。
 
引入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.sucaihuo.com的内容,并设置了标题、宽与高、按钮 
$.jBox("iframe:http://www.sucaihuo.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 });
版权声明 1、 本站的pbootcms程序官方可以免费商用,dedecms的程序除购买模板外,还需要到官方购买商业授权。
3、 本站的一切源代码文件仅限用于正规合法网站,请勿将源码文件用于违反国家法律法规的网站。
4、 本站的部分源码来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
5、 本站资源大部分本地存储,部分大文件提供网盘下载,如发现链接失效,请联系我们我们会第一时间更新。

我们只做高端精品的建站模板!

常见问题
  • 在本站购买的金币资源可提供免费安装指导服务,如用户实在不会安装可免费提供一次安装服务。(安装服务不包含服务器环境配置、虚拟主机用户请先购买好需要的虚拟主机,通常是要支持php+mysql的主机)。因vip会员是会员组权限,本站不提供
查看详情
  • 本站网资源按照下载权限一共分为三类: 1、金币资源: 金币资源是需要在网站充值金币才可以下载,vip会员权限无法下载金币资源。 2、vip资源: vip资源是需要升级会员权限即可下载,升级vip后享受多重权限、可在vip期限内无限制下载所需要的
查看详情

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务