관리 메뉴

moozi

jQuerymobile01 본문

TIS_2016/HTML5_3기

jQuerymobile01

moozi 2016. 8. 4. 12:21

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQueryMobile</title>

    <!-- 뷰포트 -------------------------------->

    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <!--    jQuery mobile CSS -->

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <!-- jQuery -->

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <!-- jQuery mobile javascript ------>

    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


</head>

<body>

    <div data-role="page" data-theme="a" id="main">

        <div data-role="panel" data-display="overlay" data-position="right" id="menu">

            <h1>menu</h1>

            <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline" data-rel="close">close</a>

            <ul data-role="listview" data-inset="true">

                <li>로그인</li>

                <li>교육과정</li>

            </ul>

        </div>

        <div data-role="header">

            <h1>TIS정보기술교육센터</h1>

        </div>

        <div data-role="content">

          <a href="#menu" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-inline">menu</a>

          

            <ul data-role="listview" data-inset="true">

                <li><a href="#sub" data-icon="gear" data-transition="slide">웹표준 </a></li>

                <li><a href="#sub2" data-rel="dialog">자바</a></li>

                <li><a href="#">안드로이드</a></li>

                <li data-role="list-divider"></li>

                <li><a href="#">주말과정

                   <span class="ui-li-count">3</span>

                    </a>

                </li>

                <li data-icon="refresh"><a href="#login" data-rel="dialog">로그인</a></li>

            </ul>

            <ul data-role="listview" data-inset="true" data-filter="true">

                <li>html5</li>

                <li>javascript</li>

                <li>css3</li>

                <li>jquerMobile</li>

            </ul>

            <div data-role="collapsible-set">

                <div data-role="collapsible" data-collapsed="false">

                    <h1>구직자과정</h1>

                    <p>웹표준</p>

                    <p>자바</p>

                    <p>안드로이드</p>

                </div>

                 <div data-role="collapsible">

                    <h1>재직자과정</h1>

                    <p>웹퍼블리셔</p>

                    <p>프론트엔드</p>

                    <p>리눅스서버</p>

                </div>

            </div>

            <div class="ui-grid-a">

                <div class="ui-block-a">

                    <h1>왼쪽</h1>

                </div>

                <div class="ui-block-b">

                    <h1>오른쪽</h1>

                </div>

            </div>

            <div class="ui-grid-b">

                <div class="ui-block-a">

                    <h1>왼쪽</h1>

                </div>

                <div class="ui-block-b">

                    <h1>가운데</h1>

                </div>

                <div class="ui-block-c">

                    <h1>오른쪽</h1>

                </div>

            </div>

            <div class="ui-grid-c">

                <div class="ui-block-a">

                    <h1>왼쪽</h1>

                </div>

                <div class="ui-block-b">

                    <h1>가운데1</h1>

                </div>

                <div class="ui-block-c">

                    <h1>가운데2</h1>

                </div>

                <div class="ui-block-d">

                    <h1>오른쪽</h1>

                </div>

            </div>

            

            

        </div>

        <div data-role="footer">

            <h3>&copy;TIS Edu. All rights reserved.</h3>

        </div>

    </div>

    <div data-role="page" data-theme="a" id="sub">

        <div data-role="header">

            <h1>웹표준과정</h1>

        </div>

        <div data-role="content">

            <h3>웹표준과정</h3>

            웹표준과정은......

        </div>

        <div data-role="footer">

            <h3>&copy;TIS Edu. All rights reserved.</h3>

        </div>

    </div>

    <div data-role="page" data-theme="a" id="sub2">

        <div data-role="header">

            <h1>자바과정</h1>

        </div>

        <div data-role="content">

            <h3>자바과정</h3>

            자바과정은......

        </div>

        <div data-role="footer">

            <h3>&copy;TIS Edu. All rights reserved.</h3>

        </div>

    </div>

    <div data-role="page" id="login">

        <div data-role="header">

            <h1>로그인</h1>

        </div>

        <div data-role="content">

            <div>

                <input type="text" placeholder="id" name="id">

                <input type="password" placeholder="password" name="password">                

            </div>   

            <div class="ui-grid-a">

                <div class="ui-block-a">

                    <input type="button" value="로그인">

                </div>

                <div class="ui-block-b">

                    <input type="reset" value="취소">

                </div>

            </div>         

        </div>

    </div>

</body>

</html>

'TIS_2016 > HTML5_3기' 카테고리의 다른 글

8/5 video.html, introduce.html, introduce2.html  (0) 2016.08.05
jQueryMobile연습문제01  (0) 2016.08.04
jQuery연습문제03  (0) 2016.08.03
8/3 수업예제  (0) 2016.08.03
jQuery연습문제02  (0) 2016.08.02
Comments