jQuery遮罩插件jQuery.blockUI.js简介
利用Jquery.blockui.js创建可拖动、自定义内容的弹出层
目标 :
1 . 弹出层的内容可以自定义任意的HTML元素 , 不仅仅只显示一行文本。
2 . 弹出层可以拖动 , 这样不会遮挡后面的内容。
效果见下图 :
需要文件 :
Jquery.js 1.6 以上版本
Jquery.blockUI.js 官网下载
支持拖动的四个JqueryUI文件 :
jquery.ui.core.js ,jquery.ui.widget.js , jquery.ui.mouse.js , jquery.ui.draggable.js
实现步骤 :
1 . 将以上六个 js文件按如下顺序引入到页面中 :
- Jquery.js
- jquery.ui.core.js
- jquery.ui.widget.js
- jquery.ui.mouse.js
- jquery.ui.draggable.js
- Jquery.blockUI.js
2 . 在页面增加一个按钮 , 及这个按钮对应的js脚本
按钮:
<input type="button" onclick="show();" value="block" />
脚本:
<script type="text/javascript">
function show() {
//这里就是要弹出层的内容, 至于是文本还是HTML控件还是神马随便定义
var html = "<div style='background-color:#FBA164; height:30px;'>ssssss</div>" +
"<div style='background-color:#ffffff; padding:20px 30px 30px 30px;'>"+
"asdlke <br /> jpertp348af<br />asdlke <br /> jpertp348af<br />asdlke "+
"<br /> jpertp348af<br />asdlke <br /> jpertp348af<br /> <br /></div>";
//下面这三行照抄就可以了。注意页面中不要有id=dialog的元素,以免重名出现bug
$("body").append("<div id='dialog'></div>");
$("#dialog").html(html);
$.blockUI({ message: $("#dialog") });
}
</script>
3 . 至此已经实现弹出层可以加入任何内容了,接下来修改Jquery.blockUI.js文件以便支持拖放
找到 “lyr3 = $(s);” 这一行代码 , 在这行代码下一行加入 “lyr3.draggable();”
4 . 好了 , 接下来运行页面 , 点击一下“block”按钮 , 弹出 , 拖动 。。 。
http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/
http://www.360doc.com/content/13/0301/10/9200790_268593329.shtml
jQuery遮罩插件jQuery.blockUI.js简介的更多相关文章
- jQuery遮罩插件 jquery.blockUI.js
Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...
- jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- Jquery遮罩插件,想罩哪就罩哪!
一 前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能如下 1 可以全屏遮 用于提交数据时 2 ...
- JQuery多媒体插件jQuery Media Plugin使用详解
malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...
- jQuery国际化插件 jQuery.i18n.properties 【轻量级】
jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...
- jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
上一篇记录了BaiduTemplate模板引擎使用示例附源码,在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { ...
- jquery评分插件jquery.raty.js
1.参考链接 官方地址. 教程一 教程二 2.案例1 引入文件: <!-- 评分插件 --> <script type="text/javascript" src ...
随机推荐
- JAVA编译异常处理:java.lang.OutOfMemoryError: PermGen space
在Intellij开发工具中编译JAVA项目,出现以下错误: 六月 21, 2016 6:28:07 下午 org.apache.tomcat.util.modeler.BaseModelMBean ...
- (转)javaScript插件开发
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- Java 虚拟机体系结构
众所周知,Java源代码被编译器编译成class文件.而并不是底层操作系统可以直接执行的二进制指令(比如Windows OS的.exe文件).因此,我们需要有一种平台可以解释class文件并运行它.而 ...
- CentOS 7快速搭建Nodejs开发环境
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好.学习Nodejs首先需要会安装环境.这里我介绍如 ...
- python中写shell(转)
python中写shell,亲测可用,转自stackoverflow To run a bash script, copy from stackoverflow def run_script(scri ...
- HDU 4629 Burning 几何 + 扫描线
总体思路参考了 这里. 细节:1.控制精度,虽然这题没卡精度,不过还是要控制一下. 之前 bool operator<( const Point& A, const Point& ...
- 用root直接登入ubuntu 14_04
官网下载地址:http://www.ubuntu.com/download/desktop64位桌面版:http://www.ubuntu.com/ubuntu-releases/14.04/ubun ...
- python实现简单kNN
注释写得很清楚了,熟悉了一下python的一些基本语法和numpy中的一些操作. from numpy import * import operator def createDataSet(): # ...
- 1430. Crime and Punishment(枚举)
1430 即使是枚举 也是有一定技术含量的 对于ax+by = n: 枚举max(a,b)中的系数 这样可以确定另一个 但问题是如何确定上限 假设max(a,b) = a,很显然是不会超n/a的 但这 ...
- 在DirectX 中进行2D渲染
http://flcstudio.blog.163.com/blog/static/756035392008115111123672/ 最近,我看到很多关于DirectX8在最新的API中摒弃Dire ...