jQuery惯用插件介绍/收集 _Web前端

jQuery常用插件介绍/收集

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

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

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

??? 效果如图：

????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">
            &nbsp;Title
        </div>
        <div style="width:100%">
            
        </div>
    </div>

??? js代码：

	<script type="text/javascript" src="webapps/zsysp/js/jquery-1.6.2.min.js" ></script>
	<script type="text/javascript" src="webapps/zsysp/js/jquery.easydrag.handler.beta2.js" ></script>
	<script type="text/javascript">
		
	      $(document).ready( function(){
	               $("#divPanel").easydrag();
	    });
		
	
	</script>

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

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

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

? 参考路径：http://www.jzxue.com/wangzhankaifa/javascript-ajax/200905/13-2102.html

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

??? 效果如图：

?

?

?? 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代码：

		<link rel="stylesheet" href="css/page_style.css" type="text/css"></link>
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.contextmenu.r2.js"></script>
		<script type="text/javascript">
	
		
		$(document).ready(function(){
		      $('span.demo1').contextMenu('myMenu1', {
			        bindings: { 
			          'open': function(t) { 
			            alert('Trigger was '+t.id+'\nAction was Open'); 
			          }, 
			          'email': function(t) { 
			            alert('Trigger was '+t.id+'\nAction was Email'); 
			          }, 
			          'save': function(t) { 
			            alert('Trigger was '+t.id+'\nAction was Save'); 
			          }, 
			          'delete': function(t) { 
			            alert('Trigger was '+t.id+'\nAction was Delete'); 
			          } 
			        }
		       });
      });
		
	</script>

更多内容请参考路径

?? 参考路径：http://www.trendskitchens.co.nz/jquery/contextmenu/

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