Ladda 开源项目教程
LaddaButtons with built-in loading indicators.项目地址:https://gitcode.com/gh_mirrors/la/Ladda
1. 项目的目录结构及介绍
Ladda 项目的目录结构如下:
Ladda/
├── dist/
│ ├── ladda.min.css
│ ├── ladda.min.js
│ └── ladda.min.js.map
├── examples/
│ ├── basic.html
│ ├── buttons.html
│ ├── form.html
│ ├── inline.html
│ ├── progress.html
│ └── server.html
├── gulpfile.js
├── LICENSE
├── package.json
├── README.md
├── src/
│ ├── sass/
│ │ ├── ladda.scss
│ │ └── _mixins.scss
│ └── js/
│ ├── ladda.js
│ └── spin.js
└── yarn.lock
目录介绍
dist/
:包含编译后的 CSS 和 JavaScript 文件,以及它们的源映射文件。examples/
:包含多个示例 HTML 文件,展示了 Ladda 的不同用法。gulpfile.js
:Gulp 构建脚本,用于自动化任务。LICENSE
:项目的许可证文件。package.json
:Node.js 项目的配置文件,包含依赖项和脚本。README.md
:项目的说明文档。src/
:源代码目录,包含 Sass 和 JavaScript 文件。yarn.lock
:Yarn 包管理器的锁定文件,确保依赖项版本一致。
2. 项目的启动文件介绍
Ladda 项目的启动文件主要是 examples/basic.html
,这是一个基本的示例文件,展示了如何使用 Ladda 按钮。
examples/basic.html
文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ladda Basic Example</title>
<link rel="stylesheet" href="../dist/ladda.min.css">
</head>
<body>
<button class="ladda-button" data-style="expand-left">
<span class="ladda-label">Submit</span>
</button>
<script src="../dist/ladda.min.js"></script>
<script>
// Bind normal buttons
Ladda.bind( 'button.ladda-button', { timeout: 2000 } );
</script>
</body>
</html>
启动文件介绍
- 引入了
ladda.min.css
和ladda.min.js
文件。 - 创建了一个带有
ladda-button
类的按钮,并设置了data-style
属性。 - 使用
Ladda.bind
方法绑定按钮,设置了一个 2 秒的超时时间。
3. 项目的配置文件介绍
Ladda 项目的配置文件主要是 package.json
,它包含了项目的元数据和依赖项。
package.json
文件内容
{
"name": "ladda",
"version": "2.0.1",
"description": "Buttons with built-in loading indicators",
"main": "dist/ladda.min.js",
"style": "dist/ladda.min.css",
"scripts": {
"build": "gulp build",
"watch": "gulp watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/hakimel/Ladda.git"
},
"keywords": [
"ladda",
"loading",
"button",
"spinner"
],
"author": "Hakim El Hattab <hakim.elhattab@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/hakimel/Ladda/issues"
},
"homepage": "https://github.com/hakimel/Ladda#readme",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-autopref
LaddaButtons with built-in loading indicators.项目地址:https://gitcode.com/gh_mirrors/la/Ladda