https://github.com/kimkee/ui
HTML,CSS,JS UI
https://github.com/kimkee/ui
accordion alert checkbox confirm modal popup-dialog radio select startpoint tab toast tog toggle tooltips ui
Last synced: 7 months ago
JSON representation
HTML,CSS,JS UI
- Host: GitHub
- URL: https://github.com/kimkee/ui
- Owner: kimkee
- Created: 2020-05-06T08:33:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-13T06:59:54.000Z (7 months ago)
- Last Synced: 2025-03-13T07:39:24.742Z (7 months ago)
- Topics: accordion, alert, checkbox, confirm, modal, popup-dialog, radio, select, startpoint, tab, toast, tog, toggle, tooltips, ui
- Language: JavaScript
- Homepage: https://kimkee.github.io/ui/
- Size: 15 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ui.js
> HTML,CSS,JS UI
## https://kimkee.github.io/ui/
### https://kimkee.github.io/ui/static/js/ui.js### ui.alert();
> 커스텀 알럿창 Alert UI
``` js
ui.alert('공통 알럿창입니다.'); // 옵션없이 메시지만..
ui.alert('공통 알럿창입니다.',{ // 알럿 옵션들
tit:"알럿타이틀",
ycb:function(){
console.log('알럿확인결과');
},
ybt:"확인" // 기본값 "확인"
});
```
### ui.confirm();
> 커스텀 컨펌창 Confirm UI
``` js
ui.confirm('공통 컨펌창 입니다.',{ // 컨펌 창 옵션들
tit:"컨펌타이틀",
ycb:function(){
console.log('컨펌확인결과');
},
ncb:function(){
console.log('컨펌취소결과');
},
ybt:"확인", // 기본값 "확인"
nbt:"취소" // 기본값 "취소"
});
```
### ui.toast();
> 토스트창 하단에서 올라오는 알림메시지 UI
``` js
// 토스트 창띄우기
ui.toast('토스트메시지입니다.');
ui.toast('토스트메시지입니다.',{
cls:'abcd', // null , string
bot:74, // 바닥에서 띄울 간격
sec:3000 // 사라질 시간 number
});
```
### ui.popup
> 레이어팝업 뛰우기 (전체,가운데,하단에 띄우기) 히스토리백 historyback 레이어팝업 닫기 지원
``` js
ui.popup.open('pop-sample1'); // 팝레이어열기
ui.popup.close('pop-sample1'); // 팝레이어닫기
ui.popup.refresh('pop-sample1'); // 팝스크롤새로고침
ui.popup.open('pop-sample1',{ // 레이어팝업 콜백
ocb:function(){
console.log("pop-sample1 열림");
},
ccb:function(){
console.log("pop-sample1 닫힘");
}
});
```
``` html
```
### ui.isUA(t);
``` js
ui.isUA("Chrome"); // true
ui.isUA("Windows"); // false
ui.isUA("Chrome Windows"); // false
```
### ui.form.attach();
> 첨부파일 UI
``` html
파일선택
파일이름.psd
삭제
```
### ui.form.chkall();
> 첵크박스 모두 첵크
``` html
전체선택
선택1
선택2
선택3
```
### ui.form.spinner();
> 수량입력 최고수량 data-max="5"
``` html
수량더하기
수량빼기
```
### ui.form.spined();
> 수량선택
``` html
```

### ui.loading;
> 로딩중... ui.loading.show(); ui.loading.hide();
``` js
ui.loading.show(); // 로딩열기
ui.loading.hide(); // 로딩닫기
```
### ui.datePick
> 달력 날짜 선택 - 일선택,주선택,월선택
``` html
~
```




### ui.tog
> 토글 UI
``` html
토글UI
토글내용 토글내용
토글내용 토글내용
```
### ui.lock.using();
> 화면 스크롤 잠금,풀기 (레이어팝업 띄울때 사용)
``` js
ui.lock.using(true); // 잠금
ui.lock.using(false); // 풀기
```
### ui.cookie;
> 쿠키설정,
``` js
ui.cookie.set(cname, cvalue, exdays); // cname(이름), cvalue(값), exdays(시간)
ui.cookie.get(cname); // cname(이름)
```### 버튼
``` html
버튼
버튼
버튼
버튼
버튼
버튼
버튼
```

### 폼요소
``` html
선택
선택
```

### 입력
``` html
검색
```

### Select
``` html
//기본UI
선택1
선택2
// jQuery selectmenu();
선택1
선택2
```
### 별점
``` html// 별점 보기
- 별
- 별
- 별
- 별
- 별
3.5// 별점 주기 버튼
- 별
- 별
- 별
- 별
- 별
0
```

### 탭UI
``` html
탭내용1
탭내용2
```

### 아코디언
``` html
-
타이틀 버튼
내용
-
타이틀 버튼
내용
-
타이틀 버튼
내용
```

### 툴팁레이어
``` html
!
안내
닫기
- 가능한 이메일을 사용바랍니다.
```
### 리스트 More Load
``` html
불러오기
var addItem = {
init: function () {
this.using();
this.evt();
},
stat: true,
page: 0,
evt: function () {
var _this = this;
$(window).on("scroll resize", function () { // 바닥 확인
var wHt = window.visualViewport.height;
var docH = $(document).height();
var scr = $(window).scrollTop() + wHt + 30;
// console.log(docH,scr);
if (docH <= scr && _this.stat == true) {
console.log("바닥sss");
_this.using();
_this.stat = false;
}
});
},
using: function () {
var _this = this;
_this.stat = false;
$(".ui-loadmore").addClass("active");
$.ajax({
type: "get",
url: "../inc/list_more.html",
dataType: "html",
success: function (html) {
window.setTimeout(function () {
_this.page++;
$("#dp_list").append(html).addClass("load");
console.log("페이징 = " + _this.page);
_this.stat = true;
if (_this.page >= 3) {
console.log("끝");
$(".ui-loadmore").addClass("hide");
_this.stat = false;
}
$(".ui-loadmore").removeClass("active").removeClass("error");
$("#btn_list_more").prop("disabled", true);
_this.evt();
}, 500);
},
error: function (error) {
// _this.page --;
console.log("페이징 = " + _this.page + "에러 = " + error.readyState);
$(".ui-loadmore").removeClass("active").addClass("error");
$(window).off("scroll");
$("#btn_list_more").prop("disabled", false);
}
});
}
};
addItem.init();
```