JQuery 插件 jqDnr
阳勇
今天我们来介绍一款非常优秀的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>
类似资料：