Widget
A component library developed with native JavaScript, including components such as carousel, tab, dropdown, dialog, etc. 一个基于原生JavaScript开发的组件库，包含：轮播、标签页、下拉框、对话框等组件。
Install / Use
/learn @huanghanzhilian/WidgetREADME
README.md
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
MIT License
Copyright (c) 2024 Jipeng Huang
