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

// 별점 보기

3.5

// 별점 주기 버튼

``` ![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

出错啦~ -codez

"出错啦~{code=404, servlet=dispatcherServlet, uri=/inc/list_more.html}"

```

ui.js

HTML,CSS,JS UI

https://kimkee.github.io/ui/
https://kimkee.github.io/ui/static/js/ui.js

ui.alert();

커스텀 알럿창 Alert UI

  ui.alert('공통 알럿창입니다.'); // 옵션없이 메시지만..
  ui.alert('공통 알럿창입니다.',{ // 알럿 옵션들
    tit:"알럿타이틀",
    ycb:function(){
      console.log('알럿확인결과');
    },
    ybt:"확인" // 기본값 "확인"
  });

ui.confirm();

커스텀 컨펌창 Confirm UI

  ui.confirm('공통 컨펌창 입니다.',{ // 컨펌 창 옵션들
    tit:"컨펌타이틀",
    ycb:function(){
      console.log('컨펌확인결과');
    },
    ncb:function(){
      console.log('컨펌취소결과');
    },
    ybt:"확인", // 기본값 "확인"
    nbt:"취소"  // 기본값 "취소"
  });

ui.toast();

토스트창 하단에서 올라오는 알림메시지 UI

  // 토스트 창띄우기
  ui.toast('토스트메시지입니다.');
  ui.toast('토스트메시지입니다.',{
    cls:'abcd', // null , string
    bot:74,  // 바닥에서 띄울 간격
    sec:3000 // 사라질 시간 number
  });

레이어팝업 뛰우기 (전체,가운데,하단에 띄우기) 히스토리백 historyback 레이어팝업 닫기 지원

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 닫힘");
    }
});

<article class="pop-layer a pop-sample1" id="pop-sample1">
    <div class="pbd">
        <div class="phd">
            <div class="in">
                <h1 class="ptit">타이틀</h1>
                <button type="button" class="btnPopClose">닫기</button>
            </div>
        </div>
        <div class="pct">
            <main class="poptents">
                내용
            </main>
        </div>
        <div class="pbt">
            <div class="bts">
                <a href="javascript:;" class="btn e">버튼</a>
                <a href="javascript:;" class="btn a">버튼</a>
            </div>
        </div>
    </div>
</article>

ui.isUA(t);

  ui.isUA("Chrome");  // true
  ui.isUA("Windows"); // false
  ui.isUA("Chrome Windows"); // false

ui.form.attach();

첨부파일 UI

  <span class="ui-add-file on" data-ui="attach">
      <span class="btn-attach btn">
          <label class="fileButton">파일선택<input type="file" class="fileInput" accept="*/*"></label>
      </span>
      <span class="file">
          <span class="loc">파일이름.psd</span>
          <button type="button" class="delete">삭제</button>
      </span>
  </span>

ui.form.chkall();

첵크박스 모두 첵크

<label class="checkbox"><input type="checkbox" data-check="all" data-check-id="checkTest1"><span>전체선택</span></label>
<label class="checkbox"><input type="checkbox" data-check="check" data-check-id="checkTest1"><span>선택1</span></label>
<label class="checkbox"><input type="checkbox" data-check="check" data-check-id="checkTest1"><span>선택2</span></label>
<label class="checkbox"><input type="checkbox" data-check="check" data-check-id="checkTest1"><span>선택3</span></label>

ui.form.spinner();

수량입력 최고수량 data-max=”5”

  <div class="ui-amts" data-min="1" data-max="5">
    <input type="text" value="1" class="amt" title="수량선택">
    <button type="button" class="bt minus">수량더하기</button>
    <button type="button" class="bt plus">수량빼기</button>
  </div>

ui.form.spined();

수량선택

<span class="ui-amtd" data-max="5"><input class="amt" value="3" type="number"></span>
<span class="ui-amtd" data-max="12"><input class="amt" value="5" type="number"></span>
<span class="ui-amtd" data-max="20"><input class="amt" value="15" type="number"></span>

ui.loading;

로딩중… ui.loading.show(); ui.loading.hide();

  ui.loading.show(); // 로딩열기
  ui.loading.hide(); // 로딩닫기

ui.datePick

달력 날짜 선택 - 일선택,주선택,월선택

<span class="input db ui-date"><input type="text"  placeholder="YYYY-MM-DD" class="datepicker" readonly></span>
<div class="weeks"><span id="START_DT"></span> ~ <span id="END_DT"></span></div>
<span class="ui-date input db week"><input type="text" id="schedWeek" value="2019-04-09" placeholder="YYYY-MM-DD" class="datepicker" readonly></span>
<span class="input db ui-date"><input type="text" class="datepicker_month" placeholder="YYYY-MM-DD" value="2019-06" readonly></span>

ui.tog

토글 UI

  <a href="javascript:;" data-ui-tog="btn" data-ui-tog-val="tog_sample1" class="btn">토글UI</a>
  <div data-ui-tog="ctn" data-ui-tog-val="tog_sample1">
      <p>토글내용 토글내용</p>
      <p>토글내용 토글내용</p>
  </div>

ui.lock.using();

화면 스크롤 잠금,풀기 (레이어팝업 띄울때 사용)

  ui.lock.using(true);  // 잠금
  ui.lock.using(false); // 풀기

쿠키설정,

  ui.cookie.set(cname, cvalue, exdays);  // cname(이름), cvalue(값), exdays(시간)
  ui.cookie.get(cname); // cname(이름)

버튼

<a href="javascript:;" class="btn xs">버튼</a>
<a href="javascript:;" class="btn sm">버튼</a>
<a href="javascript:;" class="btn md">버튼</a>
<a href="javascript:;" class="btn lg">버튼</a>
<a href="javascript:;" class="btn xl">버튼</a>
<a href="javascript:;" class="btn" disabled>버튼</a>
<button type="button" class="btn" disabled>버튼</button>

폼요소

<label class="checkbox"><input type="checkbox"><span class="txt">선택</span></label>
<label class="radio"><input type="radio" name="radio1"><span class="txt">선택</span></label>
<div class="ui-chk"><input type="checkbox" title="텍스트" checked><em></em></div>

입력

``` html

검색
</p>

안내