JQuery 插件 jqDnr

来源:互联网 发布:什么叫贵州大数据 编辑:程序博客网 时间:2024/05/19 02:27

今天我们来介绍一款非常优秀的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>