{"id":19554539,"url":"https://github.com/huanghanzhilian/widget","last_synced_at":"2025-06-22T22:35:34.510Z","repository":{"id":207333315,"uuid":"78098741","full_name":"huanghanzhilian/widget","owner":"huanghanzhilian","description":"A component library developed with native JavaScript, including components such as carousel, tab, dropdown, dialog, etc. 一个基于原生JavaScript开发的组件库，包含：轮播、标签页、下拉框、对话框等组件。","archived":false,"fork":false,"pushed_at":"2024-02-22T12:55:18.000Z","size":1511,"stargazers_count":113,"open_issues_count":2,"forks_count":42,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-06-01T09:53:03.058Z","etag":null,"topics":["calendar","city-selector","countdown","dialog","dropdown","image-zoom","input-formatter","magnifier","scrollbar","seamless-carousel","seamless-scroll-up","slider","tab-panel","tabs"],"latest_commit_sha":null,"homepage":"https://widget.huanghanlian.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huanghanzhilian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-05T09:24:09.000Z","updated_at":"2024-12-03T21:29:28.000Z","dependencies_parsed_at":"2023-11-15T09:27:43.842Z","dependency_job_id":"8232e352-7736-4b52-9c4a-2de25a3dc5b4","html_url":"https://github.com/huanghanzhilian/widget","commit_stats":null,"previous_names":["huanghanzhilian/widget"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/huanghanzhilian/widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghanzhilian%2Fwidget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghanzhilian%2Fwidget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghanzhilian%2Fwidget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghanzhilian%2Fwidget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huanghanzhilian","download_url":"https://codeload.github.com/huanghanzhilian/widget/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanghanzhilian%2Fwidget/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261380141,"owners_count":23149930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","city-selector","countdown","dialog","dropdown","image-zoom","input-formatter","magnifier","scrollbar","seamless-carousel","seamless-scroll-up","slider","tab-panel","tabs"],"created_at":"2024-11-11T04:27:58.373Z","updated_at":"2025-06-22T22:35:29.493Z","avatar_url":"https://github.com/huanghanzhilian.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n\t\u003cimg alt=\"logo\" src=\"./public/image/widget.png\" width=\"300\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\" style=\"margin: 30px 0 30px; font-weight: bold;\"\u003eH-Widget v1.0.0\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eA component library developed with native JavaScript, including components such as carousel, tab, dropdown, dialog, etc.\u003c/h4\u003e\n\n## README.md\n- [English](README.md)\n- [简体中文](README.zh_CN.md)\n\n## Project Demo\n\n**Project Demo:**\n\n- GitHub Pages Deployment: [http://widget.huanghanlian.com/](http://widget.huanghanlian.com/)\n\n## Project Introduction\n\n**Background:**\nWith the rise of various frameworks nowadays, we seldom think about how native JS works, understanding native JS is also very important～\n\n---\n\n## How to Use\n\n### Slider - Native JavaScript Encapsulation\nDescription: Progress and range control, supports gesture operation, supports mobile and PC\n[Demonstration](http://widget.huanghanlian.com/range/)\n```javascript\nnew range(\"selector\", options, callback(api));\n```\n\n### Scrollbar - Native JavaScript Encapsulation\nDescription: Simulated scrollbar, supports gesture operation, supports mobile and PC\n[Demonstration](http://widget.huanghanlian.com/scrollbar/)\n```javascript\nnew scrollbar(\"selector\", options, callback(api));\n```\n\n### Calendar - Native JavaScript Encapsulation\nDescription: Date and date range selection, flexible date selection function\n[Demonstration](http://widget.huanghanlian.com/calendar/)\n```javascript\nnew calendar(\"selector\", options);\n```\n\n### Seamless Carousel - Native JavaScript Encapsulation\nDescription: Seamless scrolling, responsive, adjustable parameters, etc.\n[Demonstration](http://widget.huanghanlian.com/bannerha/)\n```javascript\nnew bannerha(selector, { options });\n```\n\n### Tab Panel - Native JavaScript Encapsulation\nDescription: Tab panel, responsive, adjustable parameters, etc.\n[Demonstration](http://widget.huanghanlian.com/tabpanel/)\n```javascript\nnew tabpanel(selector, { options });\n```\n\n### Seamless Scroll Up - Native JavaScript Encapsulation\nDescription: Seamless scrolling, interval scrolling, responsive, adjustable parameters, etc.\n[Demonstration](http://widget.huanghanlian.com/scrollup/)\n```javascript\nnew scrollup(selector, { options });\n```\n\n### Magnifier - Native JavaScript Encapsulation\nDescription: E-commerce magnifier encapsulation, adjustable parameters, etc.\n[Demonstration](http://widget.huanghanlian.com/magnifier/)\n```javascript\nnew magnifier(selector, { options });\n```\n\n### Countdown - Native JavaScript Encapsulation\nDescription: Countdown, adjustable parameters, etc.\n[Demonstration](http://widget.huanghanlian.com/countdown/)\n```javascript\nnew countdown(selector, { options });\n```\n\n### Dropdown - Native JavaScript Encapsulation\nDescription: Dropdown, supports keyboard events, adjustable parameters, etc.\n[Demonstration](http://widget.huanghanlian.com/select/)\n```javascript\nnew select(selector, { options });\n```\n\n### Tabs - Native JavaScript Encapsulation\nDescription: Simple tab switching and fade in and out slideshow functions\n[Demonstration](http://widget.huanghanlian.com/tabs/)\n```javascript\nnew tabs(selector, { options });\n```\n\n### Image Zoom - Native JavaScript Encapsulation\nDescription: Image centering and scaling processing\n[Demonstration](http://widget.huanghanlian.com/imagezoom/)\n```javascript\nnew imagezoom(selector, { options });\n```\n\n### Dialog - Native JavaScript Encapsulation\nDescription: Personalized popup layer, custom popup position, clever positioning method\n[Demonstration](http://widget.huanghanlian.com/dialog/)\n```javascript\nnew dialog(selector, { options });\n```\n\n### City Selector - Native JavaScript Encapsulation\nDescription: Latest and most complete city subdivision data, custom event handling method\n[Demonstration](http://widget.huanghanlian.com/citys/)\n```javascript\nnew citys(\"selector\", options, callback(api));\n```\n\n### Input Formatter - Native JavaScript Encapsulation\nDescription: Input formatting for easy validation\n[Demonstration](http://widget.huanghanlian.com/inputFormat/)\n```javascript\nnew inputFormat(\"selector\", options, callback(api));\n```\n\n## License\n\n[Apache License 2.0](https://github.com/huanghanzhilian/widget/blob/master/LICENSE)\n\nMIT License\n\nCopyright (c) 2024 Jipeng Huang\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuanghanzhilian%2Fwidget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuanghanzhilian%2Fwidget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuanghanzhilian%2Fwidget/lists"}