自定义jQuery PickList插件 - 用法与实例(1)

这是我自己写的基于jQuery的pickList插件的说明文档,希望能和大家分享。

可以参考我之前一篇日志http://blog.csdn.net/gengv/archive/2010/04/20/5508707.aspx

 

插件以及Demo的下载地址 http://code.google.com/p/jquery-picklist/downloads/list

 

 

主要特点:

  1. 需要jQuery 1.3以上版本支持;
  2. 在选项条目中支持丰富的HTML内容,例如<div>、<img>等;
  3. 可以为子元件定义充分自由的jQuery选择器,以及CSS样式;
  4. 支持CTRL、SHIFT键操作;
  5. 支持多种事件callback回调。

第一个例子:

第一个例子截图

 

使用pickList其实很简单,它本身提供了默认的设置。

 

上图是一个pickList的截图,为了表述清楚,现将上面的列表称为A列表,下面的列表称为P列表。


首先将jQuery和pickList的js文件引入页面:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="http://jquery-picklist.googlecode.com/files/jquery.pickList-0.1.7.pack.js"></script>

 

然后,再在$(function(){})中,声明pickList。两种方法:

 

这两种方法都基于默认设置,即:

  • A列表的默认jQuery选择符为 "#availableList";
  • P列表的默认选择符为 "#pickedList";
  • 列表中的项目的默认 选择符为"li";
  • Add按钮的默认 选择符为"#btnAdd";
  • Remove按钮的默认 选择符为"#btnRemove";
  • 悬停时的CSS样式名称默认为"hoverItem";
  • 选中后的CSS样式名称默认为"selectedItem"。

这些默认选项不用声明,pickList会默认使用;如果你有需求,可以通过pickList()的options参数,自定义这些设置(具体用法稍后介绍)。

 

声明pickList的两种方法,不同之处在于:

第一种方法是在 $("#pickListContainer") 这个对象内部查找对应的列表选择符、按钮选择符等,来构成pickList组件;

第二种方法是在 <body> 下直接查找对应的列表选择符、按钮选择符等,来构成pickList组件。

因此更推荐第一种用法。

 

 

概括一下最简单的用法步骤:

  1. 引入jQuery和pickList的js文件;
  2. 在HTML和CSS中按照默认的选择符和CSS类名,来定义控件名称和CSS类名;
  3. 在javascript中,声明pickList组件。

简单吧~~~

 

第一个例子的完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>GengV's PickList - Demo</title>
       
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js "></script>
        <script type="text/javascript" src="http://jquery-picklist.googlecode.com/files/jquery.pickList-0.1.7.pack.js "></script>
        <script type="text/javascript">
            $(function(){
                $("#sample_1").pickList() ;
            });
        </script>

       
        <style type="text/css">           
            .sampleDiv ul {
                text-decoration: none;
                list-style: none;
                padding: 0;
            }
           
            .hoverItem {
                background: #6CC;
            }
           
            .selectedItem {
                background: #FC3;
            }

           
            #sample_1 ul {
                width: 280px;
                height: 120px;
                overflow: auto;
                border: 1px solid #609;
            }
           
            #sample_1 span {
                margin: 0 10px;
            }               
        </style>
    </head>
   
    <body>     
           <h3>The First Sample</h3>
          
        <div id="sample_1" class="sampleDiv">
            <ul id="availableList">
                <li>
                    <span class="idCol">1</span><span>Dog</span>
                </li>
                <li>
                    <span class="idCol">2</span><span>Cat</span>
                </li>
                <li>
                    <span class="idCol">3</span><span>Mouse</span>
                </li>
                <li>
                    <span class="idCol">4</span><span>Goat</span>
                </li>
                <li>
                    <span class="idCol">5</span><span>Horse</span>
                </li>
                <li>
                    <span class="idCol">6</span><span>Donkey</span>
                </li>
                <li>
                    <span class="idCol">7</span><span>Caw</span>
                </li>
            </ul>
            <input id="btnAdd" type="button" value="+ Add" />
            <input id="btnRemove" type="button" value="- Remove" />
            <ul id="pickedList">
            </ul>     
        </div>
    </body>
</html>

 

pickList插件还有不少自定义选项和API函数,待下一篇继续分享~



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值