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
