弹出框JBox实例
前几天做的考试系统的一些后台弹出框的一些模板。主要是因为普通的弹出框样式不是很好，颜色也不能调换。这里我们用的是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的学习。
弹出框JBox实例的更多相关文章
- 弹出框优化实例（alert和confirm）
在项目过程中会遇到需要使用自己定义的弹出框的情况.以前用过ymprompt,但是它太复杂而且不好自己操控.所以自己写了一个弹出框实例. 主要有两类弹出框alert和confirm.基于jQuery a ...
- bootstrap-js(六)弹出框
实例 为任意元素添加一小块浮层,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须 ...
- bootstrap弹出框
要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...
- Bootstrap-Plugin：弹出框（Popover）插件
ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...
- Selenium2学习-040-JavaScript弹出框（alert、confirm、prompt）操作演示实例
弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...
- 关于隐式创建vue实例实现简化弹出框组件显示步骤
我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...
- Bootstrap历练实例：弹出框(popover)事件
事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...
- Django：popup弹出框简单应用实例
效果:在p1.html页面点击,弹出p2的弹出框,填写数据,在 popup_response页面处理数据 1.url设置 urlpatterns = patterns( url(r'^p1.html' ...
- angularjs 弹出框 $modal
angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报 分类: Angularjs(3) $modal只有一 ...
随机推荐
- 208. Implement Trie (Prefix Tree)
题目: Implement a trie with insert, search, and startsWith methods. 链接: http://leetcode.com/problems/i ...
- SVN使用方法总结
SVN使用方法 SVN版本管理模式:http://www.cnblogs.com/newstar/archive/2011/01/04/svn.html (集中式-trunk和分散式-branch ...
- 【HDOJ】3686 Traffic Real Time Query System
这题做了几个小时,基本思路肯定是求两点路径中的割点数目,思路是tarjan缩点,然后以割点和连通块作为新节点见图.转化为lca求解.结合点——双连通分量与LCA. /* 3686 */ #includ ...
- 解决ImportError: cannot import name HTTPConnection的方法
在写python程序的时候,使用from httplib import HTTPConnection,在run的时候提示ImportError: cannot import name HTTPConn ...
- Hadoop伪分布模式配置部署
.实验环境说明 注意:本实验需要按照上一节单机模式部署后继续进行操作 1. 环境登录 无需密码自动登录,系统用户名 shiyanlou,密码 shiyanlou 2. 环境介绍 本实验环境采用带桌面的 ...
- POJ 3096 Surprising Strings(STL map string set vector)
题目:http://poj.org/problem?id=3096 题意:给定一个字符串S,从中找出所有有两个字符组成的子串,每当组成子串的字符之间隔着n字符时,如果没有相同的子串出现,则输出 &qu ...
- bzoj3572
通过这题我知道了一个鬼故事,trunc(ln(128)/ln(2))=6……以后不敢轻易这么写了 好了言归正传,这题明显的构建虚树,但构建虚树后怎么树形dp呢? 由于虚树上的点不仅是议事会还有可能是议 ...
- BZOJ1758: [Wc2010]重建计划
题解: 这题我居然做了一星期?... 平均值的极值其实也可以算是一种分数规划,只不过分母上b[i]=1 然后我们就可以二分这个值.类似与 HNOI最小圈 如果没有 链的长度的限制的话,我们直接两遍df ...
- 关于 tomcat 集群中 session 共享的三种方法
前两种均需要使用 memcached 或redis 存储 session ,最后一种使用 terracotta 服务器共享. 建议使用 redis,不仅仅因为它可以将缓存的内容持久化,还因为它支持的单 ...
- OpenGL学习之路（五）
1 引子 不知不觉我们已经进入到读书笔记(五)了,我们先对前四次读书笔记做一个总结.前四次读书笔记主要是学习了如何使用OpenGL来绘制几何图形(包括二维几何体和三维几何体),并学习了平移.旋转.缩放 ...