jqDnR-jquery拖拉+重置尺寸插件

发布于，归属于jquery插件。 沙发还空着，抢！ 共有429人围观    

jqDnR

这个插件只支持拖拉，并不支持放。但是这个插件还有个拖拉容器尺寸的功能。由于官网上有完备的使用说明。这里只提供js文件下载。

这里重点看下官网的第三个例子

建立如下html结构：

  1. <div id="ex3" class="jqDnR">
  2.   <div class="jqHandle jqDrag"></div>
  3.   <br />
  4.   I am an example Box "#ex3"<br />
  5.   Using the Handles, you can *RESIZE*
  6.   and *DRAG* me.
  7.   <div class="jqHandle jqResize"></div>
  8. </div>

建立如下css：

  1. .jqHandle {
  2.    background: red;
  3.    height:15px;
  4. }
  5.  
  6. .jqDrag {
  7.   width: 100%;
  8.   cursor: move;
  9. }
  10.  
  11. .jqResize {
  12.    width: 15px;
  13.    position: absolute;
  14.    bottom: 0;
  15.    right: 0;
  16.    cursor: se-resize;
  17. }
  18.  
  19. .jqDnR {
  20.     z-index: 3;
  21.     position: relative;
  22.    
  23.     width: 180px;
  24.     font-size: 0.77em;
  25.     color: #618d5e;
  26.     margin: 5px 10px 10px 10px;
  27.     padding: 8px;
  28.     background-color: #EEE;
  29.     border: 1px solid #CCC;
  30. }

不得不提一下。这个插件的样式实在过于简化。想要用于实际开发，改变样式是必不可少的。

初始化插件：

  1. $().ready(function() {
  2.   $('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
  3. });
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类