- 浏览: 754115 次
- 性别:
- 来自: 郑州
文章分类
- 全部博客 (396)
- JAVA (50)
- ORACLE (22)
- HIBERNATE (1)
- SPRING (26)
- STRUTS (4)
- OTHERS (0)
- MYSQL (11)
- Struts2 (16)
- JS (33)
- Tomcat (6)
- DWR (1)
- JQuery (26)
- JBoss (0)
- SQL SERVER (0)
- XML (10)
- 生活 (3)
- JSP (11)
- CSS (5)
- word (1)
- MyEclipse (7)
- JSTL (1)
- JEECMS (2)
- Freemarker (8)
- 页面特效 (1)
- EXT (2)
- Web前端 js库 (2)
- JSON http://www.json.org (3)
- 代码收集 (1)
- 电脑常识 (6)
- MD5加密 (0)
- Axis (0)
- Grails (1)
- 浏览器 (1)
- js调试工具 (1)
- WEB前端 (5)
- JDBC (2)
- PowerDesigner (1)
- OperaMasks (1)
- CMS (1)
- Java开源大全 (2)
- 分页 (28)
- Eclipse插件 (1)
- Proxool (1)
- Jad (1)
- Java反编译 (2)
- 报表 (6)
- JSON (14)
- FCKeditor (9)
- SVN (1)
- ACCESS (1)
- 正则表达式 (3)
- 数据库 (1)
- Flex (3)
- pinyin4j (2)
- IBATIS (3)
- probe (1)
- JSP & Servlet (1)
- 飞信 (0)
- AjaxSwing (0)
- AjaxSwing (0)
- Grid相关 (1)
- HTML (5)
- Guice (4)
- Warp framework (1)
- warp-persist (1)
- 服务器推送 (3)
- eclipse (1)
- JForum (5)
- 工具 (1)
- Python (1)
- Ruby (1)
- SVG (3)
- Joda-Time日期时间工具 (1)
- JDK (3)
- Pushlet (2)
- JSP & Servlet & FTP (1)
- FTP (6)
- 时间与效率 (4)
- 二维码 (1)
- 条码/二维码 (1)
最新评论
-
ctrlc:
你这是从web服务器上传到FTP服务器上的吧,能从用户电脑上上 ...
jsp 往 FTP 上传文件问题 -
annybz:
说的好抽象 为什么代码都有两遍。这个感觉没有第一篇 和第二篇 ...
Spring源代码解析(三):Spring JDBC -
annybz:
...
Spring源代码解析(一):IOC容器 -
jie_20:
你确定你有这样配置做过测试? 请不要转载一些自己没有测试的文档 ...
Spring2.0集成iReport报表技术概述 -
asd51731:
大哥,limit传-1时出错啊,怎么修改啊?
mysql limit 使用方法
前些天公司的项目中,为了一些特效,要用到遮罩效果。了解了一下,据说jqModal这个插件不错,于是花了一些工夫,学习了一下jqModal这个插件,最终在项目中得到了应用。现在就将jqModal这个插件的使用方法总结一下,希望能够帮助到以后的使用者,^-^。
本篇主要说明一下插件使用中几个要注意的地方。首先看看最简单的html代码,以下就是我们要弹出的遮罩层。
<div class="pop_box" id="pop">
</div>
接下来简单的看看jqModal遮罩层的样式:
.pop_box {
background-color:#79A5D1;
display:none;
height:342px !important;
left:50%;
margin-left:-250px;
padding:5px;
position:fixed;
top:150px;
width:500px;
z-index:9999;
}
其中比较重要的为jqModal遮罩层的position和z-index属性。为了保证遮罩层在最上边,建议将z-index值设置大些。
最后看下怎么使用jqModal插件。
jQuery(document).ready(function() {
jQuery("#pop").jqm({
modal: true,
overlay: 40,
onShow: function(h) {
h.w.fadeIn(500);
},
onHide: function(h) {
h.o.remove();
h.w.fadeOut(500)
}
}).jqmAddClose("#close");
jQuery("#show").click(function() {
jQuery("#pop").jqmShow();
});
});
.jqm()初始化遮罩,modal:true时,一直显示遮罩层。overlay为遮罩程度,大家可以自己试试。onShow为遮罩层显示方式,本例中为fadeIn(),onHide为关闭遮罩层。jqmAddClose()添加关闭遮罩层的选择器,可以为ID选择器,也可以为样式选择器。
.jqmShow()为执行遮罩,本例中当点击“显示遮罩层”链接时,显示遮罩。
http://dev.iceburg.net/jquery/jqModal/ 为jqModal官方的示例,更多详细的说明和更多的应用都可以找到。jqModal文件小, 速度快, 可定制性非常好,推荐大家使用。
发表评论
-
jquery.corner插件的图片角处理
2012-03-08 15:48 1061http://www.malsup.com/jquery/co ... -
jQuery删除元素remove
2012-01-06 14:55 0写道 在DOM操作页面时,删除元素的方法jquery提供了两 ... -
解决jQuery中dbclick事件触发两次click事件
2012-01-06 14:09 0在jQuery事件绑定中,dbclick可以触发两次click ... -
模拟超链接单击事件
2012-01-06 14:06 1308js脚本 function aClick(){ ... -
jQuery-Draggable参数介绍
2012-01-06 11:02 1529默认设置值: $.extend($.ui.draggable ... -
jquery.ui.draggable中文文档
2012-01-06 11:02 2101[原文翻译] JQuery UI Draggable插件用来 ... -
jQuery EasyUI 可拖放(Draggable)用法
2012-01-06 11:01 1799jQuery EasyUI可以方便实现很多功能,这里将会介绍一 ... -
JQuery获得绝对,相对位置的坐标方法
2012-01-06 10:57 879获取页面某一元素的绝对X,Y坐标,可以用offset()方 ... -
jquery的table操作之在指定行后添加新行
2011-12-30 16:02 3069<!DOCTYPE HTML PUBLIC " ... -
Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
2011-11-25 17:58 3240query取得iframe中元素的几种方法 在if ... -
25个超棒的jQuery日历和日期选取插件
2011-06-08 18:23 3201本文介绍25个非常不错的jQuery日历和日期选取插件, ... -
30个最佳 jQuery Lightbox 效果插件
2011-06-08 18:19 2151Lightbox 应该是最流行的图片浏览效果了,常具有功 ... -
60款很酷的 jQuery 幻灯片演示和下载
2011-06-08 18:17 1171jQuery 是一个非常优秀的 JavaScript 框 ... -
10款新鲜出炉的 jQuery 插件
2011-06-08 18:14 1187这篇文章与大家分享的是10款新鲜出炉的基于 jQuery ... -
jquery UI: 推荐8个独特应用的JQuery拖放插件Table Drag plugin
2011-04-28 19:21 1853推荐8个独特应用的JQuery拖放插件 ... -
jquery1.4后 jqDrag 拖动 不可用
2011-04-06 14:28 844复制代码 代码如下: (function($){ $.f ... -
解决flexgrid的属性showToggleBtn为false,时的bug
2011-03-29 17:42 1402采用flexgrid插件时,当属性showToggleBtn为 ... -
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2011-03-12 12:17 1675/* 缺陷,当前在ff3下,用jquery的 ... -
240多个jQuery插件
2011-02-14 09:12 1038网上看到的一些jQuery插件,一共有240个,记录下来, ... -
JQuery 技术以及相关插件网址
2011-02-12 14:08 1049官网: 技术资料: jQue ...
相关推荐
它通过在页面上覆盖一个半透明的遮罩层来实现这一效果,对话框则位于遮罩层之上,确保用户注意力集中在弹窗内容上。 **3. 初始化和配置** 使用jqModal首先需要在HTML中创建一个隐藏的div,作为弹窗的内容容器。...
jqModal - jQuery模式窗口插件 。
jqModal 插件的js和css样式文件;配合博客文章:http://blog.csdn.net/yangkai_hudong/article/details/46051149使用
在本篇文章中,我们将详细探讨如何使用jQuery及其扩展插件jqmodal来实现一个功能完备、样式美观的弹出窗口。首先,要实现这一功能,需要先了解几个关键知识点:jQuery基础、jqmodal插件的工作机制、以及CSS样式的...
jqModal所需要的CSS源码,这是一个非常强大有助的源码,希望大家喜欢。
jqModal的核心是其基于jQuery的设计,这使得它能够无缝地与jQuery库集成,利用jQuery的强大功能来实现复杂的交互效果。它通过简单的API和CSS样式控制,可以轻松地自定义模态窗口的外观和行为。 ### 2. 安装与引入 ...
轻量级的弹出窗口jQuery插件,压缩后仅仅3.65Kb,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……
jquery jqmodal demo 示例 例子 包含了官居网站所能运行例子的源码 本文非原创..压缩包中已注明出处.. 5分共享.望各位理解.. 里边已经带了样式图片..直接运行即可..具体开发自行参照
综上所述,jqModal控件为JavaWeb应用提供了一种优雅的方式来实现弹出框效果,无论是简单的信息提示还是复杂的表单填写,都能轻松应对。通过灵活的配置和与Java后端的交互,可以创建出满足各种需求的弹出框功能。在...
jqmodal是一款轻量级的jQuery模态对话框插件,它创建了一个浮动在网页内容之上的透明层,用于显示弹出内容。jqmodal允许开发者自定义弹出框的样式,同时支持设置弹出框的位置、大小和透明度。此外,它还提供了关闭...
4. `jqModal.js`:jqModal是一个基于jQuery的弹出框插件,用于创建模态对话框,可以实现弹出窗口的效果。 此外,还有两个CSS文件: 1. `jqModal.css`:这是jqModal插件的样式表,定义了弹窗的外观和布局,如边框、...
5. 根据需求实现编辑、添加、删除等操作的事件处理。 **最佳实践:** - 在服务器端处理数据操作以确保安全性。 - 使用 JSON 或 XML 格式传递数据,提高效率和兼容性。 - 优化性能,避免一次性加载大量数据,利用...
在这个实例中,jQuery被用来增强用户界面的交互性,如实现表格的动态加载、右键菜单功能以及jqModal的弹出对话框。 右键事件的添加扩展了Flexigrid的功能,用户可以通过右键点击表格中的行来执行查看、删除或编辑...
- **删除数据**:可以通过点击表格中的“删除”按钮来实现,这通常会触发一个确认对话框,确保用户确实想要删除这条记录。 - **修改数据**:可以直接在表格中双击某一行的数据来编辑它,或者通过弹出一个模态对话框...
1. **导入jqGrid包**:在项目中引入必要的JS和CSS文件,如`jquery.js`、`jquery.jqGrid.js`、`jqModal.js`等,同时加载主题样式。 - 示例代码: ```html ...
Jpolite 框架是基于 jQuery 开发的一个轻量级门户框架,它的设计目标是实现内容、展示和事件的分离,从而使得开发者能够更加便捷地构建和管理门户应用。框架的核心特性在于其灵活的内容模块展示方式,允许将内容以...
在本例中,开发者提到已经使用过jqModal,但感觉不够灵活,因此自行编写了一个jQuery弹出框插件。 首先,我们来看看`aa.html`文件,这很可能是包含HTML结构和jQuery弹出框使用示例的网页。HTML是超文本标记语言,...
jqGrid是一款基于jQuery的开源...<link rel="stylesheet" type="text/css" media="screen" href="/SedSoft/jqGrid/themes/jqModal.css"> <script type="text/javascript" src="/sedsoft/jqGrid/jquery.js"></script> ...
- **jquery.js**:这是 jQuery 库的核心文件,所有的 jqGrid 功能都基于此库实现。 - **jquery.jqGrid.js**:这是 jqGrid 的核心文件,包含了 jqGrid 的主要功能和逻辑。 - **grid.basic.js**:这是一个重要的基础...
jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上动态展示数据并提供丰富的交互功能,如增、删、改、查、分类显示...jqGrid提供了丰富的配置选项,可以根据实际需求进行定制,实现复杂的数据展示和交互效果。