`
sealbird
  • 浏览: 584686 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jqModal简介

阅读更多
jqModal简介2009/05/03 13:55JqModal 是jQuery的一个插件,用来在web浏览器中显示自定义通告,对话框和模型窗口。它的灵活和小巧类似于一把瑞士军刀,而且它为通用窗口框架奠定了基础。

特征:

1, 设计友好:使用HTML+CSS布局和设置样式

2, 翻译者/i18n 友好—没有硬编码的字符串

3, 开发者友好—通过调用方法进行扩展,使任何事变为可能

4, 多模型支持

5, 支持拖拽和重定义大小

6, 支持远程加载窗口内容(ajax和iframes)

Current Version: 2009.03.01 +r14
Copyright © 2007-2009 Brice Burgess - released under both the MIT and GPL licenses.

Download the Plugin (jqModal.js - 2.97k) [jQuery >= 1.1.3.1+]
Download the Styling (jqModal.css - 496 bytes)
用法

通常情况下,如果你想在你的网站上添加弹出式对话框、框架、窗口或你拥有的任何可以添加的内容,你必须:

1, 添加dialog placeholder(占位符)到你的网页

dialog placeholder(占位符)通常是隐藏的作为<body>元素子元素的<div>容器。CSS用来设计样式和位置。对话框在触发事件发生时显示(“shown”).它的内容(信息/图片/..)是内嵌在html中的或者通过ajax添加。

2, 初始化对话框

每个对话框通过使用$.jqm()显示时都会调用JqModal 。你可以通过传递参数自定义你的对话框,例如:$('#dialog').jqm({modal: true, trigger: 'a.showDialog'});).

注意:$.jqm()只能被调用一次,在每个对话框使用时。尽管可以重复调用以修改参数。

3, 触发对话框

当触发事件发生时,对话框会自动显示,你也可以通过执行$.jqmShow()方法来显示对话框

常用方法:

   Jqm

   初始化元素以使作为JqModal使用,接受传递的参数

   $('#dialog').jqm();
   $('.dialogs').jqm({ajax:'@href',modal:true});

   JqmShow

   显示jqModal元素

   $('#dialog').jqmShow();
   $('.dialogs').jqmShow();

   jqmHide

   隐藏jqModal元素

$('#dialog').jqmHide();
$('.dialogs').jqmHide();

详细资料察看:http://dev.iceburg.net/jquery/jqModal/

分享到:
评论

相关推荐

    jqModal - jQuery模式窗口插件

    jqModal - jQuery模式窗口插件 。

    jqModal 插件的js文件

    jqModal 插件的js和css样式文件;配合博客文章:http://blog.csdn.net/yangkai_hudong/article/details/46051149使用

    jqModal弹窗插件

    **jqModal弹窗插件详解** jqModal是一款基于jQuery库的弹窗插件,它以其强大的功能和灵活性在前端开发中被广泛使用。这个插件允许开发者轻松地创建模态对话框,为用户提供一种交互式的体验,同时不会离开当前页面。...

    jqModal.css

    jqModal所需要的CSS源码,这是一个非常强大有助的源码,希望大家喜欢。

    前端项目-jqModal.zip

    **jqModal:构建灵活弹出窗口的前端解决方案** 在前端开发中,经常需要实现各种弹出窗口或模态对话框来展示信息、获取用户输入或进行交互操作。jqModal是一款轻量级的JavaScript插件,专门用于创建这些功能。这款...

    一个可以取代jqmodal的弹出框插件

    轻量级的弹出窗口jQuery插件,压缩后仅仅3.65Kb,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……

    jquery jqmodal demo 示例 例子 使用

    jquery jqmodal demo 示例 例子 包含了官居网站所能运行例子的源码 本文非原创..压缩包中已注明出处.. 5分共享.望各位理解.. 里边已经带了样式图片..直接运行即可..具体开发自行参照

    jQuery+jqmodal弹出窗口实现代码分明

    在本篇文章中,我们将详细探讨如何使用jQuery及其扩展插件jqmodal来实现一个功能完备、样式美观的弹出窗口。首先,要实现这一功能,需要先了解几个关键知识点:jQuery基础、jqmodal插件的工作机制、以及CSS样式的...

    java弹出框效果

    本话题聚焦于利用jqModal控件在Java相关的Web应用中创建弹出框。 jqModal是一款轻量级的JavaScript插件,它允许开发者在网页上创建弹出窗口,通常用于展示对话框、确认消息或表单等。这款控件以其灵活性和易用性...

    jqGrid 简体中文包 for v3.6+

    这通常意味着该压缩包可能还包含了 jqModal 和 jqDnR 这两个额外的 jQuery 插件。 - **jqModal**:是一个轻量级的模态对话框插件,它可以将任何 HTML 元素转化为模态对话框,用于提示、警告或显示详细信息。在 ...

    一些网站模板以及jqeury弹窗

    4. `jqModal.js`:jqModal是一个基于jQuery的弹出框插件,用于创建模态对话框,可以实现弹出窗口的效果。 此外,还有两个CSS文件: 1. `jqModal.css`:这是jqModal插件的样式表,定义了弹窗的外观和布局,如边框、...

    jQuery 弹出窗口 模式窗口 模式层

    jqmodal是一款轻量级的jQuery模态对话框插件,它创建了一个浮动在网页内容之上的透明层,用于显示弹出内容。jqmodal允许开发者自定义弹出框的样式,同时支持设置弹出框的位置、大小和透明度。此外,它还提供了关闭...

    Javascript技巧之不要用for in语句对数组进行遍历

    一,为什么不要用for in语句 jqModal这个jquery插件估计很多人都使用过,在jqModal源码内部,有一个函数为hs,其中有个嵌套循环如下, 代码如下: for(var i in {jqmShow:1,jqmHide:1}) for(var s in this[i]) if(H...

    jqGrid中文说明,对jQgrid表格关键使用方法中文说明

    jqGrid中文说明,对jQgrid表格...&lt;link rel="stylesheet" type="text/css" media="screen" href="/SedSoft/jqGrid/themes/jqModal.css"&gt; &lt;script type="text/javascript" src="/sedsoft/jqGrid/jquery.js"&gt;&lt;/script&gt; ...

    强大的jQuery

    1. **导入jqGrid包**:在项目中引入必要的JS和CSS文件,如`jquery.js`、`jquery.jqGrid.js`、`jqModal.js`等,同时加载主题样式。 - 示例代码: ```html ...

    flexigrid+struts2+json+jquery实例

    在这个实例中,jQuery被用来增强用户界面的交互性,如实现表格的动态加载、右键菜单功能以及jqModal的弹出对话框。 右键事件的添加扩展了Flexigrid的功能,用户可以通过右键点击表格中的行来执行查看、删除或编辑...

    jqGrid使用帮助

    #### 一、jqGrid简介与组件说明 **jqGrid** 是一个高级、响应式且高度可定制的 jQuery 插件,它能够帮助开发者快速地创建复杂的数据表格界面。jqGrid 支持多种数据源格式(如 JSON、XML),并且提供了丰富的功能,...

    JQuery的插件

    ### JQuery的插件jqGrid详解 ...&lt;link rel="stylesheet" type="text/css" media="screen" href="/SedSoft/jqGrid/themes/jqModal.css"&gt; &lt;script type="text/javascript" src="/sedsoft/jqGrid/jquery.js"&gt;&lt;/script&gt; ...

    JQuery插件jqGrid常用属性说明.pdf

    jqGrid是一款基于jQuery的开源...&lt;link rel="stylesheet" type="text/css" media="screen" href="/SedSoft/jqGrid/themes/jqModal.css"&gt; &lt;script type="text/javascript" src="/sedsoft/jqGrid/jquery.js"&gt;&lt;/script&gt; ...

    jquery jqGrid 4 7 1 zip下载 css js plugins src

    | jqModal js | jquery fmatter js | jquery jqGrid js | JsonXml js"&gt;css | ellipsis xbl xml | ui jqgrid css js | i18n | grid locale en js | grid locale cn js | grid locale js | Changes txt | install txt ...

Global site tag (gtag.js) - Google Analytics