弹出框JBox实例

时间：2021-01-06 22:55:44

前几天做的考试系统的一些后台弹出框的一些模板。主要是因为普通的弹出框样式不是很好，颜色也不能调换。这里我们用的是JBox，还是从师傅那得知的。自己小实验了下，这里就做个小结。

JBox

插件说明


- jBox 是一款基于jQuery的多功能对话框插件，能够实现网站的整体风格效果，给用户一个新的视觉享受。

运行环境


- 兼容 IE6+、Firefox、Chrome、Safari、Opera等主流浏览器。备注：IE不支持边框的圆角样式，不推荐大家使用蛋痛的IE浏览器。

 使用Jbox函数的时候，需要先了解下Jbox的函数原型

函数原型：


$.jBox.prompt(content,title, icon, options);

└
或者jBox.prompt(content, title, icon, options);


参数说明：


-content (string)

└
只能是string，不支持前缀标识，默认值为''。


-title [可选] (string)

└
窗口标题，值为null时为不显示标题，默认值为 $.jBox.defaults.title。


- icon [可选](string)

└
内容图标，值为'none'时为不显示图标，可选值有'none'、'info'、'question'、'success'、'warning'、'error'，默认值为'none'。


-options [可选] (json)

└
其它参数选项，默认值为$.jBox.defaults。


函数的参数和先前
vb
的
msgbox
的内容几乎是一样的，所以这个不说也是很明白的。


 


$.jBox.tip(content, icon, options);
 
和上面的函数类似，只是表现的形式不同，它以文字框的形式出现
.
一般用在最后的结果提示上。

实例


function demo1() {

    $.jBox.tip('Hello jBox');

}

 提示框如下

弹出框JBox实例

下面就做个测试吧

先建立
html
页面或是
Asp.net
页面


 


 1
首先的下载
JBox
的代码库
js
函数库。这里给出下载的网址。
http://www.kudystudio.com/jbox/jbox-demo.html

2 之后就是引入JBox的函数库。引入需要

<linkhref="jBox/Skins/Green/jbox.css" rel="stylesheet"type="text/css" />//我这里使用的是绿色的皮肤，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>

3
调用
Jbox
的原形函数进行编写

<script type="text/javascript">{
function demo2() {

var submit = function (v, h, f) {

if (v == true)

jBox.tip("恩", 'info');

else

jBox.tip("好吖", 'info');

return true;

};

// 自定义按钮

$.jBox.confirm("天使，做我女朋友吧？", "表白提示", submit, { buttons: { '恩': true, '好吖': false} });

}}

Html页面的代码

<body>

<div>

  <form id="form1" name="form1" method="post" action="">

    <input type="button" name="button" id="button" value="按钮"   onclick="demo2()"/>

  </form>

  </div>

</body>

调用的结果如下

弹出框JBox实例

点击好吖给予提示。

弹出框JBox实例

function demo3() {

var submit = function (v, h, f) {

if (v == 'yes') {

$.jBox.tip('已保存。', 'success');

}

if (v == 'no') {

$.jBox.tip('没保存。');

}

if (v == 'cancel') {

$.jBox.tip('已取消。');

}

return true;

};

// 可根据需求仿上例子定义按钮

$.jBox.warning("内容已修改，是否保存？", "提示", submit);

}

提示框如下

弹出框JBox实例

经过以上演示是不是有种焕然一新的感觉呢。其实
Jbox
的函数原型有很多种，和我们以前学习过的一些函数的样式和名字几乎是想通的，只要花一点时间基本就可以认识的差不多。期待大家的更好的使用和掌握
Jbox的学习。

相关文章