<element와 accumulate 차이점>
 
두 개다 name(key)와 value로 데이터를 넣어주는 형식이다.
 
사용 방식은 같으나 
accumulate는 같은 key가 들어왔을 때 배열 식으로 계속해서 value를 붙여주는 형식을 띄고
element는 같은 key가 들어왔을 때 value를 이전 value에 덮여씌워 주는 형식이다.
ex)
소스:
 
               JSONdata data1 = new JSONdata("data1");
               JSONdata data2 = new JSONdata("data2");
               JSONdata data3 = new JSONdata("data3");
               JSONdata data4 = new JSONdata("data4");
              
               // 추가
               jsonByDTO.accumulate("ticketIDList", data1);
               jsonByDTO.accumulate("ticketIDList", data2);
               jsonByDTO.element("ticketIDList1", data3);
               jsonByDTO.element("ticketIDList1", data4);
              
 
               logger.info("DTO 사용: " + jsonByDTO.toString());
 
 
결과화면:
 
INFO : kr.co.mcom.JSONController - DTO 사용: {"ticketIDList":[{"ticketID":"data1"},{"ticketID":"data2"}],"ticketIDList1":{"ticketID":"data4"}}





 
 
결과화면을 보면 ticketIDList에 accumulate를 사용한 것을 볼 수 있는데, 중복된 key값을 사용했을 경우 배열로 결과가 나오는 것을 확인 할 수 있다. 하지만 element를 사용했을 때, 중복된 key값을 사용한 경우 마지막에 대입한 value가 들어가 있는 것을 볼 수 있다.


출처: http://javafactory.tistory.com/814 [FreeLife의 저장소]
블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag java, 자바

StringBuilder는 StringBuffer와 같은 역활을 합니다. 

차이점은 StringBuilder는 스레디 세이프하지 않기 때문에 단일 스레드 환경에서만 사용을 해야 합니다. 

대신 StringBuffer보다는 좀 더 빠른 성능을 보여 줍니다. 

public static void main(String[] args) { 
    StringBuilder sb = new StringBuilder(); 
    sb.append(true); 
    System.out.println(sb); 
     
    sb.append('a'); 
    System.out.println(sb); 
     
    char[] chars = new char[] { 'd', 'e', 'f' }; 
    sb.append(chars); 
    System.out.println(sb); 
     
    int i = 105; 
    sb.append(i); 
    System.out.println(sb); 
     
    Object obj = new String("Obj"); 
    sb.append(obj); 
    System.out.println(sb); 
     
    String str = new String("Str"); 
    sb.append(str); 
    System.out.println(sb); 


출력 결과는 아래와 같습니다. 

true 
truea 
trueadef 
trueadef105 
trueadef105Obj 
trueadef105ObjStr


String, StringBuffer, StringBuilder에 관한 실험 글


출처 : http://tip.daum.net/openknow/59160272

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

1.   $.mobile.changePage() 메소드


    


2.   $.mobile.loadPage() 메소드





3.   $.mobile.loading() 메소드



19-01.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>19-01</title>

    <link rel="stylesheet"  href="js/jquery.mobile-1.3.2.css" />

    <script src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript">

      $(document).on('mobileinit', function() {

        $.mobile.loader.prototype.options.theme = "a";

        $.mobile.loader.prototype.options.text = "loading";

        $.mobile.loader.prototype.options.textonly = false;

        $.mobile.loader.prototype.options.textVisible = false;

      });

      

      $(document).on('pagecreate', function() {

        

        //디폴트임

        $('#default').on('tap', function(event) {

          $.mobile.loading('show', {

            theme: $.mobile.loader.prototype.options.theme,

            text: $.mobile.loader.prototype.options.text,

            textonly: $.mobile.loader.prototype.options.textonly,

            textVisible: $.mobile.loader.prototype.options.textVisible

          });

        });

        

        // 바꿔봄

        $('#textonly').on('tap', function(event) {

          $.mobile.loading('show', {

            theme: $.mobile.loader.prototype.options.theme,

            text: "텍스트만 표시되는 로더",

            textonly: true,

            textVisible: true

          });

        });


        //텍스트를 바꿔봄 테마도 바꿈

        $('#theme_a').on('tap', function(event) {

          $.mobile.loading('show', {

            theme: "a",

            text: "페이지 로딩 (Theme a)",

            textonly: false,

            textVisible: true

          });

        });

        

        $('#theme_b').on('tap', function(event) {

          $.mobile.loading('show', {

            theme: "b",

            text: "페이지 로딩 (Theme b)",

            textonly: false,

            textVisible: true

          });

        });

        

        

        //진행 상태를 제거해라

        $('#hide').on('tap', function(event) {

          $.mobile.loading('hide');

        });

        

      });   

                

    </script>

    <!--역시 mobile 참조하기 전에 스크립트를 짜야된다. -->

    <script src="js/jquery.mobile-1.3.2.js"></script>

  </head>


  <body>

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

      <div data-role="header" data-position="fixed">

        <h3>Utilities</h3> 

      </div>

      <div data-role="content">

        <p>메시지 로더</p>

        <div>

          <button id="default">Default Loader</button>

          <button id="textonly">Text Only</button>

          <button id="theme_a" data-theme="a">Theme a</button>

          <button id="theme_b" data-theme="b">Theme b</button>

          <button id="hide">Hide</button>

        </div>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력화면




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

1.   mobileinit 이벤트


위와 같이 중간에 넣어야 한다.




2.   기본 환경 설정


3.   페이지 초기화 이벤트 (pagebeforecreate, pagecreate, pageinit)




4.   페이지 변경 이벤트 (pagebeforechange, page change, pagechangefailed)



5.   페이지 전환 이벤트 (pagebeforeshow, pagebeforehide, pageshow, pagehide)




6.   페이지 로드 이벤트(pagebeforeload, pageload, pageloadfailed)



7.   tap, taphold 이벤트



8.   swipe, swipeleft, swiperight 이벤트





9.   orientationchange 이벤트




18-01.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>18-01</title>

    <link rel="stylesheet"  href="js/jquery.mobile-1.3.2.css" />

    <script src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript">   

        // mobileinit 이벤트가 발생할 경우의 처리

        $(document).on('mobileinit', function(event) {

                 // 기본 화면 전환이 fade 것을 slide 변경합니다.

                 //extend 이용해서 쓸수있다.

          $.extend($.mobile, {

            defaultPageTransition : "slide",

          });

          

          console.log(event.type);

        });

        

        // 페이지 초기화 이벤트 발생

        $(document).on({

          pagebeforecreate : function(event) { console.log(event.type);},

          pagecreate : function(event) { console.log(event.type);},

          pageinit : function(event) { console.log(event.type);}

        });

        

        // 페이지 변경 이벤트 발생

        $(document).on({

          pagebeforechange : function(event) { console.log(event.type);},

          pagechange : function(event) { console.log(event.type);},

          pagechangefailed : function(event) { console.log(event.type);},

        });

        

        // 페이지 전환 이벤트 발생

        $(document).on({

          pagebeforeshow : function(event) { console.log(event.type);},

          pageshow : function(event) { console.log(event.type);},

          pagebeforehide : function(event) { console.log(event.type);},

          pagehide : function(event) { console.log(event.type);}

        });       

    

        // 페이지 로드 이벤트 발생

        $(document).on({

          pagebeforeload : function(event) { console.log(event.type);},

          pageload : function(event) { console.log(event.type);},

          pageloadfailed : function(event) { console.log(event.type);}

        });

        

        

    </script>

    <!--mobile 자바스크립트를 참조하기 전에 반드시 해야한다. -->

    <script src="js/jquery.mobile-1.3.2.js"></script>

  </head>


  <body>

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

      <div data-role="header" data-position="fixed">

        <h3>Events</h3> 

      </div>

      <div data-role="content">

        <p>첫번째 페이지</p>

        <div>

          <a href="#second" data-role="button"> 번째 페이지로</a>

          <a href="18-02.html" data-role="button"> 번째 페이지(외부)</a>    

        </div>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

    <div data-role="page" id="second" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>Events</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지</p>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



18-02.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>18-03</title>

  </head>


  <body>

    <div data-role="page" id="third" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>Events</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지(외부)</p>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력화면

아래 콘솔화면에 뜨는 것을 볼 수 있다.



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

1.   레이아웃 그리드


ui-block-a 클래스가 가장 맨 앞임





2.   콜렙서블 컨텐트 블록






3.   콜렙서블 셋(아코디언)



4.   테마롤러 디자인하기





테마롤러 사용법


http://themoeroller.jquerymobile.com으로 접속한뒤


사용하는 jquery 버젼을 설정해준다.


테마롤러를 이용하면 사용자 정의 css파일을 얻을 수 있다.



위의 팔레트에서 드래그앤 드롭으로 아래와같이 커스터마이징 테마를 쉽게 만들 수 있다.



다운로드 버튼을 누르면



다음과 같이 나와서 테마 이름을 쓰고


<link rel=”stylesheet” href=”css/themes/my-custom-theme.css”/>를 추가해서 써야된다고 써있다.


다운받은 파일을 풀어보면 다음과 같이 나온다.



themes폴더를 카피해서 앱타나 스튜디오 프로젝트에 넣는다.




여기서 프로젝트.html파일에


첫번째는 자기가 만든 테마.css파일을 넣고 두번째는 jquery.mobile.structure-1.3.2.css를 반드시 넣어야한다. (커스텀 테마적용시!)


<link rel="stylesheet" href="themes/kch.css" />

<link rel="stylesheet"  href="js/jquery.mobile.structure-1.3.2.css" />


 


출력화면을 먼저 살펴보면 다음과 같이



적용됨을 알 수 있다.


17-01.html


<!DOCTYPE html>

<html lang="en">

        <head>

        <meta charset="utf-8">

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

        <title>17-01</title>

        <link rel="stylesheet" href="themes/kch.css" />

        <link rel="stylesheet"  href="js/jquery.mobile.structure-1.3.2.css" />

        <script src="js/jquery-1.11.1.js"></script>

        <script src="js/jquery.mobile-1.3.2.js"></script>

        </head>

        <body>

        <div data-role="page" id="formtheme" data-add-back-btn="true" data-theme="a">

        <div data-role="header" data-position="fixed" data-theme="a">

        <h3> 테마 적용</h3>

        <a href="#index" data-role="button" data-icon="home"

        data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

        </div>

        <div data-role="content" data-theme="a">

        <form name="myform">

        <div data-role="fieldcontain">

        <label for="textinput">텍스트 입력 필드</label>

        <input type="text" id="textinput" placeholder="입력하세요."/>

        </div>

        <div data-role="fieldcontain">

        <label for="slider">슬라이더</label>

        <input type="range" id="slider" value="0" min="0" max="100" step="1"/>

        </div>

                <div data-role="fieldcontain">

        <label for="flipswitch">플립 토글 스위치</label>

        <select name="flipswitch" id="flipswitch" data-role="slider">

        <option value="off">Off</option>

        <option value="on">On</option>

        </select>

        </div>

        <div data-role="fieldcontain">

        <fieldset data-role="controlgroup">

        <legend>

        라디오 버튼(세로)

        </legend>

        <input type="radio" name="radiov" value="선택 #1" id="radio1" checked="checked"/>

        <label for="radio1">선택 #1</label>

        <input type="radio" name="radiov" value="선택 #2" id="radio2"/>

        <label for="radio2">선택 #2</label>

        <input type="radio" name="radiov" value="선택 #3" id="radio3"/>

        <label for="radio3">선택 #3</label>

        </fieldset>

        </div>

                <div data-role="fieldcontain">

        <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>

        라디오 버튼(가로)

        </legend>

        <input type="radio" name="radioh" value="선택 #1" id="radio4" checked="checked"/>

        <label for="radio4">#1</label>

        <input type="radio" name="radioh" value="선택 #2" id="radio5"/>

        <label for="radio5">#2</label>

        <input type="radio" name="radioh" value="선택 #3" id="radio6"/>

        <label for="radio6">#3</label>

        </fieldset>

                </div>

        <div data-role="fieldcontain">

        <fieldset data-role="controlgroup">

        <legend>

        체크박스 버튼

        </legend>

        <input type="checkbox" name="checkbox1" value="선택 #1" id="checkbox1"/>

        <label for="checkbox1">선택 #1</label>

        <input type="checkbox" name="checkbox2" value="선택 #2" id="checkbox2"/>

        <label for="checkbox2">선택 #2</label>

        <input type="checkbox" name="checkbox3" value="선택 #3" id="checkbox3"/>

        <label for="checkbox3">선택 #3</label>

        </fieldset>

        </div>

        <div data-role="fieldcontain">

        <label for="selectnative">셀렉트 메뉴(native)</label>

        <select name="selectnative" id="selectnative">

        <option value="">선택하세요</option>

        <option value="선택 #1">선택 #1</option>

        <option value="선택 #2">선택 #2</option>

        <option value="선택 #3">선택 #3</option>

        <option value="선택 #4">선택 #4</option>

        </select>

        </div>

        <div data-role="fieldcontain">

        <label for="selectjqm">셀렉트 메뉴(jqm)</label>

        <select name="selectjqm" id="selectjqm" data-native-menu="false" multiple="multiple">

        <option value="">선택하세요</option>

        <option value="선택 #1">선택 #1</option>

        <option value="선택 #2">선택 #2</option>

        <option value="선택 #3">선택 #3</option>

        <option value="선택 #4">선택 #4</option>

        </select>

        </div>

        </form>

        <label for="columngrid">컬럼 레이아웃 그리드</label>

        <div name="columngrid" id="columngrid">

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

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

        <button data-theme="c" data-icon="arrow-l" >

        Previous

        </button>

        </div>

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

        <button data-theme="c" data-icon="arrow-r" data-iconpos='right'>

        Next

        </button>

        </div>

        </div>

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

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

        <button data-theme="c">

        Cancel

        </button>

        </div>

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

        <button data-theme="a">

        No

        </button>

        </div>

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

                <button data-theme="b">

        Yes

        </button>

        </div>

        </div>

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

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

        <button data-theme="b">

        More

        </button>

        </div>

        </div>

        </div>

        <label for="collapsibleblock">콜랩서블 컨텐트 블록</label>

        <!-- collapsible data-collpased="false"p태그는 paragraph 문단-->

        <div name="collapsibleblock" id="collapsibleblock" data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">

                <h3>제목</h3>

        <p>

        컨텐트

        </p>


        <div data-role="collapsible" data-theme="c" data-content-theme="c">

        <h3>제목</h3>

        <p>

        컨텐트

        </p>

        <div data-role="collapsible" data-theme="d" data-content-theme="d">

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        </div>


        <div data-role="collapsible" data-content-theme="c">

        <h3>제목</h3>

        <form action="#" method="get">

        <div data-role="fieldcontain">

        <label for="textarea">내용:</label>

        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

        </div>

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

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

        <button type="reset" data-theme="c">

        취소

        </button>

        </div>

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

        <button type="submit" data-theme="b">

        전송

        </button>

        </div>

        </fieldset>

        </form>

        </div>


        <div data-role="collapsible" data-content-theme="c">

        <h3>제목</h3>

        <p>

        내용

        </p>

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

        <li>

        <a href="#">아이템 #1</a>

        </li>

        <li>

        <a href="#">아이템 #2</a>

        </li>

        <li>

        <a href="#">아이템 #3</a>

        </li>

        <li>

        <a href="#">아이템 #4</a>

        </li>

        </ul>

        </div>

        </div>

        

        <!-- 콜랩서블 셋과 컨텐트 차이는 data-role 다르다 set 있고 없고 !-->

        <!-- 하나만 클릭가능 -->

        <label for="collapsibleset">콜랩서블 </label>

        <div name="collapsibleset" id="collapsibleset" data-role="collapsible-set">

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

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        <div data-role="collapsible">

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

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

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        <div data-role="collapsible">

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        <div data-role="collapsible">

                <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        </div>

        </div>

        

        <div data-role="footer" data-position="fixed" data-theme="a">

        <h4>&copy; 2014 T academy</h4>

        </div>

        </div>

        </body>

</html>




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

1.   필드 컨테이너



텍스트 입력 필드


그에 맞는 소프트 키보드가 나오게 설계되어있음


 


2.   슬라이더






3.   플립 토글 스위치




4.   라디오 버튼



5.   체크박스 버튼





6.   셀렉트 메뉴



1.   네이티브 옵션 메뉴

2.   data-native-menu 옵션이 false

3.   여러개 선택하면 선택된 갯수가 나옴



16-01.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>16-01</title>

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

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

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

  </head>


  <body>

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

      <div data-role="header" data-position="fixed">

        <h3> 요소</h3> 

      </div>

      <div data-role="content">

        <ul data-role="listview">

          <li><a href="16-02.html" data-transition="slide">텍스트 입력 필드</a></li>

          <li><a href="16-03.html" data-transition="slide">슬라이더</a></li>

          <li><a href="16-04.html" data-transition="slide">플립 토글 스위치</a></li>

          <li><a href="16-05.html" data-transition="slide">라디오 버튼</a></li>

          <li><a href="16-06.html" data-transition="slide">체크박스 버튼</a></li>

          <li><a href="16-07.html" data-transition="slide">셀렉트 메뉴</a></li>

        </ul>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력 화면




16-02.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>16-02</title>

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

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

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

  </head>

  <body>

    <div data-role="page" id="text" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>텍스트 입력 필드</h3> 

        <a href="#index" data-role="button" data-icon="home"

           data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

      </div>

      <div data-role="content">

        <form name="myform">

          <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

          <label for="name">이름</label>

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

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="pass">패스워드</label>

            <input type="password" id="pass"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="email">이메일</label>

            <input type="email" id="email"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="phone">전화</label>

            <input type="tel" id="phone"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="age">나이</label>

            <input type="number" id="age"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="url">URL</label>

            <input type="url" id="url"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="search">검색</label>

            <input type="search" id="search" placeholder="검색어를 입력하세요."/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="content">내용</label>

            <textarea id="content" cols="40" rows="8"></textarea>

          </div> 

        </form>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>


출력 화면




 

16-03.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>16-03</title>

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

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

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

  </head>

  <body>

    <div data-role="page" id="slider" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>슬라이더</h3> 

        <a href="#index" data-role="button" data-icon="home"

           data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

      </div>

      <div data-role="content">

        <form name="myform">

               <!--fieldcontain -->

          <div data-role="fieldcontain">

          <label for="year">년도</label>

          <!-- 아래는 슬라이더 소스임-->

          <input type="range" id="year" value="2014" min="1900" max="2030"/>

          </div>

        </form>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력 화면





16-04.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>16-04</title>

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

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

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

  </head>

  <body>

    <div data-role="page" id="fliptoggle" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>플립 토글 스위치</h3> 

        <a href="#index" data-role="button" data-icon="home"

           data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

      </div>

      <div data-role="content">

        <form name="myform">

          <div data-role="fieldcontain">

          <label for="gender">성별</label>

          <!--플립 토글 스위치는 select -->

          <select name="gender" id="gender" data-role="slider">

               <!--option으로 선택 옵션을 -->

            <option value="남자">남자</option>

            <option value="여자">여자</option>

          </select>

          </div>

        </form>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력 화면




16-05.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>16-05</title>

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

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

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

  </head>

  <body>

    <div data-role="page" id="radio" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>라디오 버튼</h3>  

        <a href="#index" data-role="button" data-icon="home"

           data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

      </div>

      <div data-role="content">

        <form name="myform">

          <div data-role="fieldcontain">

               <!-- 라디오 버튼은 data-role controlgroup으로 반드시 해야한다.-->

            <fieldset data-role="controlgroup">

              <legend>가장 좋아하는 견종</legend>

              <!--input type 반드시 radio 해야한다. -->

              <input type="radio" name="dog" value="골든 리트리버" id="dog1" checked="checked"/>

              <label for="dog1">골든 리트리버</label>

              <input type="radio" name="dog" value="알래스칸 말라뮤트" id="dog2"/>

              <label for="dog2">알래스칸 말라뮤트</label>

              <input type="radio" name="dog" value="사모예드" id="dog3"/>

              <label for="dog3">사모예드</label>

              <input type="radio" name="dog" value="시베리안 허스키" id="dog4"/>

              <label for="dog4">시베리안 허스키</label> 

            </fieldset>

          </div>

          <div data-role="fieldcontain">

            <fieldset data-role="controlgroup" data-type="horizontal">

              <legend>방문 횟수</legend>

              <input type="radio" name="visit" value="1" id="visit1" checked="checked"/>

              <label for="visit1">1</label>

              <input type="radio" name="visit" value="2" id="visit2"/>

              <label for="visit2">2</label>

              <input type="radio" name="visit" value="3" id="visit3"/>

              <label for="visit3">3</label>

              <input type="radio" name="visit" value="4 이상" id="visit4"/>

              <label for="visit4">4 이상</label> 

            </fieldset>

          </div>

        </form>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>


출력 화면



 

16-06.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>16-06</title>

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

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

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

  </head>

  <body>

    <div data-role="page" id="checkbox" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>체크박스 버튼</h3> 

        <a href="#index" data-role="button" data-icon="home"

           data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

      </div>

      <div data-role="content">

        <form name="myform">

          <div data-role="fieldcontain">

       <!-- controlgroup 필수-->

            <fieldset data-role="controlgroup">

              <legend>좋아하는 견종</legend>

              <!-- 타입이 checkbox-->

              <input type="checkbox" name="dog1" value="골든 리트리버" id="dog1"/>

              <label for="dog1">골든 리트리버</label>

              <input type="checkbox" name="dog2" value="알래스칸 말라뮤트" id="dog2"/>

              <label for="dog2">알래스칸 말라뮤트</label>

              <input type="checkbox" name="dog3" value="사모예드" id="dog3"/>

              <label for="dog3">사모예드</label>

              <input type="checkbox" name="dog4" value="시베리안 허스키" id="dog4"/>

              <label for="dog4">시베리안 허스키</label> 

            </fieldset>

          </div>

        </form>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력 화면



16-07.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <title>16-07</title>

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

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

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

  </head>

  <body>

    <div data-role="page" id="select" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>셀렉트 메뉴</h3> 

        <a href="#index" data-role="button" data-icon="home"

           data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

      </div>

      <div data-role="content">

        <form name="myform">

               <!--많이 쓰는 기능임 -->

          <div data-role="fieldcontain">

            <label for="dog1">가장 좋아하는 대형 견종</label>

            <select name="dog1" id="dog1">

              <option value="">선택하세요</option>

              <option value="골든 리트리버">골든 리트리버</option>

              <option value="알래스칸 말라뮤트">알래스칸 말라뮤트</option>

              <option value="사모예드">사모예드</option>

              <option value="시베리안 허스키">시베리안 허스키</option>

            </select>

          </div>

          <div data-role="fieldcontain">

            <label for="dog2">가장 좋아하는 중소형 견종</label>

            <!--차이는 data-native-menu false이다. false여야 jquery 라이브러리를 있음

              그리고 multiple 해줘야 다중 선택을 있다. -->

            <select name="dog2" id="dog2" data-native-menu="false" multiple="multiple">

              <option value="">선택하세요</option>

              <option value="포메라니안">포메라니안</option>

              <option value="웰시코기">웰시코기</option>

              <option value="푸들">푸들</option>

              <option value="비글">비글</option>

            </select>

          </div>

        </form>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>

출력 화면




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

1.   리스트뷰









 


li 는 리스트 ul unordered 리스트 ol은 ordered 리스트




2.   스플릿 버튼 리스트





3.   리스트 디바이더






4.   카운트 버블





5.   썸네일 리스트






6.   아이콘 리스트





7.   컨텐트 형식 적용하기



 

8.   인셋 스타일





9.   검색 필터 적용 리스트



 


15-01.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

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

    <