An open API service indexing awesome lists of open source software.

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

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
```
![image](https://user-images.githubusercontent.com/6386956/81261190-90e9bf00-9076-11ea-8705-1724c0f7d368.png)

### ui.form.spinner();
> 수량입력 최고수량 data-max="5"
``` html



수량더하기
수량빼기

```
### ui.form.spined();
> 수량선택
``` html



```
![image](https://user-images.githubusercontent.com/6386956/109746477-cc163980-7c18-11eb-83d1-514bb6e7ec6f.png)
### ui.loading;
> 로딩중... ui.loading.show(); ui.loading.hide();
``` js
ui.loading.show(); // 로딩열기
ui.loading.hide(); // 로딩닫기
```
### ui.datePick
> 달력 날짜 선택 - 일선택,주선택,월선택
``` html


~



```
![image](https://user-images.githubusercontent.com/6386956/81260888-ee314080-9075-11ea-85a2-1f8c50e17c6e.png)
![image](https://user-images.githubusercontent.com/6386956/81261321-d4442d80-9076-11ea-86b7-b194139a6164.png)
![image](https://user-images.githubusercontent.com/6386956/81261023-381a2680-9076-11ea-9686-720367832b9f.png)
![image](https://user-images.githubusercontent.com/6386956/81261279-c098c700-9076-11ea-8061-dda43bdb0a2c.png)
### 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
버튼
버튼
버튼
버튼
버튼
버튼
버튼
```
![image](https://user-images.githubusercontent.com/6386956/109746618-05e74000-7c19-11eb-9be1-756c527b6496.png)
### 폼요소
``` html
선택
선택


```
![image](https://user-images.githubusercontent.com/6386956/109746757-434bcd80-7c19-11eb-8c86-f58cd3f04a40.png)
### 입력
``` html


검색

```
![image](https://user-images.githubusercontent.com/6386956/109746945-9de52980-7c19-11eb-8f92-b4092070be93.png)
### Select
``` html
//기본UI

선택1
선택2


// jQuery selectmenu();

선택1
선택2


```
### 별점
``` html
// 별점 보기








3.5

// 별점 주기 버튼








0

```
![image](https://user-images.githubusercontent.com/6386956/81248311-02b21080-9057-11ea-8174-fa4922a978d0.png)
### 탭UI
``` html


탭내용1


탭내용2

```
![image](https://user-images.githubusercontent.com/6386956/81248519-748a5a00-9057-11ea-9c37-a7ba4f965ca6.png)
### 아코디언
``` html


  • 타이틀 버튼

    내용



  • 타이틀 버튼

    내용



  • 타이틀 버튼

    내용



```
![image](https://user-images.githubusercontent.com/6386956/81160926-b4a0fc80-8fc5-11ea-8a31-f68701e4e9e8.png)

### 툴팁레이어
``` 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();

    ```