仿windows资源管理器风格的jQuery复选框美化插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

folderselect.js是一款仿windows资源管理器风格的jQuery复选框美化插件。它能够以文件夹的形式来显示分层的数据结构，它还支持AJAX数据调用，事件回调，数据头等。

使用方法

初始化插件

可以通过下面的方法来初始化该美化复选框插件。

$("#element").folderselect({
    data:        my_json_hierarchical_data,
    headers:     [],
    url:         false,
    icon_item:   "item.png",
    icon_folder: "folder.png",
    icon_home:   "home.png",
    spinner_gif: "ajax-loader.gif",
    item_selected_callback:  function(item) {},
    item_removed_callback:   function(item) {},
    folder_entered_callback: function(folder) {}
});

获取被选择的项

你可以在初始化jQuery对象上调用folderselect('selected')方法来获取被选择的复选框元素。你所得到的数据和你在初始化的时候放入的数据是相同的。

var selected_items = $("#element").folderselect('selected');

配置参数

除了data参数，所有的其他参数都是可选的。

headers：该字符串数组将转换为每个文件夹的headers。
url：如果用户尝试打开一个空的文件夹（content = []），将使用该URL发送一个POST请求来获取文件夹的内容。
icon_folder / icon_item / icon_home：不同图标的URL地址。
item_selected_callback：当某项被选择时调用。
item_removed_callback：当某项取消选择时被调用。
folder_entered_callback：当文件夹打开时被调用。
data：参考下面。

DATA参数

data参数是一个包含分层数据的json对象。它可能只是一个基本的树结构，然后在用户点击的时候通过ajax来调用子节点的数据。

data参数包含2种类型的对象：items和folders。它们有相同点和不同点。

适用于Folder和item

type：可取值为'folder'或'item'。
icon：使用的item/folder图标的URL地址。
cells：字符串数组。第一个字符串标识folder/icon的名称。如果使用headers，cells的数量将等于headers的数量。
payload：一个任意的json对象。

仅适用于Folder

content：在该文件夹中可以找到的item/folder对象数组。
headers：在文件夹中显示的Headers的数组。
openable：设置为true是文件夹可以打开，false则不能。如果一个ajax请求为一个文件夹得到了空的数据，那么它就会被设置为false。
open：如果设置为true，则文件夹默认打开。默认只有一个文件夹是打开的。

仅适用于Item