'제이쿼리 모바일'에 해당되는 글 4건

  1. 2013.11.28 jQuery Mobile 리스트 두 번째 (2)
  2. 2013.11.26 jQuery Mobile 리스트(List Views)
  3. 2013.11.20 jQuery Mobile Collapsible(접고 펴는 기능)
  4. 2013.10.28 jQuery Mobile 페이지2 (2)

 

 

안녕하세요!! 

간만에 오늘 휴가라 이렇게 블로그 포스팅을 편한 시간대에 하게 되었습니다. ㅎㅎ;

오늘 포스팅할 내용은 이전 포스팅에 이어서 jQuery Mobile 리스트에 대해서 조금더 알아보도록 하겠습니다.

 

이전 포스팅에선 단순히 텍스트만 나오는 리스트에 대해서 알아보았는데 오늘 포스팅에서는 이미지도 넣어서 함께 리스트에 뿌려 보도록 하겠습니다. 모바일 페이지 구축할때 유용하게 사용하시기 바랍니다.

 

기본적인 소스의 구조는 아래와 같습니다.

<ul data-role="listview">
  <li><a href="#"><img src="image.png"></a></li>
</ul>
 // <ul> 안에 <li>내용</li> 을 삽입하여 만들면 됩니다. 정말 매우 간단합니다.

 

그럼 소스를 직접 만들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="content">
    <h2>List With Thumbnails:</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#"><img src="1.png"></a>
      </li>
      <li>
        <a href="#"><img src="2.jpg"></a>
      </li>
      <li>
        <a href="#"><img src="3.jpg"></a>
      </li>
    </ul>
  </div>
</div>
</body>
</html>
// 위와 같이 소스코딩을 한 후 파일의 제목은 편하신대로 만들고(저는 test.html 로 만들어보았습니다!) 이미지는 용량이 적은 아무 이미지나 사용하여 이미지 및 소스를 바탕화면에 저장하고 파일을 열어보세요. 그럼 화면에 이미지가 들어간 리스트가 나오는 것을 확인할 수 있습니다. 아래 이미지처럼 말이죠!

 

 

그리고 리스트 안에 텍스트를 넣고 싶은 경우 아래와 같이 하면 됩니다.

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="1.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
  </li>
</ul>


<img> 아래 <h2>, <p> 태그가 들어가 있는데 그냥 <p> 태그를 사용하던지 아님 다른것을 사용하던지 그건 개발자 마음이겠죠.

위의 소스는 갤러리 같은 리스트 화면을 만드는데 아마도 유용하지 싶습니다.

그리고 혹시 작은 아이콘 형식으로 표현하고 싶을 경우

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="1.png" class="ui-li-icon">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
  </li>
</ul>

 

마지막으로 카운트 관련 리스트를 만들고자 할 경우 유용하게 사용할수 있는 팁이 있습니다.

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul> 

 

소스에 적용 해보겠습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="content">
    <h2>이메일함</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">받은메일함<span class="ui-li-count">25</span></a></li>
      <li><a href="#">보낸메일함<span class="ui-li-count">432</span></a></li>
      <li><a href="#">보관함<span class="ui-li-count">107</span></a></li>
    </ul>
  </div>
</div>
</body>
</html>
// span 태그에 class 는 ui-li-count 를 적용합니다. 그렇게 하면 아래 이미지와 같이 표현됩니다.

 

 

이처럼 jQuery Mobile 은 단순한 코딩으로 여러가지 사용방법이 있습니다. 정말 쉽게 모바일 페이지 하나를 뚝딱 만들수 있습니다. 여러분들도 직접 소스를 변경해가며 테스트 해보시기 바랍니다.

 

그럼 오늘 포스팅은 이것으로 마치겠습니다. 이제 퇴근 및 저녁시간이 다 되어 가네요. 즐거운 퇴근, 저녁시간 되시기 바랍니다.

날도 점점 추춰지는데 감기도 모쪼록 조심하세요~

 

'jQuery Mobile > JM Lists' 카테고리의 다른 글

jQuery Mobile 리스트 두 번째  (2) 2013.11.28
jQuery Mobile 리스트(List Views)  (0) 2013.11.26
Posted by 진격의 파파

댓글을 달아 주세요

  1. 2015.04.22 18:02  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2015.04.22 18:02  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

 

 

안녕하세요!! 

또 오랜만에 jQuery Mobile 관련 내용을 올립니다. 요즘 이직한 새로운 직장에서 일배우느라 정신이 정말 없습니다. 지금도 공부를 해야하는데도 불구하고 이렇게 블로그를 씁니다. 6개월 넘게 블로그를 쓰다보니 정말 애착이 갑니다. 또 많은 분들이 질문도 주시고 답변하면서 보람도 느낍니다.

 

어쨋든 오늘 포스팅할 내용은 jQuery Mobile List 입니다. jQuery Mobile 을 사용하여 리스트 화면을 만들어보겠습니다.

jQuery Mobile 리스트를 만들경우 <OL> 또는 <UL>을 사용하여 나타냅니다. 그리고 <LI>를 사용하여 리스트들을 만들면 됩니다.

즉, 아래 소스와 같이 만들어지게 됩니다.

<ol data-role="listview">
  <li><a href="#">OL 리스트</a></li>
</ol>

<ul data-role="listview">
  <li><a href="#">UL 리스트 </a></li>
</ul>

 

리스트 화면을 직접 만들어보겠습니다.

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="content">
    <h2>OL 리스트</h2>
    <ol data-role="listview">
      <li><a href="#">OL 리스트1</a></li>
      <li><a href="#">OL 리스트2</a></li>
      <li><a href="#">OL 리스트3</a></li>
    </ol>
    <h2>UL 리스트</h2>
    <ul data-role="listview">
      <li><a href="#">UL 리스트1</a></li>
      <li><a href="#">UL 리스트2</a></li>
      <li><a href="#">UL 리스트3</a></li>
    </ul>
  </div>
</div>

</body>
</html>

// 위 내용을 테스트 해보시면 리스트 화면이 만들어진 것을 확인할 수 있습니다.

 

위 내용을 토대로 나오는 화면 이미지 입니다.

 

 

그리고 약간의 소스만 변경해도 더욱더 깔끔한 리스트 화면을 만들수 있습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="content">
    <h2>직업의 종류</h2>
    <ul data-role="listview">
      <li data-role="list-divider">기술직</li>
      <li><a href="#">프로그래머</a></li>
      <li><a href="#">IT 컨설팅</a></li>
      <li data-role="list-divider">영업직</li>
      <li><a href="#">보험영업</a></li>
      <li><a href="#">자동차영업</a></li>
      <li data-role="list-divider">생산직</li>
      <li><a href="#">OO공장</a></li>
      <li><a href="#">XX공장</a></li>
    </ul>
  </div>
</div>
</body>
</html>

// 위의 소스를  html 화일로 저장 후 익스플로러, 크롬등의 웹브라우저로 열어보시면 아래와 같은 깔끔한 목록화면이 나오게 됩니다.

 

만약 DB와 연결되면 더 엔터프라이즈한 화면이 구성될듯합니다. 여러분들도 직접 테스트 해보시고 응용해보시기 바랍니다. 멋진 화면을 만들어 보세요!!~

 

새로운 내일을 위해 오늘은 여기까지 포스팅 하겠습니다. 그럼 오늘 하루도 고생 많으셨고 남은시간 푹 주무시기 바랍니다. 그리고 마지막으로 즐거운 프로그래밍 되세요~

 

'jQuery Mobile > JM Lists' 카테고리의 다른 글

jQuery Mobile 리스트 두 번째  (2) 2013.11.28
jQuery Mobile 리스트(List Views)  (0) 2013.11.26
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!! 

요즘 8년 다닌 직장을 그만두고 새로운 직장에 취업해서 서울 본사에서 일 배우느라 정신없어서 포스팅을 이제야 씁니다. 주말 빼고 하루에 하나씩 계속 쓰는게 목표인데 이게 정말 쉽지 않은것 같습니다. ^^;

그래도 오늘 힘내서 jQuery Mobile 접고 펴는 기능(Collapsible)에 대해서 한번 알아보겠습니다.

접고 펴는 기능은 버튼을 클릭하면 열렸다가 다시 버튼을 클릭하면 닫히는 기능을 말합니다.

 

<div data-role="collapsible">
  <h1>이곳을 클릭하세요!!</h1>
  <p>내용을 입력하세요...</p>
</div>
기본 소스는 위와 같습니다. 위 구문에서 중요한것은 collapsible 입니다.

<h1>버튼</h1> 안의 내용은 자동적으로 버튼이 되고 <p>내용</p> 은 내용을 넣으시면 됩니다.

 

일단 소스를 보면서 다시 설명드리겠습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible 접고 펴기</h1>
  </div>

  <div data-role="content">
    <div data-role="collapsible">
      <h1>이곳을 클릭하세요</h1>
      <p>내용을 입력하세요.</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>Copyright by makand123. All Rights Reserved</h1>
  </div>
</div>

</body>
</html>
// collapsible 을 data-role 에 적고 <h1>버튼</h1> 이곳이 버튼이 됩니다. 그리고 그 아래 <p>내용</p> 내용을 입력하면 됩니다.

위 구문을 실행하면 아래와 같이 나오게 됩니다.

 

 버튼을 클릭하기전 화면!

버튼을 클릭했을때 화면!

 

그리고 처음부터 열려있는 화면을 만드려면 <div data-role="collapsible" data-collapsed="false"> 을 사용하면 됩니다.

 

그리고 또 두 개이상의 중첩된 기능을 만드려면

<div data-role="collapsible">
  <h1>첫 번째 클릭</h1>
  <p>내용을 입력하세요.</p>
  <div data-role="collapsible">
    <h1>두 번째 클릭</h1>
    <p>내용을 입력하세요!!!.</p>
  </div>
</div>

// 위의 내용을 첫 번째 소스에 적용하면 아래와 같이 나옵니다.

 

 처음 실행화면!

 

 첫 번째 버튼을 클릭했을때!

 

두 번째 버튼을 클릭했을때!!

 

그리고 마지막으로 Collapsible Set 이 있습니다. 말 그대로 세트 기능입니다.

collapsible-set 기능을 잘 살펴보시기 바랍니다.  

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>첫 번째 SET!</h1>
    <p>첫 번째 나오는 내용.</p>
  </div>
  <div data-role="collapsible">
    <h1>두 번째 SET!</h1>
    <p>두 번째 나오는 내용.</p>
  </div>

  <div data-role="collapsible">
    <h1>세 번째 SET!</h1>
    <p>세 번째 나오는 내용.</p>
  </div>
</div>

 

첫 번째 버튼을 클릭했을때!!

 

두 번째 버튼을 클릭했을때!!

 

세 번째 버튼을 클릭했을때!!!

 

소스를 적용하면 위 그림 처럼 나오게 됩니다. 클릭한 버튼의 내용이 나오게 되고 다른 버튼들은 닫히게 됩니다.

 

직접 테스트 해보면서 응용하여 소스를 만들어보시기 바랍니다.

오늘은 이것으로 포스팅을 마치겠습니다.

남은 시간 즐겁게 보내시고 즐거운 프로그래밍 되시기 바랍니다. 

 

'jQuery Mobile > JM Tutorial' 카테고리의 다른 글

jQuery Mobile Collapsible(접고 펴는 기능)  (0) 2013.11.20
jQuery Mobile 네비게이션 바(Navigation Bars)  (0) 2013.11.15
jQuery Mobile 툴바(Toolbars)  (0) 2013.11.13
jQuery Mobile 툴바(toolbars)  (0) 2013.11.11
jQuery Mobile 버튼  (0) 2013.10.31
jQuery Mobile 페이지2  (2) 2013.10.28
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!! 

이전 포스팅에서 jQuery Mobile의 페이지에 대해서 간략히 설명을 드렸었습니다. 내용이 너무 길어질듯해서 이렇게 단락을 잘라서 설명을 드리는점 양해 바랍니다. 

 

아래 설명하는 내용은 페이지 이동입니다. 일단 소스를 보면서 설명드립니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>나의 모바일 홈페이지</h1>
  </div>

  <div data-role="content">
    <p>첫 번째 페이지입니다!!</p>
    <a href="#pagetwo">두 번째 페이지</a>
  </div>

  <div data-role="footer">
    <h1>Copyright by makand123. All Rights Reserved.</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>나의 모바일 홈페이지</h1>
  </div>

  <div data-role="content">
    <p>두 번째 페이지입니다!!</p>
    <a href="#pageone">첫 번째 페이지</a>
  </div>

  <div data-role="footer">
    <h1>Copyright by makand123. All Rights Reserved.</h1>
  </div>
</div>

</body>
</html>
// 위 구문을 보면 <body>...</body> 의 내용안에 <div data-role="page" id="pageone">과 <div data-role="page" id="pagetwo"> 이렇게 두개의 내용이 들어 있는것을 확인할 수 있습니다. 그리고 안의 내용은 header, content, footer 로 이루어져 있습니다. 페이지 이동은 보통 두 개의 파일로 이루어 지는데 그것과 다르게 하나의 파일에 두개의 페이지 내용을 틀리게 하여 적용하였습니다. 중요한 부분은 위 구문에서 붉은 글씨로 되어 있는 부분입니다. id에 pageone, pagetwo 라는 값을 넣어서 href 로 이동을 시키게 됩니다. 화면은 아래 이미지 처럼 나옵니다.

 

 

 

// 첫 번째 페이지에서 "두 번째 페이지" 버튼을 클릭하면 위와 같이 두 번째 페이지로 넘어오게 되며, 마찬가지로 두 번째 페이지에서 "첫번째 페이지" 버튼을 클릭하면 다시 첫 번째 페이지로 이동합니다.

 

 

두 번째 설명드릴 내용은 팝업창 입니다. 간단하게 모바일 화면에서 팝업창이 뜨는것을 볼 수 있습니다. 아래 소스를 보며 설명드리겠습니다.

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>나의 모바일 홈페이지</h1>
  </div>

  <div data-role="content">
    <p>환영합니다!!</p>
    <a href="#pagetwo" data-rel="dialog">팝업창</a>
  </div>

  <div data-role="footer">
    <h1>Copyright by makand123. All Rights Reserved.</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>상단</h1>
  </div>

  <div data-role="content">
    <p>이곳에 내용을 적는 부분입니다.</p>
    <a href="#pageone">첫 페이지로</a>
  </div>

  <div data-role="footer">
    <h1>하단</h1>
  </div>
</div>
</body>
</html>
// 팝업도 마찬가지로 한 페이지에서 이루어 집니다. 그리고 위 구문중 붉은 글씨로 되어 있는 곳을 보면 data-rel="dialog" 라고 되어 있는것을 확인할 수 있는데 dialog라는 부분이 사실상 팝업창을 띄워주는 역할을 하게 됩니다. 보여지는 화면은 아래와 같습니다.

 

         

 

이처럼 간단한 구문을 이용하여 페이지를 컨트롤할 수 있는것이 jQuery Mobile 의 장점입니다. 직접 소스를 만들어서 모바일 화면에서 테스트 해보시기 바랍니다.

 

그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되시길 바랍니다.

 

 

 

'jQuery Mobile > JM Tutorial' 카테고리의 다른 글

jQuery Mobile 툴바(toolbars)  (0) 2013.11.11
jQuery Mobile 버튼  (0) 2013.10.31
jQuery Mobile 페이지2  (2) 2013.10.28
jQuery Mobile 페이지  (0) 2013.10.25
jQuery Mobile 인스톨(Install)  (0) 2013.10.21
jQuery Mobile 소개  (2) 2013.10.18
Posted by 진격의 파파

댓글을 달아 주세요

  1. Eom 2013.11.18 19:18  댓글주소  수정/삭제  댓글쓰기

    정말 이해하기 쉽네여 ㅎㅎㅎ
    그런데 페이지를 나눠서 작성할때 파일을 두개만드는 것과
    한 파일안에서 page라는 data-role값을 정해줘서 만드는것은
    무엇의 차이라고 볼수 있나요?
    그러니까 어쩔때는 파일을 두개만들고 어쩔때는 div두개를 page로 해서
    만드는지 궁금합니다

  2. 진격의 파파 2013.11.19 12:57 신고  댓글주소  수정/삭제  댓글쓰기

    넵 감사합니다 ^^
    흠..아무래도 동적으로 움직이는 페이지 구성을 위해 그렇게 작성한다 보심 될듯하고 소스가 많으면 페이지를 나눠주는게 보기에도 편하고 부하도 덜 걸리지 않을까 생각해봅니다.
    설명이 틀렸다면 바로 지적 부탁드립니다. ^^;