jQuery Gridly 项目教程
1. 项目的目录结构及介绍
jquery-gridly/
├── images/
├── javascripts/
│ └── jquery.gridly.js
├── packages/
├── stylesheets/
│ └── jquery.gridly.css
├── .gitignore
├── Cakefile
├── Gemfile
├── Gemfile.lock
├── LICENSE
├── README.md
├── Rakefile
├── bower.json
├── gridly.jquery.json
├── index.haml
├── index.html
└── package.json
images/
: 存放项目所需的图片资源。javascripts/
: 存放主要的 JavaScript 文件,包括jquery.gridly.js
。packages/
: 存放项目的包文件。stylesheets/
: 存放主要的 CSS 文件,包括jquery.gridly.css
。.gitignore
: Git 忽略文件。Cakefile
: 项目构建文件。Gemfile
和Gemfile.lock
: Ruby 依赖管理文件。LICENSE
: 项目许可证文件。README.md
: 项目说明文档。Rakefile
: 项目任务自动化文件。bower.json
: Bower 包管理文件。gridly.jquery.json
: jQuery 插件信息文件。index.haml
: 主页的 Haml 模板文件。index.html
: 主页的 HTML 文件。package.json
: Node.js 包管理文件。
2. 项目的启动文件介绍
项目的启动文件主要是 index.html
,它包含了 jQuery Gridly 插件的基本使用示例。以下是 index.html
的部分代码:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Gridly Example</title>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.gridly.js" type="text/javascript"></script>
</head>
<body>
<div class="gridly">
<!-- 示例网格元素 -->
</div>
<script type="text/javascript">
$('.gridly').gridly();
</script>
</body>
</html>
3. 项目的配置文件介绍
项目的配置文件主要是 gridly.jquery.json
,它包含了 jQuery Gridly 插件的元数据信息。以下是 gridly.jquery.json
的部分内容:
{
"name": "gridly",
"title": "Gridly",
"description": "Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.",
"keywords": [
"grid",
"animation"
],
"version": "1.2.4",
"author": {
"name": "Kevin Sylvestre",
"url": "https://github.com/ksylvest"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/ksylvest/jquery-gridly/blob/master/LICENSE"
}
],
"dependencies": {
"jquery": ">=1.7"
}
}
这个配置文件定义了插件的名称、描述、关键字、版本、作者信息以及依赖的 jQuery 版本。