jquery弹出框插件--jqModal

4 篇文章 0 订阅
2 篇文章 0 订阅

jqModal是jquery弹窗插件,个人觉得jqModal强大方便,在此做记录以备忘。

登录jqModal主页http://dev.iceburg.net/jquery/jqModal/index.php可以看到全面了解该组件的信息。

1、在<head></head>中加入如下js和css

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jqModal.js"></script>
<link type="text/css" href="Css/jqModal.css" rel="Stylesheet" />
<script type="text/javascript">
     $().ready(function() { 
           $('#dialog').jqm(); 
      });
</script>

2、在mqModal.css中修改如下样式

.jqmWindow{
       display: none; //此外要设为display=none,使弹出框最开始隐藏
       position: fixed; 
       top: 17%; 
       left: 50%; 
       margin-left: -300px; 
       width: 600px; 
       background-color: #EEE; 
       color: #333;
       border: 1px solid black;    
       padding: 12px;
}

3、html页面,注意加粗的字体

<a href="#" class="jqModal">view</a>...    //点出view弹出对话框,class=jqModal
<div class="jqmWindow" id="dialog">    //此为弹出框的内容,弹出框的最外层样式为jqmWindow与上述css中的样式名一致且id=dialog与上述<script>中的一致,
    //点击close关闭弹出框,close的样式为jqmClose
   <a href="#" class="jqmClose">Close</a><hr><em>READ ME</em> 
   -->This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.The demonstrations on this page will show off a few 
   possibilites. I recommend walkingthrough each one to get an understanding of jqModal <e    m>before</em> using it.<br /><br />You can view the 
   sourcecode of examples by clicking the Java script, CSS, and HTML tabs.Be sure to checkout the <a href="README">documentation</a> too!<br /><br />
   <em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".Clicking the overlay will have no effect if the "modal" 
   parameter is passed, or if theoverlay is disabled. 
</div>


相关下载地址:

jqModal.js(网站上他们叫plugin),地址是http://dev.iceburg.net/jquery/jqModal/jqModal.js

jqModal.css(网站上他们叫styling),地址是http://dev.iceburg.net/jquery/jqModal/jqModal.css

jquery-1.3.2.min.js,组件下载地址是http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这是一个 JQGrid 插件中的搜索(search dialog)的配置参数说明,具体含义如下: - recreateFilter: 是否重新创建过滤器。 - drag: 是否允许拖拽。 - sField: 搜索字段名称。 - sValue: 搜索值名称。 - sOper: 搜索操作符名称。 - sFilter: 过滤器名称。 - loadDefaults: 是否从 grid 的 postData 中加载默认过滤器(仅适用于多重搜索)。 - beforeShowSearch: 在搜索显示之前触发的事件。 - afterShowSearch: 在搜索显示之后触发的事件。 - onInitializeSearch: 初始化搜索时触发的事件。 - afterRedraw: 重新绘制搜索时触发的事件。 - afterChange: 当搜索条件发生变化时触发的事件。 - sortStrategy: 排序策略。 - closeAfterSearch: 是否在搜索后关闭搜索。 - closeAfterReset: 是否在重置搜索条件后关闭搜索。 - closeOnEscape: 是否允许使用 ESC 键关闭搜索。 - searchOnEnter: 是否在按下回车键时进行搜索。 - multipleSearch: 是否允许多重搜索。 - multipleGroup: 是否允许多重分组。 - top: 搜索距离顶部的距离。 - left: 搜索距离左侧的距离。 - jqModal: 是否使用 jqModal。 - modal: 是否使用 modal。 - resize: 是否允许调整大小。 - width: 搜索的宽度。 - height: 搜索的高度。 - dataheight: 数据区域的高度。 - showQuery: 是否显示搜索查询条件。 - errorcheck: 是否进行错误检查。 - sopt: 搜索操作符选项。 - stringResult: 是否返回字符串结果。 - onClose: 在搜索关闭时触发的事件。 - onSearch: 在搜索时触发的事件。 - onReset: 在重置搜索条件时触发的事件。 - toTop: 是否将搜索置于顶部。 - overlay: 重叠度。 - columns: 搜索中的列。 - tmplNames: 模板名称。 - tmplFilters: 模板过滤器。 - tmplLabel: 模板标签。 - showOnLoad: 是否在加载时显示搜索。 - layer: 层级。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值