jQuery Sortable Lists 项目教程

骆楷尚

于 2024-08-16 08:47:53 发布

阅读量814

点赞数 17

本文链接：https://blog.csdn.net/gitblog_00351/article/details/141243335

版权

jQuery Sortable Lists 项目教程

jquery-sortable-listsjQuery plugin to sorting lists also the tree structures.项目地址:https://gitcode.com/gh_mirrors/jq/jquery-sortable-lists

1. 项目的目录结构及介绍

jquery-sortable-lists/
├── css/
│   └── jquery-sortable-lists.css
├── dist/
│   ├── jquery-sortable-lists.js
│   └── jquery-sortable-lists.min.js
├── examples/
│   ├── basic.html
│   ├── connect.html
│   ├── grid.html
│   ├── handle.html
│   ├── nested.html
│   ├── placeholder.html
│   └── portlets.html
├── src/
│   ├── jquery-sortable-lists.coffee
│   └── jquery-sortable-lists.js
├── test/
│   └── test.html
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bower.json
├── Gruntfile.js
├── LICENSE
├── package.json
└── README.md

目录结构介绍

css/: 包含项目的样式文件。
dist/: 包含编译后的JavaScript文件，包括压缩和未压缩版本。
examples/: 包含多个示例文件，展示不同功能的使用方法。
src/: 包含源代码文件，包括CoffeeScript和JavaScript版本。
test/: 包含测试文件。
.gitignore: Git忽略文件配置。
.jshintrc: JSHint配置文件。
.travis.yml: Travis CI配置文件。
bower.json: Bower包管理配置文件。
Gruntfile.js: Grunt任务配置文件。
LICENSE: 项目许可证。
package.json: npm包管理配置文件。
README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是examples/目录下的示例文件，例如basic.html。这些文件展示了如何使用jQuery Sortable Lists插件。

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Example</title>
    <link rel="stylesheet" href="../css/jquery-sortable-lists.css">
</head>
<body>
    <ul id="basic">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../dist/jquery-sortable-lists.js"></script>
    <script>
        $(function() {
            $('#basic').sortableLists();
        });
    </script>
</body>
</html>

启动文件介绍

引入样式文件: <link rel="stylesheet" href="../css/jquery-sortable-lists.css">
引入jQuery库: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
引入插件文件: <script src="../dist/jquery-sortable-lists.js"></script>
初始化插件: $('#basic').sortableLists();

3. 项目的配置文件介绍

项目的配置文件主要是Gruntfile.js和package.json。

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        coffee: {
            compile: {
                files: {
                    'dist/jquery-sortable-lists.js': 'src/jquery-sortable-lists.coffee'
                }
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'dist/jquery-sortable-lists.js',
                dest: 'dist/jquery-sortable-lists.min.js'
            }
        },
        watch: {
            files: ['src/*.coffee'],
            tasks: ['coffee', 'uglify']
        }
    });

    grunt.loadNpmTasks('grunt-

jquery-sortable-listsjQuery plugin to sorting lists also the tree structures.项目地址:https://gitcode.com/gh_mirrors/jq/jquery-sortable-lists

骆楷尚

关注

17
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery Sortable Lists 项目教程

jQuery Sortable Lists 项目教程 jquery-sortable-listsjQuery plugin to sorting lists also the tree structures.项目地址:https://gitcode.com/gh_mirrors/jq/jquery-sortable-lists 1. 项目的目录结构及介绍jquery-sortable-list...
复制链接

扫一扫