{"id":17048860,"url":"https://github.com/saucxs/jquery-component","last_synced_at":"2026-05-07T15:42:35.564Z","repository":{"id":97324574,"uuid":"133379451","full_name":"saucxs/jquery-component","owner":"saucxs","description":"jquery-component是自己在开发中遇到问题，总结，形成自己的开发组件","archived":false,"fork":false,"pushed_at":"2018-05-28T16:35:29.000Z","size":143,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-28T10:35:07.587Z","etag":null,"topics":["jquery","jquery-components","jqueryui"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saucxs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-05-14T15:05:20.000Z","updated_at":"2019-03-28T04:28:02.000Z","dependencies_parsed_at":"2023-04-18T21:35:41.505Z","dependency_job_id":null,"html_url":"https://github.com/saucxs/jquery-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saucxs%2Fjquery-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saucxs%2Fjquery-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saucxs%2Fjquery-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saucxs%2Fjquery-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saucxs","download_url":"https://codeload.github.com/saucxs/jquery-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245052673,"owners_count":20553172,"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":["jquery","jquery-components","jqueryui"],"created_at":"2024-10-14T09:53:12.871Z","updated_at":"2025-10-05T09:59:52.442Z","avatar_url":"https://github.com/saucxs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-component\njquery-component是自己在开发中遇到问题，总结，形成自己的开发组件，有待继续完善\n浏览器支持：开发主流浏览器\n\n\n## toast组件\n展示样例：http://www.mwcxs.top/static/jquery-component/toast/tipToast.html\n+ 调用方式\n\n1、在页面上引入\n```html\n\u003cscript type=\"text/javascript\" src=\"tip.js\"\u003e\u003c/script\u003e\n```\n\n2、js头部引入\n```js\nvar toastTip = new Tip();\ntoastTip._ready();\n```\n\n3、在该页面需要的场景\n```js\ntoastTip._show('网络异常')\n```\n\n+ 入参结构\n\n```javascript\nTip: {\n    showTime:100,  //进入时间\n    delay:3000, //toast显示时间\n    hideTime:500  //消失时间\n}\n```\n\n+ 举例\n\n```js\nvar toastTip = new Tip();  //使用默认时间\nvar toastTip = new Tip({showTime:100,delay:3000,hideTime:500});  //使用自己设定时间\n```\n\n## dialog弹窗\n\n展示样例：http://www.mwcxs.top/static/jquery-component/dialog/dialog.html\n\n+ 调用方式\n\n1、在页面上引用css和js\n\n```css \u0026 js \u0026 html\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"common.css\"\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"dialog.css\"\u003e\n    \u003cscript type=\"text/javascript\" src=\"jquery-1.11.0.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"dialog.js\"\u003e\u003c/script\u003e\n    \n     \u003cbutton id=\"btn1\" class=\"button\"\u003e打开对话框\u003c/button\u003e\n     \u003cdiv class=\"dialog dialog1\"\u003e你确认删除吗？\u003c/div\u003e\n```\n\n2、页面相应场景引入js\n```js\n        $(\".dialog1\").dialog({\n            'title':'警告',\n            'buttons':{\n                '确定':function(api){\n                    api.setTitle('温馨提示');\n                    api.setContent('删除成功！');\n                    console.log('ajax请求')\n                },\n                '取消':function(api){\n                    api.close();\n                }\n            }\n        },function(api){\n            $('#btn1').click(function(){\n                api.open();\n            });\n        });\n```\n说明：\n1、弹窗的dom调用dialog(object,function);包含两个参数，一个参数是json对象--弹窗里的内容，第二参数是函数--触发弹窗的事件\n2、还在完善其他函数部分，比如调用前的方法，调用后的方法等等\n\n\n## loading\n加载动画\n展示样例：http://www.mwcxs.top/static/jquery-component/loading/loading.html\n\n+ 调用方式\n\n1、页面引入css\n\n```css\n\u003clink rel=\"stylesheet\" href=\"loading.css\"\u003e\n```\n2、该页面需要的场景\n```dom\n \u003cdiv class=\"scale-ball\"\u003e\n        \u003cdiv class=\"scale-ball-a\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"scale-ball-b\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"scale-ball-c\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n```\n\n\n## 时间日期组件\n使用的flatpickr的组件\n展示样例：http://www.mwcxs.top/static/jquery-component/timePicker/timePicker.html\n\n+ 调用方式\n\n1、页面引入css，js，html\n\n```css \u0026 js\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"flatpickr.min.css\"\u003e\n\u003cscript type=\"text/javascript\" src=\"flatpickr.js\"\u003e\u003c/script\u003e\n\u003cinput style=\"margin-left: -3px;\" type=\"text\" class=\"birthday dataPicker\"\u003e\n```\n\n2、在该页面需要的场景\n```js\n  $(\".dataPicker\").flatpickr({\n    enableTime: false,      //true为带时间，false为不带时间\n    dateFormat: \"Y-m-d\",    //日期格式为'年-月-日'\n    minDate: \"1900-1-1\",    //最小的日期\n    maxDate: \"today\",       //最大的日期，today为今天\n    defaultDate: [\"1990-1-1\"],   //初始化默认的日期\n    locale: {\n      weekdays: {\n        shorthand: [\"周日\", \"周一\", \"周二\", \"周三\", \"周四\", \"周五\", \"周六\"],\n        longhand: [\n          \"星期日\",\n          \"星期一\",\n          \"星期二\",\n          \"星期三\",\n          \"星期四\",\n          \"星期五\",\n          \"星期六\",\n        ],\n      },\n      months: {\n        shorthand: [\n          \"一月\",\n          \"二月\",\n          \"三月\",\n          \"四月\",\n          \"五月\",\n          \"六月\",\n          \"七月\",\n          \"八月\",\n          \"九月\",\n          \"十月\",\n          \"十一月\",\n          \"十二月\",\n        ],\n        longhand: [\n          \"一月\",\n          \"二月\",\n          \"三月\",\n          \"四月\",\n          \"五月\",\n          \"六月\",\n          \"七月\",\n          \"八月\",\n          \"九月\",\n          \"十月\",\n          \"十一月\",\n          \"十二月\",\n        ],\n      },\n      rangeSeparator: \" 至 \",\n      weekAbbreviation: \"周\",\n      scrollTitle: \"滚动切换\",\n      toggleTitle: \"点击切换 12/24 小时时制\",\n    },  //设置为中文\n  });\n```\n\n## drag组件\n基于jquery\n展示样例：http://www.mwcxs.top/static/jquery-component/drag/drag.html\n+ 调用方式\n1、页面引用\n```js\n\u003cscript src=\"drag.js\"\u003e\u003c/script\u003e\n```\n2、场景应用\n```js\n$.init(\"父元素\",\"被拖动的元素\",\"被拖动的样式\",\"被替换元素的样式\")\n```\n说明\n* pElem 父元素的className 如 \".option\"\n* cElem 子元素(要拖拽的元素)的className 如 \".option-list\"\n* style1:被拖动的样式\n* style2:被替换的样式\n\n3、举例\n```js\n $.init(\".options\",\".option-list\",{'border-color':'#1F8CEB','background':'green'},{'border-color':'#5579ee','background':'red'});\n```\n\n\n## colorPicker组件\n主要是模仿的是webkit内核的颜色选择器\n展示样例：http://www.mwcxs.top/static/jquery-component/colorPicker/colorPicker.html\n\n+ 调用方式\n\n1、页面引用\n\n```js\n\u003cscript src=\"colorPicker.js\"\u003e\u003c/script\u003e\n```\n\n2、需要的场景\n```js\n Colorpicker.create({\n        bindClass:'inputPicker',\n        change: function(elem,hex){\n            elem.value = hex;\n            document.getElementById('inputPicker').value = hex;\n            document.getElementById('pickerShow').style.backgroundColor = hex;\n        }\n    })\n```\n\n## replaceAll自定义函数组件\n展示样例（查看console）：http://www.mwcxs.top/static/jquery-component/replaceAll/replaceAll.html\n\n原生js中并没有replaceAll方法，只有replace，如果要将字符串替换，一般使用replace\n```js\nvar str = '2016-09-19';\nvar result = str.replace('-','');\nconsole.log(result);\n\n201609-19\n```\n\n+ 调用方式\n\n1、在页面上引入\n```html\n\u003cscript type=\"text/javascript\" src=\"replaceAll.js\"\u003e\u003c/script\u003e\n```\n\n2、js头部引入\n```js\nvar str = '2016-09-19';\nvar result = str.replaceAll('-','.');\n```\n\n\n## timeStamp时间戳与事件转换\n展示样例（查看console）：http://www.mwcxs.top/static/jquery-component/timeStamp/timeStamp.html\n用 new Date(时间戳) 格式转化获得当前时间\n```js\nfunction timeFormat(item) {\n    var date = new Date(parseInt(item));\n    var Y = date.getFullYear() + '-';\n    var M = (date.getMonth()+1 \u003c 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';\n    var D = date.getDate() + ' ';\n    var h = date.getHours() + ':';\n    var m = date.getMinutes() + ':';\n    var s = date.getSeconds();\n    return Y+M+D+h+m+s;\n}\ntimeFormat(1526485239098);\n2018-5-16 23:40:39\n```\n\n+ 调用方式\n\n1、在页面上引入\n```html\n\u003cscript type=\"text/javascript\" src=\"timeStamp.js\"\u003e\u003c/script\u003e\n```\n\n2、自己js格式化\n```js\ntimeFormat('时间戳字符')  //建议用该种方式\n或者\ntranslate('时间戳字符')  //因为toLocaleDateString()方法是因浏览器而异的，IE和搜过浏览器展示有差异\n```\n\n3、举例子\n```js\ntimeFormat(1526485239098)  //建议用该种方式\n或者\ntranslate(1526485239098)  //因为toLocaleDateString()方法是因浏览器而异的，IE和搜过浏览器展示有差异\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaucxs%2Fjquery-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaucxs%2Fjquery-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaucxs%2Fjquery-component/lists"}