jQuery选择器MultiSelect插件

效果图:

Multiple-Selects

jquery.FanFanMultiselects.js文件代码:
function selectedleft(){
$(“div .leftBox option”).each(function (){
$(this).attr(“selected”,”selected”);
});
}
jQuery.fn.FanFanMultiSelect = function() {
function add(){
$($(this).parent().parent().children(“.leftBox”)).append($(this));
}
function del(){
$($(this).parent().parent().children(“.rightBox”)).append($(this));
}
$(document).ready(function(){
$(“div .leftBox option”).live(“dblclick”,del);
$(“div .rightBox option”).live(“dblclick”,add);
});
};
HTML代码如下:
<form method=”post” action=”"  onsubmit=”selectedleft();”>
<div>
<select name=”arrayname[]” multiple=”multiple” selectall=”selectall” style=”width:350px;height:250px;”>
<option value=”1″>111</option>
<option value=”2″>222</option>
<option value=”3″>333</option>
</select>
<select multiple=”multiple”  class=”rightBox” style=”width:400px;height:250px;”>
<option value=”4″>444</option>
<option value=”5″>555</option>
<option value=”6″>666</option>
</select>
</div>
</form>

JQuery宽度自适应插件

说明:
把指定元素(图片)的大小按比例缩小到默认大小。

插件源代码:
01 (function($){
02 /**
03 * 重设盒子大小,如果盒子的长或宽大于某个值,则按比例缩小到指定值
04 * @author:liufangfang.net
05 */
06 $.fn.resetSize=function(new_height,new_width){
07 var width = $(this).width();
08 var height = $(this).height();
09 if(width>new_width || height>new_height){
10 if(width/height>new_width/new_height){
11 $(this).width(new_width);
12 $(this).height(new_height*height/width);
13 }else{
14 $(this).height(new_height);
15 $(this).width(new_height*height/width);
16 }
17 }
18 }
19 })(jQuery);
使用方法,看HTML
01 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
02 <html xmlns=“http://www.w3.org/1999/xhtml”>
03 <head>
04 <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
05 <title>JQuery重设元素大小插件DEMO</title>
06 <meta name=“keywords” content=“JQuery重设元素大小插件DEMO” />
07 <meta name=“description” content=“JQuery重设元素大小插件DEMO” />
08 <meta name=“robots” content=“index,follow,all” />
09 <meta name=“author” content=“liufangfang.net”/>
10 <meta name=“Copyright” content=“liufangfang.net”/>
11 <script language=“javascript” type=“text/javascript” src=“../jslib.js”></script>
12 <script language=“javascript” type=“text/javascript” src=“jquery.resetSize.js”></script>
13 <script type=“text/javascript”>
14 $(document).ready(function() {
15 $(“#img_box”).resetSize(700,700);
16 });
17 </script>
18 </head>
19 <body>
20 <img id=“img_box” src=“testimg.jpg” style=“width:auto;”/>
21 </body>
22 </html>

在IE和FF下是没有问题,chrome下有一点问题,似乎chrome对width()这样的方法不感冒,囧~!