font size

사이즈 별 폰트 class .fs-60

사이즈 별 폰트 class .fs-50

사이즈 별 폰트 class .fs-46

사이즈 별 폰트 class .fs-40

사이즈 별 폰트 class .fs-36

사이즈 별 폰트 class .fs-32

사이즈 별 폰트 class .fs-30

사이즈 별 폰트 class .fs-28

사이즈 별 폰트 class .fs-26

사이즈 별 폰트 class .fs-24

사이즈 별 폰트 class .fs-22

사이즈 별 폰트 class .fs-21

사이즈 별 폰트 class .fs-20

사이즈 별 폰트 class .fs-18

사이즈 별 폰트 class .fs-16

사이즈 별 폰트 class .fs-15

사이즈 별 폰트 class .fs-14

사이즈 별 폰트 class .fs-13

사이즈 별 폰트 class .fs-12

사이즈 별 폰트 class .fs-11

사이즈 별 폰트 class .fs-10

color

.text-primary
.text-secondary
.text-black
.text-white
.text-gray600
.bg-primary
.bg-secondary
.bg-black
.bg-white
.bg-gray600
.bg-gray550
.bg-gray500
.bg-gray100
.bg-gray80
.bg-gray70
.bg-gray60
.bg-gray50
.bg-gray40
.bg-gray30
.bg-gray20
.bg-gray10
.bg-gray5

! 기본 class를 포함해야 합니다

기본.border
.border-primary
.border-secondary
.border-black
.border-white
.border-gray600
.border-gray550
.border-gray500
.border-gray100
.border-gray80
.border-gray70
.border-gray60
.border-gray50
.border-gray40
.border-gray30
.border-gray20
.border-gray10
.border-gray5

button

! 기본 class를 포함해야 합니다

button size

button style


1
<button type="button" class="btn-i"><i class="i i-{class 추가}"></i><span class="hidden">검색하기</span></button></div>
cs

button color

button group

code
1
2
3
4
5
6
<div class="btn-group">
    <button type="button" class="btn btn-primary">조회</button>
    .
    .
    .
</div>
cs

input

input




1
2
3
<div class="form-default"><input type="text" value="input default"/></div>
<div class="form-default"><input type="text" value="input readoly" readonly/></div>
<div class="form-default"><input type="text" value="input disabled" disabled/></div>
cs

textarea




1
2
3
<div class="form-default"><textarea>textarea default</textarea></div>
<div class="form-default"><textarea readonly>textarea readonly</textarea></div>
<div class="form-default"><textarea disabled>textarea disabled</textarea></div>
cs

select




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="form-default">
    <select>
        <option>select default</option>
    </select>
</div>
<div class="form-default">
    <select class="readonly">
        <option>select readonly</option>
    </select>
</div>
<div class="form-default">
    <select disabled>
        <option>select disabled</option>
    </select>
</div>
cs

checkbox


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<label class="form-checkbox">
    <input type="checkbox">
    <span>checkbox default</span>
</label>
<label class="form-checkbox">
    <input type="checkbox" class="readonly">
    <span>checkbox readonly</span>
</label>
<label class="form-checkbox">
    <input type="checkbox" disabled>
    <span>checkbox disabled</span>
</label>
<div class="form-group">
<label class="form-checkbox">
    <input type="checkbox" checked>
    <span>checkbox checked default</span>
</label>
<label class="form-checkbox">
    <input type="checkbox" checked class="readonly">
    <span>checkbox checked readonly</span>
</label>
<label class="form-checkbox">
    <input type="checkbox" checked disabled>
    <span>checkbox checked disabled</span>
</label>
cs

radio


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<label class="form-radio">
    <input type="radio">
    <span>radio default</span>
</label>
<label class="form-radio">
    <input type="radio" class="readonly">
    <span>radio readonly</span>
</label>
<label class="form-radio">
    <input type="radio" disabled>
    <span>radio disabled</span>
</label>
<label class="form-radio">
    <input type="radio" checked>
    <span>radio checked default</span>
</label>
<label class="form-radio">
    <input type="radio" checked class="readonly">
    <span>radio checked readonly</span>
</label>
<label class="form-radio">
    <input type="radio" checked disabled>
    <span>radio checked disabled</span>
</label>
cs

form group


1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form-group">
    <div class="form-default">
        <!--
            input
            textarea
            selet
        -->
    </div>
    <button type="button" class="btn-i"><i class="i-search"></i><span class="hidden">검색하기</span></button>
    <!-- 
        button, text 등
    -->
</div>
cs

Calendar


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="form-group">
    <div class="form-default">
        <input type="text" title="거래일 시작 날짜 입력란" onclick="openCalendar(this, {returnFormat: 'yy-MM-dd'})"/>
    </div>
    <button type="button" class="btn-i"><i class="i-calendar"></i><span class="hidden">달력 팝업</span></button>
</div>
<!-- or -->
<div class="form-group">
    <div class="form-default">
        <input type="text" title="거래일 시작 날짜 입력란" onclick="openCalendar(this, {returnFormat: 'yy-MM-dd'})"/>
    </div>
    <button type="button" class="btn-i"><i class="i-calendar"></i><span class="hidden">달력 팝업</span></button>
    <p>~</p>
    <div class="form-default">
        <input type="text" title="거래일 종료 날짜 입력란" onclick="openCalendar(this, {returnFormat: 'yy-MM-dd'})"/>
    </div>
    <button type="button" class="btn-i"><i class="i-calendar"></i><span class="hidden">달력 팝업</span></button>
</div>
cs

table

대리점코드, 사업자번호, 상호, 고객번호, 고객상태, 단말기번호, 제품번호, 단말기 SUB ID, MID, 신용가맹점번호, 그룹코드, 점번호 지점명, 정산코드, 등록일 조회 테이블

대리점코드

13271884

사업자번호

101-02-57848

상호

커피750(도산점)

고객번호

010-3469-0086

고객상태

단말기번호

SA80302378

제품번호

SA80302378

단말기 SUB ID

aaa-01

MID

01

신용가맹점번호

p123456789

그룹코드

001

점코드

002

지점명

서울 역삼점

정산코드

100

등록일

~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table class="table">
    <caption></caption>
    <colgroup>
        <col>
        .
        .
        .
    </colgroup>
    <tbody>
        <tr>
            <th>
                ~
            </th>
            <td>
                ~
            </td>
            .
            .
            .
        </tr>
        
    </tbody>
</table>
cs

ibsheet


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<div id="sheetDiv" style="width: 100%; height: 500px;"></div>
 
<script>
    const ListView = (_=>{
        const init =_=> {
            // 시트 생성
            initSheet();
 
            searchListForFile();
        };
        
        /**
         * 시트 생성
         */
        const initSheet = () => {
            let OPT = {
                    "Cfg": {
                        "CanColMove":0
                        , "CanEdit":0
                        , InfoRowConfig: {
                            "Visible" : true
                            , "Layout": ["Paging", "Count",]
                            , "Space": "Bottom"
                            , "Format" : "총 TOTALROWS 건"
                        }
                        , "SearchMode": 4    // Server paging
                        , "PageLength": $("#pageSize").val()
                        , CustomScroll: 3
                        ,"HeaderMerge": 3
                    },
                    "Def": {
                        "Row": {
                            "Height": 34
                            , "TextSize": "14px"
                        }
                    },
                    
                    "Cols": [
                        {"Header":"No",            "Name":"No",           "Type":"Text", Align:"center", "Width":80}, 
                        {"Header":"대리점코드",     "Name":"대리점코드",    "Type":"Text", Align:"center", "Width":150}, 
                        {"Header":"고객번호",       "Name":"고객번호",      "Type":"Text", Align:"center", "Width":150}, 
                        {"Header":"사업자번호",     "Name":"사업자번호",    "Type":"Link", Align:"center", "Width":150, "TextStyle":1+4}, 
                        {"Header":"상호",           "Name":"상호",         "Type":"Text", Align:"left",   "Width":200}, 
                        {"Header":"주소",           "Name":"주소",         "Type":"Text", Align:"left",   "Width":300, "RelWidth":1}, 
                        {"Header":"그룹코드",       "Name":"그룹코드",      "Type":"Text", Align:"center", "Width":150}, 
                        {"Header":"점코드",         "Name":"점코드",       "Type":"Text", Align:"center", "Width":150}, 
                        {"Header":"상태",           "Name":"상태",         "Type":"Text", Align:"center", "Width":100}, 
                        {"Header":"단말기대수",     "Name":"단말기대수",    "Type":"Text", Align:"right",  "Width":100}
                    ],
                    
                };
 
                IBSheet.create({
                    id: "sheet"            // 시트 객체 ID
                    , el: "sheetDiv"    // 시트를 생성할 DIV객체 ID
                    , options: OPT        // 초기화 구문 변수
                });
        };
        /**
        * form 유효성 검증
        */
        const validateForm =_=> {
            return true;
        };
        
        /**
        * 리스트 조회
        */
        const searchList =_=> {
            if(!validateForm()){
                return;
            }
            const opt = {
                "url" : "/dummy/list.do"
                , "method" : "POST"
                , "pageParam" : "pageIndex"
                , "callback": (rtn)=> {
                    //alert('callback');
                }
            };
            sheet.doSearchPaging(opt);
        };
        /**
        * 리스트 조회
        */
        const searchListForFile =_=> {
            data = {"Total":200,"Data":[
                {"No":"1", "대리점코드":"1700", "고객번호":"0000000101", "사업자번호":"|101010100-2.html|1010123564", "상호":"싸립문을밀고들어서니", "주소":"서울 종로구 인사동 154-10", "그룹코드":"", "점코드":"", "상태":"정상", "단말기대수":"1", "row_count":200,},
            ]};
            sheet.loadSearchData(data, 1);
        };
 
        return {
            init
        };
    })();
    ListView.init();
</script>
cs

ibtab


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="deal_pannel_wrapper customer_pannel_wrapper tab-wrap" data-name="agent_pannel">
    <div data-name="ib-agent01"></div>
    <div data-name="ib-agent02"></div>
    <div data-name="ib-agent03"></div>
</div>
 
<script>
    let agentTab;
    agentTab = initTab("agentTab",{
        tabs: [
            {
                title: "신용거래"
                    , style: {
                        btnClose: false,
                        icon: {type: "none"}
                    }
            }, {
                title: "DDC정산" , 
                style: {
                        btnClose: false,
                        icon: {type: "none"}
                    }
            }, {
                title: "현금거래" , 
                style: {
                        btnClose: false,
                        icon: {type: "none"}
                    }
            }
        ]
        , contents: [
            {
                type: "iframe", 
                preLoad: false,
                contents: "파일이름"
            }, {
                type: "iframe", 
                preLoad: false,
                contents: "파일이름"
            }, {
                type: "iframe", 
                preLoad: false,
                contents: "101010100-5.html"
            }
        ],
        "themes": {
            "tabs": "bootstrap_blue",
            "contents": "bootstrap_blue",
        },
        contextMenu : {
            enable : false //콘텍스트메뉴 사용 안함 설정
        },
    },  sel('[data-name="ib-agent01"]'), sel('[data-name="ib-agent02"]'), sel('[data-name="ib-agent03"]'),
    sel('[data-name="ib-agent04"]'), sel('[data-name="ib-agent05"]'), sel('[data-name="ib-agent06"]'));
</script>
cs

layout

기본 lauyout


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<body class="layout">
    <!-------------- start :: skipnavi -------------->
    <div id="skipnavi">
        <a href="assets/assets/#container">본문영역 바로가기</a>
    </div>
    <!-------------- end :: skipnavi -------------->
    <!-------------- start :: header -------------->
    <header id="header">
        <div class="head-inner">
            <h1 class="logo"><a href="assets/assets/./index.html"><span class="hidden">한국 결제네트웍스</span></a></h1>
 
            <ul id="gnb" data-name="top_menu_wrapper">
                .
                .
                .
            </ul>
            
            <ul class="util-list">
                <li class="user-id"><p>sky1004</p></li>
                <li class="user-name"><p>홍길동</p></li>
                <li class="user-time">
                    <p class="time-box">
                        <button type="button" class="btn btn-md btn-r-50 btn-outline-gray40"><span data-name="session-info">1:00:00</span>(연장)</button>
                    </p>
                </li>
                <button type="button" class="btn btn-md btn-r-50 btn-outline-gray500">로그아웃</button>
            </ul>
        </div>
    </header>
    <!-------------- end :: header -------------->
 
    <!-------------- start :: main -------------->
    <main id="wrap">
        <section class="nav">
            <ul class="nav-list" data-tab-tit="nav">
                <li class="tab-item on">
                    <a data-tab="nav-01" ><span class="hidden">소개</span></a>
                </li>
                <li class="tab-item">
                    <a data-tab="nav-02" ><span class="hidden">즐겨찾기</span></a>
                </li>
                <li>
                    <a class="btn-lnb"><span class="hidden">메뉴 닫기</span></a>
                </li>
            </ul>
 
            <div class="tab-content" data-tab-tit="nav">
                <div class="tab-pane on" data-tab-con="nav-01" data-type="nav_wrapper" data-name="nav_wrapper">
                    <ul class="lnb">
                        .
                        .
                        .
                    </ul>
                </div>
                <div class="tab-pane" data-tab-con="nav-02" data-type="nav_wrapper" data-name="favorite_wrapper">
                    <ul class="lnb" >
                        .
                        .
                        .
                    </ul>
                </div>
            </div>
            
        </section>
 
        <section class="container">
            
            <div class="main-pannel" data-name="exPannel">
                <a class="btn-lnb"><span class="hidden">메뉴 열기</span></a>
                <div class="container-top">
                    <div data-name="ib-home1"></div>
                    <div class="container-head">
                        <div class="mo">
                            <button type="button" class="btn-i"><i class="i-prev"></i><span class="hidden">이전 페이지로 가기</span></button>
                            <button type="button" class="btn-i btn-lnb"><i class="i-menu"></i><span class="hidden">메뉴 열기</span></button>
                        </div>
 
                        <p class="title">거래내역 관리</p>
        
                        <div class="util-button-box">
                            <button type="button" class="btn btn-outline-gray70 btn-i" onclick="MainTab.prev()"><i class="i-pagePrev"></i><span class="hidden">이전</span></button>
                            <button type="button" class="btn btn-outline-gray70 btn-i" onclick="MainTab.next()"><i class="i-pageNext"></i><span class="hidden">다음</span></button>
                            <button type="button" class="btn btn-outline-gray70 btn-i" onclick="MainTab.close()"><i class="i-pageClose"></i><span class="hidden">닫기</span></button>
                            <button type="button" class="btn btn-outline-gray70 btn-i" onclick="MainTab.toStared()"><i class="i-pageFavor"></i><span class="hidden">즐겨찾기</span></button>
                            <button type="button" class="btn btn-outline-gray70 btn-i" onclick="MainTab.getHelp()"><i class="i-pageHelp"></i><span class="hidden">도움말</span></button>
                            <button type="button" class="btn btn-outline-gray70 btn-i btn-lnb"><i class="i-pageMenu"></i><span class="hidden">전체메뉴</span></button>
                        </div>
                    </div>
                </div>
                <div data-name="ib-contents1">
                    <!-------------- iframe으로 컨텐츠가 들어가는 공간 -------------->
                    .
                    .
                    .
                </div>
                <script>
                    let tab1;
                    tab1 = initTab("tabView1",{
                        tabs: [
                            {
                                title: "HOME"
                                    , style: {
                                        btnClose: false,
                                    }
                            }, 
                            {
                                title: "거래내역 관리"
                                    , style: {
                                        btnClose: true,
                                    }
                            }
                            
                        ]
                        , contents: [
                            {
                                type: "iframe", 
                                preLoad: false,
                                contents: "html/sample/101010100-1.html"
                                
                            }, 
                            {
                                type: "iframe", 
                                preLoad: false,
                                contents: "html/sample/101010100-2.html"
                            }
                        ],
                        contextMenu : {
                            enable : false //콘텍스트메뉴 사용 안함 설정
                        },
                        // layout : ["dropdown"]
                    },  sel('[data-name="ib-home1"]'), sel('[data-name="ib-contents1"]'));
                </script>
            </div>
 
        </section>
        
    </main>
    <!-------------- end :: main -------------->
    
</body>
cs

2depth content


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
<!-------------- start :: content-wrap -------------->
<div class="content-wrap">
    <!-------------- start :: content -------------->
    <div class="content">
    
        <div class="box">
            .
            .
            .
        </div>
        <div class="box">
            .
            .
            .
        </div>
    </div>
    <!-------------- end :: content -------------->
    <!-------------- start :: footer -------------->
    <footer id="footer">
        <div class="footer-inner">                
            <ul>
                <li>한국결제네트웍스 유한회사</li>
                <li>KPN Core Fintech 시스템</li>
                <li>고객센터 전화번호 00-0000-0000</li>
                <li>운영시간 (평일 09:00 ~ 17:30)</li>
                <li>FAX : 02)2287-3009</li>
            </ul>
            <p>Copyright © Korea Payment Network Limited all Right Reserved</p>
        </div>
    </footer>
    <!-------------- end :: footer -------------->
</div>
<!-------------- end :: content-wrap -------------->
</body>
 
cs

2depth content - tab


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<body>
    <div class="content-wrap tab-wrap">
        <div class="content">
            <div id="sheetDiv" style="width: 100%; height: 500px;"></div>
            <script>
                const ListView = (_=>{
                    const init =_=> {
                        // 시트 생성
                        initSheet();
 
                        searchListForFile();
                    };
                    
                    /**
                     * 시트 생성
                     */
                    const initSheet = () => {
                        let OPT = {
                                "Cfg": {
                                    "CanColMove":0
                                    , "CanEdit":0
                                    , InfoRowConfig: {
                                        "Visible" : true
                                        , "Layout": ["Paging", "Count",]
                                        , "Space": "Bottom"
                                        , "Format" : "총 TOTALROWS 건"
                                    }
                                    , "SearchMode": 4    // Server paging
                                    , "PageLength": $("#pageSize").val()
                                    , CustomScroll: 3
                                    ,"HeaderMerge": 3
                                },
                                "Def": {
                                    "Row": {
                                        "Height": 34
                                        , "TextSize": "14px"
                                    }
                                },
                                
                                "Cols": [
                                    {"Header":"No",            "Name":"No",           "Type":"Text", Align:"center", "Width":80}, 
                                    {"Header":"대리점코드",     "Name":"대리점코드",    "Type":"Text", Align:"center", "Width":150}, 
                                    {"Header":"고객번호",       "Name":"고객번호",      "Type":"Text", Align:"center", "Width":150}, 
                                    {"Header":"사업자번호",     "Name":"사업자번호",    "Type":"Link", Align:"center", "Width":150, "TextStyle":1+4}, 
                                    {"Header":"상호",           "Name":"상호",         "Type":"Text", Align:"left",   "Width":200}, 
                                    {"Header":"주소",           "Name":"주소",         "Type":"Text", Align:"left",   "Width":300, "RelWidth":1}, 
                                    {"Header":"그룹코드",       "Name":"그룹코드",      "Type":"Text", Align:"center", "Width":150}, 
                                    {"Header":"점코드",         "Name":"점코드",       "Type":"Text", Align:"center", "Width":150}, 
                                    {"Header":"상태",           "Name":"상태",         "Type":"Text", Align:"center", "Width":100}, 
                                    {"Header":"단말기대수",     "Name":"단말기대수",    "Type":"Text", Align:"right",  "Width":100}
                                ],
                                
                            };
 
                            IBSheet.create({
                                id: "sheet"            // 시트 객체 ID
                                , el: "sheetDiv"    // 시트를 생성할 DIV객체 ID
                                , options: OPT        // 초기화 구문 변수
                            });
                    };
                    /**
                    * form 유효성 검증
                    */
                    const validateForm =_=> {
                        return true;
                    };
                    
                    /**
                    * 리스트 조회
                    */
                    const searchList =_=> {
                        if(!validateForm()){
                            return;
                        }
                        const opt = {
                            "url" : "/dummy/list.do"
                            , "method" : "POST"
                            , "pageParam" : "pageIndex"
                            , "callback": (rtn)=> {
                                //alert('callback');
                            }
                        };
                        sheet.doSearchPaging(opt);
                    };
                    /**
                    * 리스트 조회
                    */
                    const searchListForFile =_=> {
                        data = {"Total":200,"Data":[
                            {"No":"1", "대리점코드":"1700", "고객번호":"0000000101", "사업자번호":"|101010100-2.html|1010123564", "상호":"싸립문을밀고들어서니", "주소":"서울 종로구 인사동 154-10", "그룹코드":"", "점코드":"", "상태":"정상", "단말기대수":"1", "row_count":200,},
                        ]};
                        sheet.loadSearchData(data, 1);
                    };
 
                    return {
                        init
                    };
                })();
                ListView.init();
            </script>
 
 
        </div>
    </div>
</body>
cs

modal

alert

confirm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!-------------- start :: alert 팝업 -------------->
<template data-name="dialog_alert">
    <div class="modal modal-sm">
        <div class="modal-overlay">
            <div class="modal-content">
                <div class="modal-head">
                    <h3 class="modal-tit" data-name="title">알림!</h3>
                </div>
                <div class="modal-body" data-name="body">
                    내용이 나오는곳
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-lg btn-primary" data-name="__alert_btn__" onclick="AlertDialog.close();">확인</button>
                </div>
            </div>
        </div>
    </div>
</template>
<!-------------- end :: alert 팝업 -------------->
<!-------------- start :: confirm 팝업 -------------->
<template data-name="dialog_confirm">
    <div class="modal modal-sm">
        <div class="modal-overlay">
            <div class="modal-content">
                <div class="modal-head">
                    <h3 class="modal-tit" data-name="title">알림!</h3>
                </div>
                <div class="modal-body" data-name="body">
                    내용이 나오는곳
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-gray70" onclick="ConfirmDialog.close();" >취소</button>
                    <button type="button" class="btn btn-primary" data-name="__confirm_btn__" onclick="ConfirmDialog.confirm();">확인</button>
                </div>
            </div>
        </div>
    </div>
</template>
<!-------------- end :: confirm 팝업 -------------->
<script>
    const __initDialog =_=>{
        
        // Alert Dialog 버튼
        $('#alertBtn').click(_=>{
            _alert("메시지입니다.");
        });
        $('#alertBtn2').click(_=>{
            _alert("메시지입니다.", _=>{
                        _alert("alert callback 입니다.");
                    });
        });
        $('#alertBtn2-2').click(_=>{
            _alert("메시지입니다.", _=>{
                        _confirm("alert 의 confirm callback 입니다.", _=> {
                            _alert("성공");
                        });
                    });
        });
        $('#alertBtn3').click(_=>{
            _alert("메시지입니다. 1");
            _alert("메시지입니다. 2");
            _alert("메시지입니다. 3");
        });
        
        // Confirm Dialog 버튼
        $('#confirmBtn').click(_=>{
            _confirm("callback 없는 confirm");
        });
        $('#confirmBtn2').click(_=>{
            _confirm("다운로드하시겠습니까?", downExcel);
        });
        $('#confirmBtn2-2').click(_=>{
            _confirm("다운로드하시겠습니까? confirm alert test", _=> {
                        _alert("confirm 후 alert 호출");
                    }
                    , _=>{
                        _alert("취소했습니다.");
                    });
        });
        $('#confirmBtn3').click(_=>{
            _confirm("다운로드하시겠습니까? (취소 test)", downExcel
                    , _=>{
                        _alert("취소했습니다.");
                    });
        });
        $('#confirmBtn4').click(_=>{
            _confirm("confirm 1");
            _confirm("confirm 2");
            _confirm("confirm 3");
        });
    
        const downExcel =_=>{
            _alert("엑셀 다운로드 합니다.");
        };
    };
    __initDialog();
</script>
cs

modla size


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!-- 기본 모달구조 -->
<div class="modal modal" id="modal">
    <div class="modal-overlay">
        <div class="modal-content">
            <div class="modal-head">
                <h3 class="modal-tit">기본 모달</h3>
                <a href="javascript:void(0);" class="modal-btn" onclick="$(this).parent().parent().parent().parent().hide();"><span class="hidden">닫기</span></a>
            </div>
            <div class="modal-body">
                .
                .
                .
            </div>
        </div>
    </div>
</div>
 
 
<!-- 작은 모달구조 -->
<div class="modal modal-sm" id="modal-sm">
    <div class="modal-overlay">
        <div class="modal-content">
            <div class="modal-head">
                <h3 class="modal-tit">작은 모달</h3>
                <a href="javascript:void(0);" class="modal-btn" onclick="$(this).parent().parent().parent().parent().hide();"><span class="hidden">닫기</span></a>
            </div>
            <div class="modal-body">
                .
                .
                .
            </div>
        </div>
    </div>
</div>
 
<!-- 큰 모달구조 -->
<div class="modal modal-lg" id="modal-lg">
    <div class="modal-overlay">
        <div class="modal-content">
            <div class="modal-head">
                <h3 class="modal-tit">넓은 모달</h3>
                <a href="javascript:void(0);" class="modal-btn" onclick="$(this).parent().parent().parent().parent().hide();"><span class="hidden">닫기</span></a>
            </div>
            <div class="modal-body">
                .
                .
                .
            </div>
        </div>
    </div>
</div>
<!-- 모달 안 컨텐츠 구성 예시 -->
<div class="modal modal-lg" id="modal-ex">
    <div class="modal-overlay">
        <div class="modal-content">
            <div class="modal-head">
                <h3 class="modal-tit">넓은 모달</h3>
                <a href="javascript:void(0);" class="modal-btn" onclick="$(this).parent().parent().parent().parent().hide();"><span class="hidden">닫기</span></a>
            </div>
            <div class="modal-body">
                <div class="box">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary">조회</button>
                        <button type="button" class="btn btn-gray70">초기화</button>
                    </div>
 
                    <form>
                        <fieldset>
                            <legend>정산코드 조회 폼</legend>
                            <table class="table">
                                <colgroup>
                                    <col style="width: 25%;">
                                    <col style="width: 25%;">
                                    <col style="width: 25%;">
                                    <col style="width: 25%;">
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <th>
                                            <p>대리점코드</p>
                                        </th>
                                        <td>
                                            <div class="form-default">
                                                <input type="text" />
                                            </div>
                                        </td>
                                        <th>
                                            <p>정산코드</p>
                                        </th>
                                        <td>
                                            <div class="form-default">
                                                <input type="text" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            <p>계약유형</p>
                                        </th>
                                        <td>
                                            <div class="form-default">
                                                <select>
                                                    <option value="1">전체</option>
                                                    <option value="2">계약 완료</option>
                                                </select>
                                            </div>
                                        </td>
                                        <th>
                                            <p>계약명</p>
                                        </th>
                                        <td>
                                            <div class="form-default">
                                                <input type="text" />
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
 
                        </fieldset>
                    </form>
                </div>
                <div class="box">
                    <div id="code_sheet" style="width:100%; height:500px;"></div>
                </div>
                <script>
                    const DanmalView = (_=>{
                        const init =_=> {
                            // 시트 생성
                            initSheet();
 
                            searchListForFile();
                        };
                        
                        /**
                         * 시트 생성
                         */
                        const initSheet = () => {
                            let OPT = {
                                    "Cfg": {
                                        "CanColMove":0
                                        , "CanEdit":1
                                        , InfoRowConfig: {
                                            "Visible" : true
                                            , "Layout": ["Paging", "Count",]
                                            , "Space": "Bottom"
                                            , "Format" : "총 TOTALROWS 건"
                                        }
                                        , "SearchMode": 4    // Server paging
                                        , "PageLength": $("#pageSize").val()
                                        , CustomScroll: 3
                                    },
                                    "Def": {
                                        "Row": {
                                            "Height": 34
                                            , "TextSize": "14px"
                                        }
                                    },
                                    
                                    "Cols": [
                                        {"Header":"정산코드",     "Name":"정산코드",        "Type":"Button",      Align:"center",        "Width":150, TextStyle:1+4, "Button":"Button"},
                                        {"Header":"계약유형",   "Name":"계약유형",      "Type":"Text",        Align:"center",        "Width":150},
                                        {"Header":"계약명",         "Name":"계약명",           "Type":"Text",        Align:"center",        "Width":500},
                                        {"Header":"대리점코드",       "Name":"대리점코드",         "Type":"Text",        Align:"center",        "Width":100},
                                        {"Header":"거래처명",     "Name":"거래처명",       "Type":"Text",        Align:"center",        "Width":400},
                                    ],
                                    
                                };
 
                                IBSheet.create({
                                    id: "code_sheet"            // 시트 객체 ID
                                    , el: "code_sheet"    // 시트를 생성할 DIV객체 ID
                                    , options: OPT        // 초기화 구문 변수
                                });
                        };
                        /**
                        * form 유효성 검증
                        */
                        const validateForm =_=> {
                            return true;
                        };
                        
                        /**
                        * 리스트 조회
                        */
                        const searchList =_=> {
                            if(!validateForm()){
                                return;
                            }
                            const opt = {
                                "url" : "/dummy/list.do"
                                , "method" : "POST"
                                , "pageParam" : "pageIndex"
                                , "callback": (rtn)=> {
                                    //alert('callback');
                                }
                            };
                            code_sheet.doSearchPaging(opt);
                        };
                        /**
                        * 리스트 조회
                        */
                        const searchListForFile =_=> {
                            data = {"Total":200,"Data":[
                                {"정산코드":"I000214", "계약유형":"판매", "계약명":"버거킹_비케이알 개별", "대리점코드":"0000", "거래처명":""},
                            ]};
                            code_sheet.loadSearchData(data, 1);
                        };
 
                        return {
                            init
                        };
                    })();
                    DanmalView.init();
                </script>
            </div>
        </div>
    </div>
</div>
cs

주소 조회 팝업

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="modal modal-sm" id="address_modal">
    <div class="modal-overlay">
        <div class="modal-content">
            <div class="modal-head">
                <h3 class="modal-tit">주소 검색</h3>
                <a href="javascript:void(0);" class="modal-btn" onclick="$(this).parent().parent().parent().parent().hide();"><span class="hidden">닫기</span></a>
            </div>
            <div class="modal-body p-0">
                <div id="address_wrap"></div>
            </div>
        </div>
    </div>
</div>
cs

ECT.

bootstrap

! 관련 클래스 리스트는 해당 사이트 참고 부탁드립니다.(ex- row,col, d-flex 등등)

dabth

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- assets/js/main_dev_menu_data.js 에서 구성 -->
 
const _getMenuDatas =_=> {
    return {
            "__head__": {}
        , "101000000": {depth: "1", sort: 1, menuCode: "101000000", parentCode: "100000000", menuName: "뱅킹서비스", url: ""}
        , "102000000": {depth: "1", sort: 2, menuCode: "102000000", parentCode: "100000000", menuName: "선불지급수단 서비스", url: ""}
        , "103000000": {depth: "1", sort: 3, menuCode: "103000000", parentCode: "100000000", menuName: "뱅킹서비스", url: ""}
        , "104000000": {depth: "1", sort: 4, menuCode: "104000000", parentCode: "100000000", menuName: "선불지급수단 서비스", url: ""}
        , "101010000": {depth: "2", sort: 1, menuCode: "101010000", parentCode: "101000000", menuName: "가맹점관리", url: ""}
        , "101020000": {depth: "2", sort: 2, menuCode: "101020000", parentCode: "101000000", menuName: "거래조회", url: ""}
        , "101010100": {depth: "3", sort: 1, menuCode: "101010100", parentCode: "101010000", menuName: "가맹점조회", url: "html/sample/101010100-1.html"}
        , "101010102": {depth: "3", sort: 1, menuCode: "101010102", parentCode: "101010000", menuName: "가맹점조회 - 상세페이지", url: "html/sample/101010100-2.html"}
        , "101010103": {depth: "3", sort: 1, menuCode: "101010103", parentCode: "101010000", menuName: "가맹점조회 - 상세페이지 - 신용거래 탭", url: "html/sample/101010100-3.html"}
        , "101010104": {depth: "3", sort: 1, menuCode: "101010104", parentCode: "101010000", menuName: "팝업", url: "html/sample/popup01.html"}
        , "101020100": {depth: "3", sort: 1, menuCode: "101020100", parentCode: "101020000", menuName: "가맹점별 거래조회", url: "html/sample/popup02.html"}
        , "101020102": {depth: "3", sort: 1, menuCode: "101020102", parentCode: "101020000", menuName: "이용자별 거래조회", url: ""}
    };
};
cs