前几天做的考试系统的一些后台弹出框的一些模板。主要是因为普通的弹出框样式不是很好，颜色也不能调换。这里我们用的是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);
 
和上面的函数类似，只是表现的形式不同，它以文字框的形式出现
.
一般用在最后的结果提示上。

实例


  1. function demo1() {
  2.  
  3.     $.jBox.tip('Hello jBox');
  4.  
  5. }

 提示框如下

下面就做个测试吧

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


 


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

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

  1. <linkhref="jBox/Skins/Green/jbox.css" rel="stylesheet"type="text/css" />//我这里使用的是绿色的皮肤，jbox的皮肤有多种样式，可以自己选择。
  2.  
  3.   <script type="text/javascript"src="jBox/jquery-1.4.2.min.js"></script>
  4.   <script type="text/javascript"src="jBox/jquery.jBox-2.3.min.js"></script>
  5.   <script type="text/javascript"src="jBox/i18n/jquery.jBox-zh-CN.js"></script>
  6.

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

  1. <script type="text/javascript">{
  1. function demo2() {
  2. var submit = function (v, h, f) {
  3. if (v == true)
  4. jBox.tip("恩", 'info');
  5. else
  6. jBox.tip("好吖", 'info');
  7. return true;
  8. };
  9. // 自定义按钮
  10. $.jBox.confirm("天使，做我女朋友吧？", "表白提示", submit, { buttons: { '恩': true, '好吖': false} });
  11. }}

Html页面的代码

  1. <body>
  2. <div>
  3.   <form id="form1" name="form1" method="post" action="">
  4.     <input type="button" name="button" id="button" value="按钮"   onclick="demo2()"/>
  5.   </form>
  6.  
  7.   </div>
  8.  
  9. </body>

调用的结果如下

点击好吖给予提示。

  1. function demo3() {
  2. var submit = function (v, h, f) {
  3. if (v == 'yes') {
  4. $.jBox.tip('已保存。', 'success');
  5. }
  6. if (v == 'no') {
  7. $.jBox.tip('没保存。');
  8. }
  9. if (v == 'cancel') {
  10. $.jBox.tip('已取消。');
  11. }
  12. return true;
  13. };
  14. // 可根据需求仿上例子定义按钮
  15. $.jBox.warning("内容已修改，是否保存？", "提示", submit);
  16. }

提示框如下

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

弹出框JBox实例的更多相关文章

  1. 弹出框优化实例（alert和confirm）

    在项目过程中会遇到需要使用自己定义的弹出框的情况.以前用过ymprompt,但是它太复杂而且不好自己操控.所以自己写了一个弹出框实例. 主要有两类弹出框alert和confirm.基于jQuery a ...

  2. bootstrap-js(六)弹出框

    实例 为任意元素添加一小块浮层,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须 ...

  3. bootstrap弹出框

    要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...

  4. Bootstrap-Plugin：弹出框（Popover）插件

    ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...

  5. Selenium2学习-040-JavaScript弹出框（alert、confirm、prompt）操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

  6. 关于隐式创建vue实例实现简化弹出框组件显示步骤

    我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...

  7. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  8. Django：popup弹出框简单应用实例

    效果:在p1.html页面点击,弹出p2的弹出框,填写数据,在 popup_response页面处理数据 1.url设置 urlpatterns = patterns( url(r'^p1.html' ...

  9. angularjs 弹出框 $modal

    angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报  分类: Angularjs(3)  $modal只有一 ...

随机推荐

  1. Java经典书籍

    Java Web开发教程---孙霞JSP应用开发详解(第三版)---刘晓华.张健.周慧贞Spring in Action---Craig Walls精通Struts基于MVC的Java Web设计与开 ...

  2. POJ3660——Cow Contest(Floyd+传递闭包)

    Cow Contest DescriptionN (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a prog ...

  3. Winform 数据验证

    http://blog.scosby.com/post/2010/02/11/Validation-in-Windows-Forms.aspx 总结:1. CancelEventArgs e ,调用e ...

  4. Java API ——Character类

    1.Character类的概述 · Character 类在对象中包装一个基本类型 char 的值 · 此外,该类提供了几种方法,以确定字符的类别(小写字母,数字,等等),并将字符从大写转换成小写,反 ...

  5. P117、面试题18：树的子结构

    题目:输入两棵二叉树A和B,判断B是不是A的子结构.二叉树结点的定义如下:struct BinaryTreeNode{       int  m_nValue;       BinaryTreeNod ...

  6. GCC警告选项例解

    程序员是追求完美的一族,即使是一般的程序员大多也都不想看到自己的程序中有甚至那么一点点的瑕疵.遇到任意一条编译器警告都坚决不放过.有人会说:我们可以使用比编译器更加严格的静态代码检查工具,如splin ...

  7. linux的终端，网络虚拟终端，伪终端(转)

      blog.csdn.net/todd911/article/details/8025540 Linux上许多网络服务应用,如l2tp.pptp.telnet,都用到了伪终端.有朋友在问这方面的概念 ...

  8. Ubuntu 12.04上编译Vim7.4的时候遇到“no terminal library found”问题

    错误如下: no terminal library foundchecking for tgetent()... configure: error: NOT FOUND!      You need ...

  9. (转)详解LVS负载均衡之三种工作模型原理和10种调度算法

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://linuxnx.blog.51cto.com/6676498/1195379 LV ...

  10. Java盲点：双重检查锁定及单例模式

    尊重原创: http://gstarwd.iteye.com/blog/692937 2004 年 5 月 01 日 所有的编程语言都有一些共用的习语.了解和使用一些习语很有用,程序员们花费宝贵的时间 ...