JQuery 插件 jqDnr

最新推荐文章于 2022-08-06 17:53:15 发布

wapysun

最新推荐文章于 2022-08-06 17:53:15 发布

阅读量58

点赞数

文章标签： javascript java ViewUI

今天我们来介绍一款非常优秀的jquery插件jqDnR，这款这件的特点是可以实现对div容器的拖拉和改变容器的尺寸。并且需要的代码异常的简洁，还有就是现实上述效果的css代码有一定的要求，我会在demo中把需要的css代码给出。下面我贴出需要的jquery代码：$(function() {$(‘#ex1′).jqResize(‘.jqResize’).jqDrag();});从代码可以看出很简单。需要指出的是这个效果需要的插件支持有四个有些多奥，这个你可以通过demo看出需要的插件。这里就不再指出了！多余的话也就不多说了具体请参考demo


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>

<style>
	.jqHandle {
		background-image: url("images/ui-icons_222222_256x240.png");
		background-position: -64px -224px;
	    height: 16px;
	    width: 16px;
	}
	
	.jqDrag {
		width: 100%;cursor: move;
	}
	
	.jqResize {
		width: 15px;position: absolute;bottom: 0;right: 0;cursor: se-resize;
	}
	
	.jqDnR {
		z-index: 3;position: relative;cursor:move; width: 180px;font-size: 0.77em;
		color: #618d5e;margin: 5px 10px 10px 10px;padding: 8px;background-color: #EEE;border: 1px solid #CCC;overflow:hidden;
	}
	
	.icon{
		
	}
	
</style>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqDnR.js"></script>
<script type="text/javascript" src="js/dimensions.js"></script>

<script type="text/javascript">
	$(function() {
		$('#ex1').jqResize('.jqResize').jqDrag();
	});
	$(function(){
		$("#code h1").click(function(){
			$("p").toggle();
		});
	});
</script>

</head>


<body>

<div id="ex1" class="jqDnR">
	test!!<br>
	test!!<br>
	test!!<br>
	test!!<br>
	test!!<br>
	<div class="jqHandle jqResize"></div>
</div>

</body>
</html>