{"id":21765581,"url":"https://github.com/kimkee/ui","last_synced_at":"2026-04-19T19:03:23.893Z","repository":{"id":40995511,"uuid":"261698584","full_name":"kimkee/ui","owner":"kimkee","description":"HTML,CSS,JS UI","archived":false,"fork":false,"pushed_at":"2026-03-05T01:13:58.000Z","size":15785,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-05T07:11:02.320Z","etag":null,"topics":["accordion","alert","checkbox","confirm","modal","popup-dialog","radio","select","startpoint","tab","toast","tog","toggle","tooltips","ui"],"latest_commit_sha":null,"homepage":"https://kimkee.github.io/ui/","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/kimkee.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-05-06T08:33:45.000Z","updated_at":"2026-03-05T01:14:01.000Z","dependencies_parsed_at":"2023-09-29T03:11:39.821Z","dependency_job_id":"c85ab05c-8858-4259-923b-9b95c4a107b0","html_url":"https://github.com/kimkee/ui","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/kimkee/ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimkee%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimkee%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimkee%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimkee%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimkee","download_url":"https://codeload.github.com/kimkee/ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimkee%2Fui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32018765,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["accordion","alert","checkbox","confirm","modal","popup-dialog","radio","select","startpoint","tab","toast","tog","toggle","tooltips","ui"],"created_at":"2024-11-26T13:13:03.391Z","updated_at":"2026-04-19T19:03:23.859Z","avatar_url":"https://github.com/kimkee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ui.js\r\n\u003e HTML,CSS,JS UI\r\n## https://kimkee.github.io/ui/\r\n### https://kimkee.github.io/ui/static/js/ui.js\r\n\r\n### ui.alert();\r\n  \u003e 커스텀 알럿창 Alert UI\r\n  ``` js\r\n  ui.alert('공통 알럿창입니다.'); // 옵션없이 메시지만..\r\n  ui.alert('공통 알럿창입니다.',{ // 알럿 옵션들\r\n    tit:\"알럿타이틀\",\r\n    ycb:function(){\r\n      console.log('알럿확인결과');\r\n    },\r\n    ybt:\"확인\" // 기본값 \"확인\"\r\n  });\r\n  ```\r\n### ui.confirm();\r\n  \u003e 커스텀 컨펌창 Confirm UI\r\n  ``` js\r\n  ui.confirm('공통 컨펌창 입니다.',{ // 컨펌 창 옵션들\r\n    tit:\"컨펌타이틀\",\r\n    ycb:function(){\r\n      console.log('컨펌확인결과');\r\n    },\r\n    ncb:function(){\r\n      console.log('컨펌취소결과');\r\n    },\r\n    ybt:\"확인\", // 기본값 \"확인\"\r\n    nbt:\"취소\"  // 기본값 \"취소\"\r\n  });\r\n  ```\r\n### ui.toast();\r\n  \u003e 토스트창 하단에서 올라오는 알림메시지 UI\r\n  ``` js\r\n  // 토스트 창띄우기\r\n  ui.toast('토스트메시지입니다.');\r\n  ui.toast('토스트메시지입니다.',{\r\n    cls:'abcd', // null , string\r\n    bot:74,  // 바닥에서 띄울 간격\r\n    sec:3000 // 사라질 시간 number\r\n  });\r\n  ```\r\n### ui.popup\r\n  \u003e 레이어팝업 뛰우기 (전체,가운데,하단에 띄우기)  히스토리백 historyback 레이어팝업 닫기 지원\r\n``` js\r\nui.popup.open('pop-sample1'); // 팝레이어열기\r\nui.popup.close('pop-sample1'); // 팝레이어닫기\r\nui.popup.refresh('pop-sample1'); // 팝스크롤새로고침\r\nui.popup.open('pop-sample1',{  // 레이어팝업 콜백\r\n    ocb:function(){\r\n        console.log(\"pop-sample1 열림\");\r\n    },\r\n    ccb:function(){\r\n        console.log(\"pop-sample1 닫힘\");\r\n    }\r\n});\r\n```\r\n``` html\r\n\u003carticle class=\"pop-layer a pop-sample1\" id=\"pop-sample1\"\u003e\r\n    \u003cdiv class=\"pbd\"\u003e\r\n        \u003cdiv class=\"phd\"\u003e\r\n            \u003cdiv class=\"in\"\u003e\r\n                \u003ch1 class=\"ptit\"\u003e타이틀\u003c/h1\u003e\r\n                \u003cbutton type=\"button\" class=\"btnPopClose\"\u003e닫기\u003c/button\u003e\r\n            \u003c/div\u003e\r\n        \u003c/div\u003e\r\n        \u003cdiv class=\"pct\"\u003e\r\n            \u003cmain class=\"poptents\"\u003e\r\n                내용\r\n            \u003c/main\u003e\r\n        \u003c/div\u003e\r\n        \u003cdiv class=\"pbt\"\u003e\r\n            \u003cdiv class=\"bts\"\u003e\r\n                \u003ca href=\"javascript:;\" class=\"btn e\"\u003e버튼\u003c/a\u003e\r\n                \u003ca href=\"javascript:;\" class=\"btn a\"\u003e버튼\u003c/a\u003e\r\n            \u003c/div\u003e\r\n        \u003c/div\u003e\r\n    \u003c/div\u003e\r\n\u003c/article\u003e\r\n```\r\n### ui.isUA(t);\r\n  ``` js\r\n  ui.isUA(\"Chrome\");  // true\r\n  ui.isUA(\"Windows\"); // false\r\n  ui.isUA(\"Chrome Windows\"); // false\r\n  ```\r\n### ui.form.attach();\r\n  \u003e 첨부파일 UI\r\n  ``` html\r\n  \u003cspan class=\"ui-add-file on\" data-ui=\"attach\"\u003e\r\n      \u003cspan class=\"btn-attach btn\"\u003e\r\n          \u003clabel class=\"fileButton\"\u003e파일선택\u003cinput type=\"file\" class=\"fileInput\" accept=\"*/*\"\u003e\u003c/label\u003e\r\n      \u003c/span\u003e\r\n      \u003cspan class=\"file\"\u003e\r\n          \u003cspan class=\"loc\"\u003e파일이름.psd\u003c/span\u003e\r\n          \u003cbutton type=\"button\" class=\"delete\"\u003e삭제\u003c/button\u003e\r\n      \u003c/span\u003e\r\n  \u003c/span\u003e\r\n  ```\r\n### ui.form.chkall();\r\n  \u003e 첵크박스 모두 첵크\r\n  ``` html\r\n\u003clabel class=\"checkbox\"\u003e\u003cinput type=\"checkbox\" data-check=\"all\" data-check-id=\"checkTest1\"\u003e\u003cspan\u003e전체선택\u003c/span\u003e\u003c/label\u003e\r\n\u003clabel class=\"checkbox\"\u003e\u003cinput type=\"checkbox\" data-check=\"check\" data-check-id=\"checkTest1\"\u003e\u003cspan\u003e선택1\u003c/span\u003e\u003c/label\u003e\r\n\u003clabel class=\"checkbox\"\u003e\u003cinput type=\"checkbox\" data-check=\"check\" data-check-id=\"checkTest1\"\u003e\u003cspan\u003e선택2\u003c/span\u003e\u003c/label\u003e\r\n\u003clabel class=\"checkbox\"\u003e\u003cinput type=\"checkbox\" data-check=\"check\" data-check-id=\"checkTest1\"\u003e\u003cspan\u003e선택3\u003c/span\u003e\u003c/label\u003e\r\n  ```\r\n  ![image](https://user-images.githubusercontent.com/6386956/81261190-90e9bf00-9076-11ea-8705-1724c0f7d368.png)\r\n\r\n### ui.form.spinner();\r\n  \u003e 수량입력 최고수량 data-max=\"5\"\r\n  ``` html\r\n  \u003cdiv class=\"ui-amts\" data-min=\"1\" data-max=\"5\"\u003e\r\n    \u003cinput type=\"text\" value=\"1\" class=\"amt\" title=\"수량선택\"\u003e\r\n    \u003cbutton type=\"button\" class=\"bt minus\"\u003e수량더하기\u003c/button\u003e\r\n    \u003cbutton type=\"button\" class=\"bt plus\"\u003e수량빼기\u003c/button\u003e\r\n  \u003c/div\u003e\r\n  ```\r\n### ui.form.spined();\r\n\u003e 수량선택\r\n``` html\r\n\u003cspan class=\"ui-amtd\" data-max=\"5\"\u003e\u003cinput class=\"amt\" value=\"3\" type=\"number\"\u003e\u003c/span\u003e\r\n\u003cspan class=\"ui-amtd\" data-max=\"12\"\u003e\u003cinput class=\"amt\" value=\"5\" type=\"number\"\u003e\u003c/span\u003e\r\n\u003cspan class=\"ui-amtd\" data-max=\"20\"\u003e\u003cinput class=\"amt\" value=\"15\" type=\"number\"\u003e\u003c/span\u003e\r\n```\r\n![image](https://user-images.githubusercontent.com/6386956/109746477-cc163980-7c18-11eb-83d1-514bb6e7ec6f.png)\r\n### ui.loading;\r\n  \u003e 로딩중...  ui.loading.show(); ui.loading.hide();\r\n  ``` js\r\n  ui.loading.show(); // 로딩열기\r\n  ui.loading.hide(); // 로딩닫기\r\n  ```\r\n### ui.datePick\r\n  \u003e 달력 날짜 선택 - 일선택,주선택,월선택\r\n  ``` html\r\n\u003cspan class=\"input db ui-date\"\u003e\u003cinput type=\"text\"  placeholder=\"YYYY-MM-DD\" class=\"datepicker\" readonly\u003e\u003c/span\u003e\r\n\u003cdiv class=\"weeks\"\u003e\u003cspan id=\"START_DT\"\u003e\u003c/span\u003e ~ \u003cspan id=\"END_DT\"\u003e\u003c/span\u003e\u003c/div\u003e\r\n\u003cspan class=\"ui-date input db week\"\u003e\u003cinput type=\"text\" id=\"schedWeek\" value=\"2019-04-09\" placeholder=\"YYYY-MM-DD\" class=\"datepicker\" readonly\u003e\u003c/span\u003e\r\n\u003cspan class=\"input db ui-date\"\u003e\u003cinput type=\"text\" class=\"datepicker_month\" placeholder=\"YYYY-MM-DD\" value=\"2019-06\" readonly\u003e\u003c/span\u003e\r\n  ```\r\n![image](https://user-images.githubusercontent.com/6386956/81260888-ee314080-9075-11ea-85a2-1f8c50e17c6e.png)\r\n![image](https://user-images.githubusercontent.com/6386956/81261321-d4442d80-9076-11ea-86b7-b194139a6164.png)\r\n![image](https://user-images.githubusercontent.com/6386956/81261023-381a2680-9076-11ea-9686-720367832b9f.png)\r\n![image](https://user-images.githubusercontent.com/6386956/81261279-c098c700-9076-11ea-8061-dda43bdb0a2c.png)\r\n### ui.tog\r\n  \u003e 토글 UI\r\n  ``` html\r\n  \u003ca href=\"javascript:;\" data-ui-tog=\"btn\" data-ui-tog-val=\"tog_sample1\" class=\"btn\"\u003e토글UI\u003c/a\u003e\r\n  \u003cdiv data-ui-tog=\"ctn\" data-ui-tog-val=\"tog_sample1\"\u003e\r\n      \u003cp\u003e토글내용 토글내용\u003c/p\u003e\r\n      \u003cp\u003e토글내용 토글내용\u003c/p\u003e\r\n  \u003c/div\u003e\r\n  ```\r\n### ui.lock.using();\r\n  \u003e 화면 스크롤 잠금,풀기 (레이어팝업 띄울때 사용)\r\n  ``` js\r\n  ui.lock.using(true);  // 잠금\r\n  ui.lock.using(false); // 풀기\r\n  ```\r\n  \r\n### ui.cookie;\r\n  \u003e 쿠키설정, \r\n  ```  js\r\n  ui.cookie.set(cname, cvalue, exdays);  // cname(이름), cvalue(값), exdays(시간)\r\n  ui.cookie.get(cname); // cname(이름)\r\n  ```\r\n\r\n### 버튼\r\n``` html\r\n\u003ca href=\"javascript:;\" class=\"btn xs\"\u003e버튼\u003c/a\u003e\r\n\u003ca href=\"javascript:;\" class=\"btn sm\"\u003e버튼\u003c/a\u003e\r\n\u003ca href=\"javascript:;\" class=\"btn md\"\u003e버튼\u003c/a\u003e\r\n\u003ca href=\"javascript:;\" class=\"btn lg\"\u003e버튼\u003c/a\u003e\r\n\u003ca href=\"javascript:;\" class=\"btn xl\"\u003e버튼\u003c/a\u003e\r\n\u003ca href=\"javascript:;\" class=\"btn\" disabled\u003e버튼\u003c/a\u003e\r\n\u003cbutton type=\"button\" class=\"btn\" disabled\u003e버튼\u003c/button\u003e\r\n```\r\n![image](https://user-images.githubusercontent.com/6386956/109746618-05e74000-7c19-11eb-9be1-756c527b6496.png)\r\n### 폼요소\r\n``` html\r\n\u003clabel class=\"checkbox\"\u003e\u003cinput type=\"checkbox\"\u003e\u003cspan class=\"txt\"\u003e선택\u003c/span\u003e\u003c/label\u003e\r\n\u003clabel class=\"radio\"\u003e\u003cinput type=\"radio\" name=\"radio1\"\u003e\u003cspan class=\"txt\"\u003e선택\u003c/span\u003e\u003c/label\u003e\r\n\u003cdiv class=\"ui-chk\"\u003e\u003cinput type=\"checkbox\" title=\"텍스트\" checked\u003e\u003cem\u003e\u003c/em\u003e\u003c/div\u003e\r\n```\r\n![image](https://user-images.githubusercontent.com/6386956/109746757-434bcd80-7c19-11eb-8c86-f58cd3f04a40.png)\r\n### 입력\r\n``` html\r\n\u003cspan class=\"input\"\u003e\u003cinput type=\"text\" placeholder=\"텍스트\"\u003e\u003c/span\u003e\r\n\u003cspan class=\"input del\"\u003e\u003cinput type=\"text\" placeholder=\"삭제버튼\" value=\"텍스트\"\u003e\u003c/span\u003e\r\n\u003cspan class=\"input sch\"\u003e\u003cinput type=\"text\" placeholder=\"검색어 입력\"\u003e\u003ca href=\"javascript:;\" class=\"btnSch\"\u003e검색\u003c/a\u003e\u003c/span\u003e\r\n\u003cspan class=\"textarea\"\u003e\u003ctextarea placeholder=\"내용\"\u003e\u003c/textarea\u003e\u003c/span\u003e\r\n```\r\n![image](https://user-images.githubusercontent.com/6386956/109746945-9de52980-7c19-11eb-8f92-b4092070be93.png)\r\n### Select\r\n  ``` html\r\n  \u003cspan class=\"select\"\u003e //기본UI\r\n      \u003cselect\u003e\r\n          \u003coption\u003e선택1\u003c/option\u003e\r\n          \u003coption\u003e선택2\u003c/option\u003e\r\n      \u003c/select\u003e\r\n  \u003c/span\u003e\r\n  \u003cspan class=\"select jqui\"\u003e // jQuery selectmenu();\r\n      \u003cselect\u003e\r\n          \u003coption\u003e선택1\u003c/option\u003e\r\n          \u003coption\u003e선택2\u003c/option\u003e\r\n      \u003c/select\u003e\r\n  \u003c/span\u003e\r\n  ```\r\n### 별점\r\n``` html\r\n\u003cdiv class=\"ui-star\"\u003e  // 별점 보기\r\n    \u003cinput type=\"hidden\" class=\"amt\" value=\"3.5\"\u003e\r\n    \u003cul\u003e\r\n        \u003cli\u003e\u003cem class=\"st\"\u003e별\u003c/em\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003cem class=\"st\"\u003e별\u003c/em\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003cem class=\"st\"\u003e별\u003c/em\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003cem class=\"st\"\u003e별\u003c/em\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003cem class=\"st\"\u003e별\u003c/em\u003e\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n    \u003ci class=\"p\"\u003e3.5\u003c/i\u003e\r\n\u003c/div\u003e\r\n\u003cdiv class=\"ui-star\"\u003e // 별점 주기 버튼\r\n    \u003cinput type=\"hidden\" class=\"amt\" value=\"0\"\u003e\r\n    \u003cul\u003e\r\n        \u003cli\u003e\u003cbutton type=\"button\" class=\"st\"\u003e별\u003c/button\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003cbutton type=\"button\" class=\"st\"\u003e별\u003c/button\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003cbutton type=\"button\" class=\"st\"\u003e별\u003c/button\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003cbutton type=\"button\" class=\"st\"\u003e별\u003c/button\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003cbutton type=\"button\" class=\"st\"\u003e별\u003c/button\u003e\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n    \u003ci class=\"p\"\u003e0\u003c/i\u003e\r\n\u003c/div\u003e\r\n```\r\n![image](https://user-images.githubusercontent.com/6386956/81248311-02b21080-9057-11ea-8174-fa4922a978d0.png)\r\n### 탭UI\r\n  ``` html\r\n  \u003cul class=\"ui-tab a\"\u003e\r\n      \u003cli class=\"active\"\u003e\u003ca data-ui-tab-btn=\"tab_c\" data-ui-tab-val=\"tab_c_1\" href=\"javascript:;\"\u003e탭메뉴1\u003c/a\u003e\u003c/li\u003e\r\n      \u003cli\u003e\u003ca data-ui-tab-btn=\"tab_c\" data-ui-tab-val=\"tab_c_2\" href=\"javascript:;\"\u003e탭메뉴2\u003c/a\u003e\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n  \u003cdiv data-ui-tab-ctn=\"tab_c\" data-ui-tab-val=\"tab_c_1\" class=\"active\"\u003e\r\n      탭내용1\r\n  \u003c/div\u003e\r\n  \u003cdiv data-ui-tab-ctn=\"tab_c\" data-ui-tab-val=\"tab_c_2\"\u003e\r\n      탭내용2\r\n  \u003c/div\u003e\r\n  ```\r\n![image](https://user-images.githubusercontent.com/6386956/81248519-748a5a00-9057-11ea-9c37-a7ba4f965ca6.png)\r\n### 아코디언\r\n  ``` html\r\n  \u003cul class=\"ui-accd\" data-accd=\"accd\"\u003e\r\n      \u003cli class=\"open\"\u003e\r\n          \u003cdiv class=\"hbox\"\u003e타이틀 \u003cbutton type=\"button\" class=\"btn-tog\"\u003e버튼\u003c/button\u003e\u003c/div\u003e\r\n          \u003cdiv class=\"cbox\"\u003e내용\u003c/div\u003e\r\n      \u003c/li\u003e\r\n      \u003cli\u003e\r\n          \u003cdiv class=\"hbox\"\u003e타이틀 \u003cbutton type=\"button\" class=\"btn-tog\"\u003e버튼\u003c/button\u003e\u003c/div\u003e\r\n          \u003cdiv class=\"cbox\"\u003e내용\u003c/div\u003e\r\n      \u003c/li\u003e\r\n      \u003cli class=\"expt\"\u003e\r\n          \u003cdiv class=\"hbox\"\u003e타이틀 \u003cbutton type=\"button\" class=\"btn-tog\"\u003e버튼\u003c/button\u003e\u003c/div\u003e\r\n          \u003cdiv class=\"cbox\"\u003e내용\u003c/div\u003e\r\n      \u003c/li\u003e\r\n  \u003c/ul\u003e\r\n  ```\r\n  ![image](https://user-images.githubusercontent.com/6386956/81160926-b4a0fc80-8fc5-11ea-8a31-f68701e4e9e8.png)\r\n\r\n### 툴팁레이어\r\n``` html\r\n\u003ca href=\"javascript:;\" class=\"ico-warning\" data-ui-tooltip=\"btn\" data-ui-tooltip-cont=\"tooltip-email\"\u003e!\u003c/a\u003e\r\n\u003c!-- 툴팁 레이어 --\u003e\r\n\u003carticle class=\"ui-tooltips\" data-tooltip-cont=\"tooltip-email\"\u003e\r\n    \u003cdiv class=\"pbd\"\u003e\r\n        \u003cdiv class=\"phd\"\u003e\r\n            \u003cdiv class=\"in\"\u003e\r\n                \u003ch1 class=\"tit\"\u003e안내\u003c/h1\u003e\r\n                \u003cbutton type=\"button\" class=\"btnPopClose\"\u003e닫기\u003c/button\u003e\r\n            \u003c/div\u003e\r\n        \u003c/div\u003e\r\n        \u003cdiv class=\"pct\"\u003e\r\n            \u003cmain class=\"poptents\"\u003e\r\n                \u003cul class=\"bul-list\"\u003e\r\n                    \u003cli\u003e가능한 이메일을 사용바랍니다.\u003c/li\u003e\r\n                \u003c/ul\u003e\r\n            \u003c/main\u003e\r\n        \u003c/div\u003e\r\n    \u003c/div\u003e\r\n\u003c/article\u003e\r\n```\r\n\r\n### 리스트 More Load\r\n``` html\r\n\u003csection class=\"ut-tblist\"\u003e\r\n    \u003cul class=\"list\" id=\"dp_list\"\u003e\u003c/ul\u003e\r\n    \u003cdiv class=\"ui-loadmore\"\u003e\r\n        \u003cem\u003e\u003c/em\u003e\r\n        \u003cbutton type=\"button\" class=\"btn-load\" onclick=\"addItem.using()\" id=\"btn_list_more\"\u003e불러오기\u003c/button\u003e\r\n    \u003c/div\u003e\r\n\u003c/section\u003e\r\n\u003cscript\u003e\r\n    var addItem = {\r\n        init: function () {\r\n            this.using();\r\n            this.evt();\r\n        },\r\n        stat: true,\r\n        page: 0,\r\n        evt: function () {\r\n            var _this = this;\r\n            $(window).on(\"scroll resize\", function () { // 바닥 확인\r\n                var wHt = window.visualViewport.height;\r\n                var docH = $(document).height();\r\n                var scr = $(window).scrollTop() + wHt + 30;\r\n                // console.log(docH,scr);\r\n                if (docH \u003c= scr \u0026\u0026 _this.stat == true) {\r\n                    console.log(\"바닥sss\");\r\n                    _this.using();\r\n                    _this.stat = false;\r\n                }\r\n            });\r\n        },\r\n        using: function () {\r\n            var _this = this;\r\n            _this.stat = false;\r\n            $(\".ui-loadmore\").addClass(\"active\");\r\n\r\n            $.ajax({\r\n                type: \"get\",\r\n                url: \"../inc/list_more.html\",\r\n                dataType: \"html\",\r\n                success: function (html) {\r\n                    window.setTimeout(function () {\r\n                        _this.page++;\r\n                        $(\"#dp_list\").append(html).addClass(\"load\");\r\n                        console.log(\"페이징 = \" + _this.page);\r\n                        _this.stat = true;\r\n                        if (_this.page \u003e= 3) {\r\n                            console.log(\"끝\");\r\n                            $(\".ui-loadmore\").addClass(\"hide\");\r\n                            _this.stat = false;\r\n                        }\r\n                        $(\".ui-loadmore\").removeClass(\"active\").removeClass(\"error\");\r\n                        $(\"#btn_list_more\").prop(\"disabled\", true);\r\n                        _this.evt();\r\n\r\n                    }, 500);\r\n                },\r\n                error: function (error) {\r\n                    // _this.page --;\r\n                    console.log(\"페이징 = \" + _this.page + \"에러 = \" + error.readyState);\r\n                    $(\".ui-loadmore\").removeClass(\"active\").addClass(\"error\");\r\n                    $(window).off(\"scroll\");\r\n                    $(\"#btn_list_more\").prop(\"disabled\", false);\r\n                }\r\n            });\r\n        }\r\n    };\r\n\r\n    addItem.init();\r\n\r\n\u003c/script\u003e\r\n   ```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimkee%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimkee%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimkee%2Fui/lists"}