jQuery

jquery 遮罩应用

之前自己也做过一个div遮罩，最近才发现jquery也能轻松实现div的遮罩，这是一个jquery的遮罩插件大家可以在这里看到效果http://nyromodal.nyrodev.com/，该jquery遮罩插件功能强大且有很多效果。

这里写了个简单的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.pack.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript" src="js/jquery.nyroModal-1.5.2.pack.js"></script>
</head>

<body>

<a href="#1" class="nyroModal">DOM Element (hidden div)</a>
<div id="1" style="display: none; width: 600px;">
<iframe src="1.html" align="middle" width="560px;" scrolling="no" frameborder="0"></iframe>
</div>
</body>
</html>

div中是调用另外一个页面的内容。

该插件还有以下特性
•Ajax Call
•Ajax Call with targeting content
•Ajax call can change the modal size
•Single Image
•Images [...]

jQuery实现div拖动

jQuery实现div拖动非常简单，之前也写过一个div拖动的文章 js实现div拖动控制，相比之下用jQuery开发代码量少了很多，功能和扩展也更充实。

jQuery实现div拖动需要用到 jQuery UI中的ui.core.js 和ui.draggable.js 这两个插件，关于jQuery UI是做什么的在这里就不多说了。。。

先来看一个简单的例子吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现div拖动</title>
</head>
<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../js/ui.core.js"></script>
<script type="text/javascript" src="../../js/ui.draggable.js"></script>
<style type="text/css">
#div1 { width: 150px; height: 150px; padding: 0.5em; border:1px; background:#060; }
</style>

<script type="text/javascript">

$(function(){
$("#div1").draggable();
})
</script>
<body>
<div style="width:1000px; height:900px; background:#666;">
<div id="div1">
<table border="1" id="table1">
<tr id="tr1">
[...]

泡菜牛柳

分类文章

最新文章

热门文章

最受欢迎

jquery 遮罩应用

jQuery实现div拖动

Blogroll