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

最新推荐文章于 2024-10-14 12:55:06 发布

gengv

最新推荐文章于 2024-10-14 12:55:06 发布

阅读量4.7k

点赞数

分类专栏： HTML &amp; CSS JavaScript 文章标签： jquery class css function button xhtml

本文链接：https://blog.csdn.net/gengv/article/details/5514813

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

HTML & CSS

4 篇文章 0 订阅

订阅专栏

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

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

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

主要特点：

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

第一个例子：

第一个例子截图

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

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

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

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

$(function(){ // 第1种方法 var pl_1 = $("#pickListContainer").pickList(); // 第2种方法 var pl_2 = new $.pickList(); }

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

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

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

声明pickList的两种方法，不同之处在于：

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

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

因此更推荐第一种用法。

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

引入jQuery和pickList的js文件；
在HTML和CSS中按照默认的选择符和CSS类名，来定义控件名称和CSS类名；
在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>