jQuery惯用插件介绍/收集

2012-11-12

jQuery常用插件介绍/收集??? JQuery 最好的地方在于其方便的插件机制了，而且网上有很多人在贡献有用的插件

jQuery常用插件介绍/收集

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

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

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

??? 效果如图：

jQuery惯用插件介绍/收集
?

????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(右键菜单)：使用简单方便，样式也可定制，但目前不支持多级菜单。

??? 效果如图：

?
jQuery惯用插件介绍/收集
?

?? 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 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请下载啊。。。。。?

热点排行

Bad Request.

Web前端

jQuery惯用插件介绍/收集