H-Widget v1.0.0

A component library developed with native JavaScript, including components such as carousel, tab, dropdown, dialog, etc.

README.md

• English
• 简体中文

Project Demo

Project Demo:

• GitHub Pages Deployment: 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

new range("selector", options, callback(api));

Scrollbar - Native JavaScript Encapsulation

Description: Simulated scrollbar, supports gesture operation, supports mobile and PC Demonstration

new scrollbar("selector", options, callback(api));

Calendar - Native JavaScript Encapsulation

Description: Date and date range selection, flexible date selection function Demonstration

new calendar("selector", options);

Seamless Carousel - Native JavaScript Encapsulation

Description: Seamless scrolling, responsive, adjustable parameters, etc. Demonstration

new bannerha(selector, { options });

Tab Panel - Native JavaScript Encapsulation

Description: Tab panel, responsive, adjustable parameters, etc. Demonstration

new tabpanel(selector, { options });

Seamless Scroll Up - Native JavaScript Encapsulation

Description: Seamless scrolling, interval scrolling, responsive, adjustable parameters, etc. Demonstration

new scrollup(selector, { options });

Magnifier - Native JavaScript Encapsulation

Description: E-commerce magnifier encapsulation, adjustable parameters, etc. Demonstration

new magnifier(selector, { options });

Countdown - Native JavaScript Encapsulation

Description: Countdown, adjustable parameters, etc. Demonstration

new countdown(selector, { options });

Dropdown - Native JavaScript Encapsulation

Description: Dropdown, supports keyboard events, adjustable parameters, etc. Demonstration

new select(selector, { options });

Tabs - Native JavaScript Encapsulation

Description: Simple tab switching and fade in and out slideshow functions Demonstration

new tabs(selector, { options });

Image Zoom - Native JavaScript Encapsulation

Description: Image centering and scaling processing Demonstration

new imagezoom(selector, { options });

Dialog - Native JavaScript Encapsulation

Description: Personalized popup layer, custom popup position, clever positioning method Demonstration

new dialog(selector, { options });

City Selector - Native JavaScript Encapsulation

Description: Latest and most complete city subdivision data, custom event handling method Demonstration

new citys("selector", options, callback(api));

Input Formatter - Native JavaScript Encapsulation

Description: Input formatting for easy validation Demonstration

new inputFormat("selector", options, callback(api));

License

Apache License 2.0

MIT License

Copyright (c) 2024 Jipeng Huang