T27jQuery插件jqModal应用详解（北风网收费视频PPT）.ppt

目录 jQuery jqModal插件简介 jQuery jqModal插件使用 jqModal是什么？ JqModal 是jQuery的一个插件，用来在web浏览器中显示自定义通告，对话框和模型窗口。它的灵活和小巧类似于一把瑞士军刀，而且它为通用窗口框架奠定了基础。 特征： 1， 设计友好：使用HTML+CSS布局和设置样式 2， 翻译者/i18n 友好—没有硬编码的字符串 3， 开发者友好—通过调用方法进行扩展，使任何事变为可能 4， 多模型支持 5， 支持拖拽和重定义大小 6， 支持远程加载窗口内容（ajax和iframes） /jquery/jqModal/#examples jQuery jqModal插件使用1-Default 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 jQuery jqModal插件使用1 Step2:前台HTML a href=# class=jqModalview/a ... div class=jqmWindow id=dialog a href=# class=jqmCloseClose/a hr emREAD 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 embefore/em using it. /div jQuery jqModal插件使用1 前台JS script type=text/javascript $().ready(function() { $(#dialog).jqm(); }); /script 效果1 jQuery jqModal插件使用2 前台HTML: a href=# class=ex3bTriggerview/a (alert) ... div class=jqmAlert id=ex3b div id=ex3b class=jqmAlertWindow div class=jqmAlertTitle clearfix h1Did you know?/h1a href=# class=jqmCloseemClose/em/a /div div class=jqmAlertContent pPlease wait... img src=inc/busy.gif alt=loading //p /div /div /div jQuery jqModal插件使用2-Alert 前台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 doesnt support :hover. Surprise? if ($.browser.msie) { $(div.jqmAlert .jqmClose) .hover( function() { $(this).addClass(jqmCloseHover); }, function() { $(this).removeClass(jqmCloseHover); }); } }); 效果2 jQuery jqModal插