jqModal的使用(一)

登录jqModal主页[url]http://dev.iceburg.net/jquery/jqModal/index.php[/url]可以看到全面了解该组件的信息。
我在这里只是简单的说一下初次使用的经历(边用边写),如果出现错误的话,我也会写下来。
先下载js(网站上他们叫plugin),地址是[url]http://dev.iceburg.net/jquery/jqModal/jqModal.js[/url]
再下载css(网站上他们叫styling),地址是[url]http://dev.iceburg.net/jquery/jqModal/jqModal.css[/url]
我新建一个website站点,然后分别建立Js和Css目录,把jqModal.js放到Js目录里,把jqModal.css放到Css中。补充一句,这个组件是基于jQuery开发的,所以你还需要到jQuery的官方网上下载一个jQuery组件,官方地址是http://jquery.com/,组件下载地址是[url]http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js[/url]
把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、预览页面,点击链接“弹出对话框”,就会看到一个灰色的对话框了。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值