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
