Jquery插件jbox笔记

最新推荐文章于 2024-08-10 07:24:03 发布

Try_go

最新推荐文章于 2024-08-10 07:24:03 发布

阅读量2k

点赞数 2

分类专栏： Java Web前端开发文章标签： jquery jquery插件 jbox

本文链接：https://blog.csdn.net/Try_go/article/details/74277079

版权

Java Web前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Jquery插件jbox笔记

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

jbox的准备工作
jbox的注意点
jbox的实例代码

jbox的准备工作

引入jQuery和jBox相关插件
1、相关详细内容：jbox的参考网站
2、jbox的下载页面：jbox下载链接

box的注意点

在调用用jbox要使用方法$.jBox.在上面给的参考网址中jbox为小写的这样会调用失败，注意要是用大写。

jbox的实例代码

在这举出了提示框，和选择提示框的案例。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎页面</title>
<!-- 引入jbox的js文件和样式 -->
<script type="text/javascript" src="jquery-jbox/2.3/jquery-1.4.2.min.js"></script>  
<script type="text/javascript" src="jquery-jbox/2.3/jquery.jBox-2.3.min.js"></script>  
<script type="text/javascript" src="jquery-jbox/2.3/i18n/jquery.jBox-zh-CN.js"></script>  
<link type="text/css" rel="stylesheet" href="jquery-jbox/2.3/Skins/Blue/jbox.css"/>  

  <script>
    function method1(){
        $.jBox.info('Hello jbox', 'jbox');
    };
    function method2(){
        var submit = function (v, h, f) {
            if (v == 'ok')
                alert("执行成功方法");
            else if (v == 'cancel')
                alert("执行取消方法");
            return true; //close
        };
        $.jBox.confirm("确定吗？", "提示", submit);
    }
    function method3(){
        var submit = function (v, h, f) {
            if (v == true)
                alert("执行成功方法");
            else if (v == false)
                alert("执行取消方法");
            return true; //close
        };
        $.jBox.confirm("确定吗？", "提示", submit, { buttons: { '确认按钮': true, '取消按钮': false} });
    } 

  </script>
</head>
<body>
    <h4>首页展示</h4>
    <a href="#" onclick="method1()">提示信息</a><br/>
    <a href="#" onclick="method2()">选择提示框</a><br/>
    <a href="#" onclick="method3()">选择提示框2</a><br/>
</body>
</html>