jQuery常用插件介绍/收集

缺乏、安全感 2022-04-15 00:07 251阅读 0赞

JQuery 最好的地方在于其方便的插件机制了，而且网上有很多人在贡献有用的插件，现在开始，我将慢慢的手机一些有用的插件。

JQuery 乃居家旅行必备之插件啦。。O(∩\_∩)O哈哈~

一、  **Jquery插件EasyDrag：**一行代码轻松实现拖动效果.

效果如图：

![8a1e0eb6-68f0-3ad6-b856-b63bcdea5eb0.jpg][]

HTML代码：

<div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" >
            <div id="divTitle" style="width:100%;height:25px;background:lavender">
                 Title
            </div>
            <div style="width:100%">
                
            </div>
        </div>

js代码：

EasyDrag还可以指定可拖动的区域，比如只能通过标题拖动整个div，我们JS可以这样写：

$(document).ready( function(){
    	                $("#divPanel").easydrag();
                                   $("#divPanel").setHandler("divTitle");
    	    });

一个setHandler搞定,不错开源是个好东西，Jquery更是好东西，插件扩展机制不是一般的好。

参考路径：[http://www.jzxue.com/wangzhankaifa/javascript-ajax/200905/13-2102.html][http_www.jzxue.com_wangzhankaifa_javascript-ajax_200905_13-2102.html]

二、  **contextmenu(右键菜单)：**使用简单方便，样式也可定制，但目前不支持多级菜单。

效果如图：

![48a0d80b-4ee5-3148-9244-7b01e372bde9.jpg][]

HTML代码

<SPAN class=demo1 id=quickDemostyle="BORDER-RIGHT: #888 1px solid; BORDER-TOP: #888 1px solid; FLOAT: right; BORDER-LEFT: #888 1px solid; BORDER-BOTTOM: #888 1px solid"><B>DEMO</B>right-click me!! </SPAN>
    		<div class="contextMenu" id="myMenu1">
    			<ul>
    				<li id="open">
    					<img src="img/folder.png" />
    					Open
    				</li>
    				<li id="email">
    					<img src="img/email.png" />
    					Email
    				</li>
    				<li id="save">
    					<img src="img/disk.png" />
    					Save
    				</li>
    				<li id="close">
    					<img src="img/cross.png" />
    					Close
    				</li>
    			</ul>
    		</div>

JS代码：

更多内容请参考路径

参考路径：[http://www.trendskitchens.co.nz/jquery/contextmenu/][http_www.trendskitchens.co.nz_jquery_contextmenu]

附件中已经上传了demo.....关于插件JS请下载啊。。。。。

[8a1e0eb6-68f0-3ad6-b856-b63bcdea5eb0.jpg]: /images/20220415/8b5723f13e6d49b7a929f1ee410217ca.png
[http_www.jzxue.com_wangzhankaifa_javascript-ajax_200905_13-2102.html]: http://www.jzxue.com/wangzhankaifa/javascript-ajax/200905/13-2102.html
[48a0d80b-4ee5-3148-9244-7b01e372bde9.jpg]: /images/20220415/2893b7ec4d0540d28e09fcf458875a0c.png
[http_www.trendskitchens.co.nz_jquery_contextmenu]: http://www.trendskitchens.co.nz/jquery/contextmenu/