Distpicker 开源项目使用教程

Distpicker 开源项目使用教程

distpicker⚠️ [Deprecated] No longer maintained. A simple jQuery plugin for picking provinces, cities and districts of China. (中国 / 省市区 / 三级联动 / 地址选择器)项目地址:https://gitcode.com/gh_mirrors/di/distpicker

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

Distpicker 是一个简单的 jQuery 插件，用于选择中国省、市、区。以下是项目的目录结构：

distpicker/
├── dist/
│   ├── distpicker.css
│   ├── distpicker.js
│   └── distpicker.min.js
├── src/
│   ├── distpicker.css
│   ├── distpicker.js
│   └── distpicker.min.js
├── examples/
│   ├── basic.html
│   ├── custom.html
│   └── ...
├── README.md
└── LICENSE

• dist/：包含编译后的文件，可以直接在项目中使用。
• src/：包含源代码文件。
• examples/：包含示例文件，展示了如何使用 Distpicker。
• README.md：项目的说明文档。
• LICENSE：项目的许可证文件。

2. 项目的启动文件介绍

Distpicker 的启动文件主要是 dist/distpicker.js 或 dist/distpicker.min.js。这两个文件是编译后的版本，可以直接在项目中引用。

引用文件

在你的 HTML 文件中引用 jQuery 和 Distpicker：

<script src="/path/to/jquery.js"></script> <!-- jQuery 是必须的 -->
<script src="/path/to/distpicker.js"></script>

初始化

使用 data-toggle="distpicker" 属性初始化 Distpicker：

<div data-toggle="distpicker">
  <select></select> <!-- 省 -->
  <select></select> <!-- 市 -->
  <select></select> <!-- 区 -->
</div>

3. 项目的配置文件介绍

Distpicker 没有专门的配置文件，所有的配置都是通过 HTML 属性和 JavaScript 方法来完成的。

HTML 属性配置

• data-autoselect：自动选择省、市、区。

  • data-autoselect="1"：自动选择省。
  • data-autoselect="2"：自动选择省和市。
  • data-autoselect="3"：自动选择省、市和区。

• data-placeholder：是否显示占位符。

  • data-placeholder="false"：不显示占位符。

JavaScript 配置

你也可以通过 JavaScript 方法来配置 Distpicker：

$('#distpicker').distpicker({
  province: '浙江省',
  city: '杭州市',
  district: '西湖区'
});

以上是 Distpicker 开源项目的使用教程，包含了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！

distpicker⚠️ [Deprecated] No longer maintained. A simple jQuery plugin for picking provinces, cities and districts of China. (中国 / 省市区 / 三级联动 / 地址选择器)项目地址:https://gitcode.com/gh_mirrors/di/distpicker