JQuery插件jqModal应用详解（十二）

JqModal 是jQuery的一个插件，用来在web浏览器中显示自定义通告，而且它为通用窗口框架奠定了基础。

1. 多模型支持

2. 支持拖拽和重定义大小

3，支持远程加载窗口内容（ajax和iframes）

下载：

http://dev.iceburg.net/jquery/jqModal/#examples

使用的方法：

step1:添加js与css
<link href="css/jqModal.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jqModal.js" type="text/javascript"></script>
<script src="scripts/jqDnR.js" type="text/javascript"></script>

Step2:前台HTML
<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">
<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 walking
through each one to get an understanding of jqModal <em>before</em> using it.
</div>

前台JS
<script type="text/javascript">
    $().ready(function() {
        $('#dialog').jqm();
    });
</script>

效果：

前台HTML:
<a href="#" class="ex3bTrigger">view</a> (alert)
...
<div class="jqmAlert" id="ex3b">

<div id="ex3b" class="jqmAlertWindow">
<div class="jqmAlertTitle clearfix">
<h1>Did you know?</h1><a href="#" class="jqmClose"><em>Close</em></a>
</div>

<div class="jqmAlertContent">
<p>Please wait... <img src="inc/busy.gif" alt="loading" /></p>
</div>
</div>

</div>

前台JS
$().ready(function() {
var triggers = $('a.ex3bTrigger')[0];
      $('#ex3b').jqm({
            trigger: triggers,
            ajax: 'html/2.htm',
            target: 'div.jqmAlertContent',
            overlay: 0
        });
        // Close Button Highlighting. IE doesn't support :hover. Surprise?
        if ($.browser.msie) {
            $('div.jqmAlert .jqmClose')
.hover(
    function() { $(this).addClass('jqmCloseHover'); },
    function() { $(this).removeClass('jqmCloseHover'); });
        }
    });

效果：

前台HTML
<body>
<a href="#" id="ex3aTrigger">view</a> (dialog)
...
<div id="ex3a" class="jqmDialog">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">Dialog Title</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">
<div class="jqmdMSG">
Styled windows or dialogs are easy!
<br /><br />
This particular theme was done for <a href="http://www.pommo.org">poMMo</a> --
</div>
</div></div></div>
<input type="image" src="dialog/close.gif" class="jqmdX jqmClose" />
</div>
</body>

前台JS
<script type="text/javascript">
    $(document).ready(function() {
        $('#ex3a').jqm({
            trigger: '#ex3aTrigger',
            overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
            overlayClass: 'whiteOverlay'
        })
    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
$('input.jqmdX')
.hover(
    function() { $(this).addClass('jqmdXFocus'); },
    function() { $(this).removeClass('jqmdXFocus'); })
.focus(
    function() { this.hideFocus = true; $(this).addClass('jqmdXFocus'); })
.blur(
    function() { $(this).removeClass('jqmdXFocus'); });
    });
</script>

效果：

前台HTML
<body>
<a href="#" id="ex3cTrigger">view</a> (notice)
...
<div style="position: absolute; margin: 10px 0 0 100px;">
<div id="ex3c" class="jqmNotice">
    <div class="jqmnTitle jqDrag">
      <h1>Did you know?</h1>
    </div>
<div class="jqmnContent">
<p>Pine, spruce, or other evergreen wood should never be used in barbecues. These woods,    </p>
</div>
<img src="css/notice/close_icon.png" alt="close" class="jqmClose" />
<img src="css/notice/resize.gif" alt="resize" class="jqResize" />
</div>
</div>
</body>

前台JS
$().ready(function() {
        $('#ex3c')
    .jqDrag('.jqDrag')
    .jqResize('.jqResize')
    .jqm({
        trigger: '#ex3cTrigger',
        overlay: 0,
        onShow: function(h) {
            /* callback executed when a trigger click. Show notice */
            h.w.css('opacity', 0.92).slideDown();
        },
        onHide: function(h) {
            /* callback executed on window hide. Hide notice, overlay. */
            h.w.slideUp("slow", function() { if (h.o) h.o.remove(); });
        }
    });
    });

效果：

前台HTML
<body>
<a href="#" class="ex2trigger">View</a>
...
<div class="jqmWindow" id="ex2">

Please wait... <img src="inc/busy.gif" alt="loading" />
</div>
</body>

前台JS
<script type="text/javascript">
    $(document).ready(function() {
        $('#ex2').jqm({ ajax: 'html/1.htm', trigger: 'a.ex2trigger' });
    });
</script>

效果：

前台HTML
<body>
<a href="#" class="alert">view</a> (alert)
<a href="#" class="confirm">view</a> (confirm)
...

<div class="jqmAlert" id="alert">
<div id="ex3b" class="jqmAlertWindow">
<div class="jqmAlertTitle clearfix">
<h1>Warning!</h1><a href="#" class="jqmClose"><em>Close</em></a>
</div>
<div class="jqmAlertContent"></div>
</div>
</div>

<div class="jqmConfirm" id="confirm">
<div id="ex3b" class="jqmConfirmWindow">
<div class="jqmConfirmTitle clearfix">
<h1>Confirmation por favor...</h1><a href="#" class="jqmClose"><em>Close</em></a>
</div>
<div class="jqmConfirmContent">
<p class="jqmConfirmMsg"></p>
<p>Continue?</p>
</div>
<input type="submit" value="no" />
<input type="submit" value="yes" />
</p>
</div>
</div>
</body>

效果：

posted @ 2016-09-21 22:16 石shi 阅读(5952) 评论(0) 编辑收藏举报

刷新页面返回顶部

石

JQuery插件jqModal应用详解（十二）

公告