您的位置：首页 > 其它

弹出框JBox实例

2013-10-10 20:27 253 查看
前几天做的考试系统的一些后台弹出框的一些模板。主要是因为普通的弹出框样式不是很好，颜色也不能调换。这里我们用的是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');
 
}


提示框如下







下面就做个测试吧

先建立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>


调用的结果如下







点击好吖给予提示。







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的学习。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航