jqModal的使用（一） -

lihaiming

浏览: 508622 次
性别:
来自: 上海

最近访客更多访客>>

zjut_wyj

jklwan

xlg123

409197623

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jqModal的使用（一）

jquery jqmodal

登录jqModal主页http://dev.iceburg.net/jquery/jqModal/index.php可以看到全面了解该组件的信息。
我在这里只是简单的说一下初次使用的经历（边用边写），如果出现错误的话，我也会写下来。
先下载js（网站上他们叫plugin），地址是http://dev.iceburg.net/jquery/jqModal/jqModal.js
再下载css（网站上他们叫styling），地址是http://dev.iceburg.net/jquery/jqModal/jqModal.css
我新建一个website站点，然后分别建立Js和Css目录，把jqModal.js放到Js目录里，把jqModal.css放到Css中。补充一句，这个组件是基于jQuery开发的，所以你还需要到jQuery的官方网上下载一个jQuery组件，官方地址是http://jquery.com/，组件下载地址是http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
把jquery-1.3.2.min.js也放到Js目录中。
这样基本东西就已经准备好了，现在我们来试一个alert功能：
1、在<head></head>中间加入:
<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" />
2、在<head></head>部分再写一个Js调用功能：
<script type="text/javascript">
        $().ready(function() {
            $('#dialog').jqm();
        });
</script>
3、现在来写body中的内容：
<a href="#" class="jqModal">弹出对话框</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.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, 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 the
overlay is disabled.
</div>

4、预览页面，点击链接“弹出对话框”，就会看到一个灰色的对话框了。

分享到：