https://github.com/huanghanzhilian/widget
A component library developed with native JavaScript, including components such as carousel, tab, dropdown, dialog, etc. 一个基于原生JavaScript开发的组件库，包含：轮播、标签页、下拉框、对话框等组件。
https://github.com/huanghanzhilian/widget
calendar city-selector countdown dialog dropdown image-zoom input-formatter magnifier scrollbar seamless-carousel seamless-scroll-up slider tab-panel tabs
Last synced: 26 days ago
JSON representation
A component library developed with native JavaScript, including components such as carousel, tab, dropdown, dialog, etc. 一个基于原生JavaScript开发的组件库，包含：轮播、标签页、下拉框、对话框等组件。
- Host: GitHub
- URL: https://github.com/huanghanzhilian/widget
- Owner: huanghanzhilian
- License: mit
- Created: 2017-01-05T09:24:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-22T12:55:18.000Z (about 1 year ago)
- Last Synced: 2025-04-04T18:05:47.269Z (about 2 months ago)
- Topics: calendar, city-selector, countdown, dialog, dropdown, image-zoom, input-formatter, magnifier, scrollbar, seamless-carousel, seamless-scroll-up, slider, tab-panel, tabs
- Language: JavaScript
- Homepage: https://widget.huanghanlian.com/
- Size: 1.44 MB
- Stars: 113
- Watchers: 17
- Forks: 42
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
H-Widget v1.0.0
A component library developed with native JavaScript, including components such as carousel, tab, dropdown, dialog, etc.
## README.md
- [English](README.md)
- [简体中文](README.zh_CN.md)
## Project Demo
**Project Demo:**
- GitHub Pages Deployment: [http://widget.huanghanlian.com/](http://widget.huanghanlian.com/)
## Project Introduction
**Background:**
With the rise of various frameworks nowadays, we seldom think about how native JS works, understanding native JS is also very important～
---
## How to Use
### Slider - Native JavaScript Encapsulation
Description: Progress and range control, supports gesture operation, supports mobile and PC
[Demonstration](http://widget.huanghanlian.com/range/)
```javascript
new range("selector", options, callback(api));
```
### Scrollbar - Native JavaScript Encapsulation
Description: Simulated scrollbar, supports gesture operation, supports mobile and PC
[Demonstration](http://widget.huanghanlian.com/scrollbar/)
```javascript
new scrollbar("selector", options, callback(api));
```
### Calendar - Native JavaScript Encapsulation
Description: Date and date range selection, flexible date selection function
[Demonstration](http://widget.huanghanlian.com/calendar/)
```javascript
new calendar("selector", options);
```
### Seamless Carousel - Native JavaScript Encapsulation
Description: Seamless scrolling, responsive, adjustable parameters, etc.
[Demonstration](http://widget.huanghanlian.com/bannerha/)
```javascript
new bannerha(selector, { options });
```
### Tab Panel - Native JavaScript Encapsulation
Description: Tab panel, responsive, adjustable parameters, etc.
[Demonstration](http://widget.huanghanlian.com/tabpanel/)
```javascript
new tabpanel(selector, { options });
```
### Seamless Scroll Up - Native JavaScript Encapsulation
Description: Seamless scrolling, interval scrolling, responsive, adjustable parameters, etc.
[Demonstration](http://widget.huanghanlian.com/scrollup/)
```javascript
new scrollup(selector, { options });
```
### Magnifier - Native JavaScript Encapsulation
Description: E-commerce magnifier encapsulation, adjustable parameters, etc.
[Demonstration](http://widget.huanghanlian.com/magnifier/)
```javascript
new magnifier(selector, { options });
```
### Countdown - Native JavaScript Encapsulation
Description: Countdown, adjustable parameters, etc.
[Demonstration](http://widget.huanghanlian.com/countdown/)
```javascript
new countdown(selector, { options });
```
### Dropdown - Native JavaScript Encapsulation
Description: Dropdown, supports keyboard events, adjustable parameters, etc.
[Demonstration](http://widget.huanghanlian.com/select/)
```javascript
new select(selector, { options });
```
### Tabs - Native JavaScript Encapsulation
Description: Simple tab switching and fade in and out slideshow functions
[Demonstration](http://widget.huanghanlian.com/tabs/)
```javascript
new tabs(selector, { options });
```
### Image Zoom - Native JavaScript Encapsulation
Description: Image centering and scaling processing
[Demonstration](http://widget.huanghanlian.com/imagezoom/)
```javascript
new imagezoom(selector, { options });
```
### Dialog - Native JavaScript Encapsulation
Description: Personalized popup layer, custom popup position, clever positioning method
[Demonstration](http://widget.huanghanlian.com/dialog/)
```javascript
new dialog(selector, { options });
```
### City Selector - Native JavaScript Encapsulation
Description: Latest and most complete city subdivision data, custom event handling method
[Demonstration](http://widget.huanghanlian.com/citys/)
```javascript
new citys("selector", options, callback(api));
```
### Input Formatter - Native JavaScript Encapsulation
Description: Input formatting for easy validation
[Demonstration](http://widget.huanghanlian.com/inputFormat/)
```javascript
new inputFormat("selector", options, callback(api));
```
## License
[Apache License 2.0](https://github.com/huanghanzhilian/widget/blob/master/LICENSE)
MIT License
Copyright (c) 2024 Jipeng Huang