안녕하세요!! 

또 오랜만에 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 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!! 

이번 포스팅은 지난 포스팅에 이어서 jQuery Mobile 툴바에 대해서 설명하겠습니다.

 

오늘 설명드릴 내용은 툴바에 대한 스크롤 입니다. 스크롤은 마우스에 달려있는 위, 아래 내리고 올리는 기능을 하는 역할이죠. 그런데 jQuery Mobile의 스크롤은 모바일에서 하는 것이기 때문에 손가락을 이용해서 한다고 보시면 되겠습니다.

 

스크롤은 총 3가지 방법으로 할 수 있습니다.

inline : 기본적으로 헤더와 푸터 내용이 함께 스크롤 됩니다.

fixed : 헤더와 푸터 내용은 고정된체 그 안의 내용만 스크롤 됩니다.

fullscreen : 내용을 클릭하면 헤더와 푸터는 나타났다 사라졌다를 반복합니다. 내용만 보고 싶을 경우 한번 클릭하면 헤더와 푸터의 내용은 사라지며 내용만 스크롤을 하면 됩니다. 그리고 다시 헤더와 푸터의 내용을 보고자 할 경우 다시한번 클릭하면 헤더와 푸터의 내용이 나타나게 됩니다.

 

그럼 소스를 통해서 자세히 알아보겠습니다.

<!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">
  <div data-role="header" data-position="inline">
    <h1>나의 모바일 홈페이지</h1>
  </div>

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

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

</body>
</html>

// 우선 윈도우 화면에서 먼저 테스트 해보시기 바랍니다. 화면의 크기를 줄여가며 스크롤이 어떻게 작동되는지 살펴보시기 바랍니다. 위의 소소는 inline 이므로 헤더와 푸터의 내용이 같이 스크롤 되는것을 알 수 있습니다.

 

그리고 위의 소스에서 붉은색으로 표기된 data-position="inline" 이부분을 data-position="fixed" 로 변경후 소스를 테스트 해보면 헤더와 푸터가 고정되어있고 내용만 스크롤 되는것을 확인 할 수 있습니다.

 

 

그리고 마지막으로 fullscreen의 경우는 위의 소스에서 <div data-role="header" data-position="inline">
부분을 <div data-role="header" data-position="fixed" data-fullscreen="true"처럼 변경 후 실행을 해보면 아래와 같이 나오는 것을 확인할 수 있습니다. 즉 마우스 또는 손가락을 한번 클릭하면 헤더와 푸터의 내용이 나왔다가 또 한번 클릭하면 헤더와 푸터의 내용이 사라짐을 알 수 있습니다.

 

           

 

 

직접 테스트 해보면 "아~ 이거 신기한데..." 라고 생각하지 않을까 합니다.

 

지금까지 jQuery Mobile 툴바에 대해서 설명드렸습니다. 크게 어려운점은 없을거라 생각합니다. 혹시라도 궁금한점 있으면 쪽지, 댓글 보내주세요!! 그럼 남은 오후 즐거운 시간 보내시고 즐거운 프로그래밍 되시기 바랍니다.

'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 의 툴바에 대해서 알아보겠습니다.

내용이 조금 많은듯 해서 다음 포스팅과 반반 나눠서 포스팅해야 할듯 합니다. ^^;

우선 오늘 포스팅은 헤더 바(hearder bars)와 푸터 바(footer bars)에 설명하겠습니다.

 

사실 헤더(hearder)는 일반적으로 페이지 제목, 로고, 그리고 버튼을 포함하는 내용을 많이 담고 있습니다.

지금 보여드릴 예제는 여러분들이 왼쪽과 오른쪽에 버튼을 추가하는 내용입니다.

예제를 보시기 바랍니다.

<!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">
  <div data-role="header">
    <a href="#" data-role="button" data-icon="home">Home</a>
    <h1>나의 모바일 홈페이지</h1>
    <a href="#" data-role="button" data-icon="search">Search</a>
  </div>
</div>
</body>
</html>
// 붉은 글씨로 표시된 부분을 보면 <a>태그 <h1> 태그 <a> 태그로 나오는 것을 볼 수 있고 data-icon 은 home 과 search 를 넣어서 해당하는 아이콘이 나오게 한것을 알 수 있습니다. 그리고 만약 <a> 태그중 search  부분을 없애면 자동으로 home 버튼이 좌측으로 배치되는것을 확인할 수 있으며, 버튼을 두 개를 넣을 경우 첫 번째 버튼이 좌측, 두 번째 버튼이 우측으로 가는것을 알 수 있습니다.

 

 

그리고 만약 버튼을 하나만 넣고 싶은데 우측에 넣고 싶을 경우 아래와 같이 코딩합니다.(기본적으로 좌측에 버튼이 생성됨)

<div data-role="header">
  <h1>나의 모바일 홈페이지</h1>
  <a href="#" data-role="button" class="ui-btn-right">Search</a>
</div>
붉은색으로 표시된 부분을 보면 class="ui-btn-right" 버튼을 우측에 배치시키라는 명령입니다. 그리고 만약 아이콘을 넣고 싶은 경우 그 옆에 data-icon="넣고싶은 아이콘" 이렇게 하시면 됩니다.

 

마찬가지로 하단바에도 버튼을 넣을 수 있습니다.

<div data-role="footer">
  <a href="#" data-role="button">페이스북</a>
  <a href="#" data-role="button">트위터</a>
  <a href="#" data-role="button">인스타그램</a>
</div>

처럼 말이죠. 위 내용을 적용하려면 상단에 있는 헤더바의 소스중에서

<div data-role="header"></div>

...

<div data-role="footer"></div>

이렇게 하고 테스트를 해보면 됩니다. 그런데 그렇게 적용할 경우 헤더바, 하단바 이렇게 보기 안좋게 나오게 되는데 중간에

<div data-role="header"></div>

<div data-role="content">어쩌구 저쩌구 테스트 내용</div>

<div data-role="footer"></div>

이렇게 하면 중간 내용이 있어서 보기 좋게 나오겠죠.

 

그리고 위 하단바 처럼 버튼을 그냥 넣으면 좌측 정렬되어 나오게 됩니다. 이것을 중앙 정렬을 하려면

 <div data-role="footer" class="ui-btn">

부분을 넣으면 중앙 정렬이 됩니다.

 

<!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">
  <div data-role="header">
    <a href="#" data-role="button" data-icon="home">Home</a>
    <h1>나의 모바일 홈페이지</h1>
    <a href="#" data-role="button" data-icon="search">Search</a>
  </div>
  <div data-role="content">
    <p>어쩌구 저쩌구 테스트 글!! 입니다.</p>
  </div>
  <div data-role="footer" class="ui-btn">
    <a href="#" data-role="button" data-icon="plus">페이스북</a>
    <a href="#" data-role="button" data-icon="plus">트위터</a>
    <a href="#" data-role="button" data-icon="plus">인스타그램</a>
  </div>
</div>
</body>
</html>
// 위의 내용을 모두 적용한 소스 입니다. 실행하면 아래화면 처럼 나오게 됩니다.

 

 

모바일 화면에서 테스트 해야 제대로 된 화면을 볼 수 있을텐데 시간상 익스플로러 화면에 이미지를 보여주는점 양해 바랍니다. ^^;

그럼 오늘 포스팅은 여기까지 마치고 다음 포스팅에 이어서 툴바에 대해서 설명하겠습니다. 읽어주셔서 감사하며, 궁금하거나 문의사항 있으면 쪽지 또는 댓글 바랍니다.

 

즐거운 저녁식사 되기 바라고 즐거운 프로그래밍 되세요!!!

 

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

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
jQuery Mobile 페이지  (0) 2013.10.25
Posted by 진격의 파파

댓글을 달아 주세요

 

 

 

안녕하세요!! 

이번에 포스팅할 jQuery Mobile 내용은 아이콘 입니다.

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="content">
  <a href="#" data-role="button" data-icon="arrow-l">Left Arrow Button</a>
  </div>
</div>

</body>
</html> 

// 위 구문에서 중요하게 보아야 할 곳은 붉은색으로 표시된 부분입니다. data-icon="arrow-l" 입니다. 여기서 l 은 left 의 줄임말이라고 보면 되겠습니다. 위 구문을 실행하면 아래와 같은 화면이 나오게 됩니다.

 

// 위 그림을 보면 좌측에 아이콘이 생긴것을 확인할 수 있습니다. 

 

이렇게 아이콘을 만들고 싶은 경우 data-icon 을 이용하여 사용하고 싶은 아이콘을 적어주기만 하면 됩니다.

아래 내용은 기타 아이콘들에 대한 내용입니다. 이미지와 함께 설명하겠습니다.

 

 

사용하고 싶은 아이콘을 선택하여 적어주면 됩니다.

기본적인것만 숙지하시고 나머지는 굳이 다 외울 필요는 없을듯 하고 이런게 있구나 정도로 생각하세요~

사용방법은 위 소스에 나와 있으니 한번 테스트 해보시기 바랍니다.

 

그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되세요~

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

jQuery Mobile 아이콘  (0) 2013.11.07
jQuery Events hover(), focus(), blur()  (0) 2013.05.10
jQuery events mouseenter(), mouseleave(), mousedown(), mouseup()  (0) 2013.05.10
jQuery Events ( click(). dbclick() )  (0) 2013.05.10
jQuery Selectors  (0) 2013.05.08
jQuery 기초  (0) 2013.05.08
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!! 

오랜만에 jQuery Mobile 포스팅을 하는것처럼 느껴집니다. 요즘 정신도 없고 게으르고 하다보니 그런듯하네요.

아무튼 이번에 포스팅할 내용은 jQuery Mobile 에서 사용되는 버튼의 종류 및 사용방법에 대해서 설명드립니다.

 

jQuery Mobile 은 3가지의 방법으로 버튼을 만들 수 있습니다. 

첫번째 방법은 <button> 입니다.

<button>Button</button>

 

두번째 방법은 <input> 입니다.

<input type="button" value="Button">

 

세번째 방법은 <href> 입니다.

<a href="#" data-role="button">Button</a>

// 여기서 특이점은 붉은 글씨로 표현된 부분입니다. 그냥 단순히 href 를 사용하면 텍스트에 링크만 걸게 되기 때문에 data-role="button" 이라고 정의를 하여 버튼을 생성합니다.

 

기본적으로 버튼은 화면의 전체 너비를 차지합니다. 하지만 두 개 이상의 버튼을 만들고자 할 경우 data-inline="true"을 사용합니다.

예제와 그림을 보며 설명 하겠습니다.

 

<!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-role="button" data-inline="true">두 번째 페이지</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" data-role="button" data-inline="true">첫 번째 페이지</a>
  <a href="#pageone" data-role="button" data-inline="true">첫 번째 페이지</a>
  <a href="#pageone" data-role="button" data-inline="true">첫 번째 페이지</a>
  </div>

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

</body>
</html>

 

 

 

 

만약 위 소스에서 data-inline="true" 을 적용하지 않았다면  아래와 같은 이미지가 나오게 됩니다.

<a href="#pagetwo" data-role="button">두 번째 페이지</a> 처럼 말이죠

 

 

 

화면을 꽉 채우는 버튼이 생성되게 됩니다. 그래서 두 개 이상의 버튼을 생성코자 할 경우 data-inline="true" 을 사용합니다. 

 

그리고 기본적으로 버튼은 서로간의 공백을 두고 생성됩니다. 위 이미지에서 보다시피 말이죠. 하지만 버튼이 꼭 여백을 두고 생성되어야 한다는 법칙은 없지요. 그래서 jQuery Mobile은 버튼간의 공백없이 생성할 수도 있게 만들었습니다.

data-role="controlgroup" data-type="horizontal"  을 사용하여 만들수 있습니다.

아래 예제와 이미지를 참고하시면 되겠습니다.

 

<!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">
    <div data-role="controlgroup" data-type="horizontal">
    <p>수평적 그룹 버튼</p>
    <a href="#" data-role="button">Button 1</a>
    <a href="#" data-role="button">Button 2</a>
    <a href="#" data-role="button">Button 3</a>
    </div><br>
   
    <div data-role="controlgroup" data-type="vertical">
    <p>수직적 그룹 버튼</p>
    <a href="#" data-role="button">Button 1</a>
    <a href="#" data-role="button">Button 2</a>
    <a href="#" data-role="button">Button 3</a>
    </div>
  </div>

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

</body>
</html> 

 

 

 

위 이미지에서 보다시피 버튼들이 붙어서 나오는것을 확인할 수 있습니다. 현재 익스플로러 화면에서 테스트한 이미지를 올리고 있어서 버튼의 모양이 직사각형으로 보여지는데 크롬 또는 사파리 등의 브라우저에서 확인하면 양옆이 둥근모서리로 표현되는 것을 확인할 수 있습니다. 그리고 그림자효과도 버튼에 기본적으로 적용되어 있습니다. 

 

그리고 참고적으로 몇 가지 방법을 더 설명드릴까 합니다.

 

위에서 설명드렸지만 기본적으로 버튼은 둥근모서리를 만들어 줍니다. 하지만 둥근모서리가 싫고 직각모서리를 만들고 싶은 경우 추가하는 옵션이 있습니다. <a href="#" data-role="button" data-corners="false">버튼</a> 붉은 글씨로 되어 있는 data-corners="false" 를 사용하게 되면  라운딩효과 즉 둥근모서리를 하지 않겠다라는 의미 입니다.

 

또한 기본적으로 생성되는 버튼의 크기는 일정합니다. 하지만 조금더 작게 버튼을 만들고 싶을 경우 사용하는 옵션이 있습니다.

<a href="#" data-role="button" data-mini="true">버튼</a> 붉은 글씨로 되어 있는 data-mini="true" 를 사용하게 되면 더 작은 버튼을 만들 수 있습니다.

 

버튼을 생성하면 기본적으로 둥근모서리와 그림자효과가 적용되어 생성됩니다. 둥근모서리는 위에서 data-corners="false" 를 사용하여 없앨수 있습니다. 그리고 그림자효과를 지우는 방법은  <a href="#" data-role="button" data-inline="true" data-shadow="false">버튼</a> 붉은 글씨로 되어 있는 data-shadow="false" 를 사용하면 그림자효과가 없어지게 됩니다.

 

알면 알수록 신기하고 재미있는 jQuery Mobile 입니다.

 

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

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
jQuery Mobile 페이지  (0) 2013.10.25
jQuery Mobile 인스톨(Install)  (0) 2013.10.21
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 신고  댓글주소  수정/삭제  댓글쓰기

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

 

 

안녕하세요!! 

이번에 포스팅할 내용은 jQuery Mobile의 간단한 페이지를 만들어 보겠습니다.

 

원래 모바일이란 기기가 많이 업그레이드 되고는 있지만 우리가 흔히 사용하는 개인용 PC 처럼 CPU, 메모리 등이 많이 높지는 않습니다. 그래서 가끔 모바일 홈페이지들중에 버벅거리는 현상이 나타나는 경우가 종종 있죠. 아마도 계속 모바일 기기도 사양이 높아지고 있는 추세고 광대역 LTE도 나오고 있어서 점점 그런 경우는 줄어들거라 생각하지만 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">
  <div data-role="header">
    <h1>나의 모바일 홈페이지</h1>
  </div>

  <div data-role="content">
    <p>자 이제 시작해봅시다!!</p>
  </div>

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

</body>
</html>

// 기본적인 소스의 작성은 위와 같습니다.

// 위 내용이 나오는 화면은 아래와 같습니다.

 

 

<div data-role="page">

  <div data-role="header">
    <h1>상단내용</h1>
  </div>

  <div data-role="content">

    <p>내용</p>
  </div>

  <div data-role="footer">
    <h1>하단내용</h1>
  </div>
</div>

// data-role 안에 page를 만들겠다는 선언을 먼저 하고 header(상단), content(내용), footer(하단) 로 작성을 하면 됩니다.

header 를 선언하면 위와 같이 상단에 자동배치되고 footer를 선언하면 하단에 자동배치되게 됩니다. 마찬가지로 content는 중간 내용을 삽입할 수 있는 공간을 만들어줍니다.

 

작성을 해보시면 알겠지만 정말 간단하고 깔끔하게 나오는 것을 볼 수 있고 화면의 크기에 따라서 자동으로 조절이 됩니다. 그래서 모바일 해상도에 상관없이 나오게 됩니다.

 

어쨋든 중요한것은 "data-role 에 이미지, 목록, 헤더, 푸터 등의 html 요소를 선언한다" 라는 것을 알아두시면 되겠습니다.

크게 어려운건 없을거라 생각되지만 혹시라도 궁금한점이 있으시면, 댓글, 쪽지 보내주세요~

 

다음 포스팅에서도 페이지에 대해 조금더 구체적으로 알아보도록 하겠습니다.

그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되세요!!

 

 

'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 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!!

이번에 포스팅할 내용은 jQuery Mobile 의 Install(인스톨) 입니다.

 

인스토이라고 해서 사실 거창한건 크게 없으니 안심하셔도 됩니다.

이전 포스팅에서도 잠깐 설명을 드렸었죠.

jQuery Mobile 의 인스톨은 상단에 라이브러리 3줄의 내용만 있으면 끝입니다. 그리고 라이브러리를 직접 다운받아서 서버에 저장하여 사용해도 무관합니다. 인스톨을 하기 위해서 컴퓨터(서버)에 어떠한 설치도 요구하는건 없습니다.

라이브러리는 총 3개이며 하나의 CSS 파일과 두개의 자바스크립트(JS) 파일입니다.

 

<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>

 

// 위 소스는 앞에서 설명드렸던 3개의 라이브러리입니다. 헤드와 헤드 사아에 3줄을 삽입하면 되며, 버전이 자주 업그레이드 되기 때문에 http://jquerymobile.com/download/ 에 가끔씩 방문하여 내용을 살펴보기 바랍니다.

 

그리고 라이브러리를 직접 다운 받았다면

<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>

 

// 위 처럼 서버에 다운로드된 주소의 링크를 걸면 되겠습니다.

 

이제 인스톨을 했으니 다음 포스팅부터 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 진격의 파파

댓글을 달아 주세요

shuffle-effect.zip

 

jQuery 관련 포스팅은 기본적인 포스팅이기에 관련된 예제를 통하여 직접 응용하기 바라는 의미에서 이제 관련 예제를 올리려고 합니다.

이번 jQuery 포스팅 예제는 이미지가 한장씩 자동으로 뒤로 넘어가는 효과를 만드는 예제 입니다.

 

<!-- Welcome to the scripts database of HSCRIPTS      -->

<!-- This tool is developed and a copyright             -->

<!-- product of HSCRIPTS.           -->

<!-- For more information visit http://www.hscripts.com -->

 

<html>
  <head>
    <title></title>
     <script type="text/javascript" src="plugins/jquery.js"></script>
     <script type="text/javascript" src="plugins/cycle-plugin.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 
 $("#shuffle").cycle({fx:'shuffle',
   
    delay:  -88000
});
}); 
</script>
    <style type="text/css">

 #shuffle{
 width: 300px;
   height: 300px;
  /*a width should be defined for transition to work*/
 border: 0px solid orange;
 padding: 5px;
 }

    </style>
  </head>
  <body>
       <div id="shuffle" style="float-left;">
      <img src="images/image1.jpeg" width="300" height="300">

      <img src="images/image2.jpeg" width="300" height="300">
      <img src="images/image3.jpeg" width="300" height="300">
      <img src="images/image4.jpeg" width="300" height="300">
      <img src="images/image5.jpeg" width="300" height="300">
      <img src="images/image6.jpeg" width="300" height="300">

    </div>

  </body>
 </html>


<!-- Welcome to the scripts database of HSCRIPTS      -->

<!-- This tool is developed and a copyright             -->

<!-- product of HSCRIPTS.           -->

<!-- For more information visit http://www.hscripts.com -->


// 이용방법은 간단합니다. 위와 같이 jquery.js 와 cycle_plugin.js 파일을 불러들인후 jQuery 선언뒤에  <div id="shuffle"...></div> 처럼  이미지를 적으면 끝입니다. 그렇게 되면 아래와 같이 이미지가 한장씩 뒤로 자동으로 넘어가는 효과가 나타납니다.

 

 

그림 상으론 제대로 표현이 안될듯 합니다. 첨부화일 올려놓았으니 참조 바랍니다. 나름대로 응용을 해보면 실무에도 적용이될 내용을 찾을수 있지 않을까 기대해봅니다.

 

http://www.hscripts.com/scripts/jquery/ 에서 더 많은 내용을 볼 수 있습니다.

 

Posted by 진격의 파파

댓글을 달아 주세요

  1. JAY 2013.07.17 17:53  댓글주소  수정/삭제  댓글쓰기

    우와.. 여기 진짜 대단하네요..
    회사에서 여차저차해서 홈페이지 관리를 맡고 있는데요..
    흥미가 생겨서 독학으로 프로그래밍을 공부하고 있는 처자예요
    여기 블로그! 즐찾해놓고 공부좀해도되죠?하하

  2. 진격의 파파 2013.07.18 11:02 신고  댓글주소  수정/삭제  댓글쓰기

    ^^ 미흡하지만 많은 도움이 되길 바라겠습니다. ㅎㅎ;;

 

예전에는 보통 복잡한 자바스크립트 소스를 사용하여 메뉴 구성을 만들어 사용했었습니다. 하지만 jQuery 가 나온 이후 간편하게 jQuery의 라이브러리를 사용하여 더 화려한 효과를 낼 수 있습니다.

 

아래 소스와 이미지를 살펴 보시기 바랍니다.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="
http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="
http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="
http://jqueryui.com/resources/demos/style.css" />
<script> 
$(function() {
 $( "#menu" ).menu();
}); 
</script>
<style> 
 .ui-menu { width: 150px; } 
</style>
</head>
<body>
<ul id="menu"> 
 <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> 
 <li><a href="#">Ada</a></li> 
 <li><a href="#">Adamsville</a></li> 
 <li><a href="#">Addyston</a></li> 
 <li><a href="#">Delphi</a>
  <ul>
   <li class="ui-state-disabled"><a href="#">Ada</a></li>
   <li><a href="#">Saarland</a></li>
   <li><a href="#">Salzburg</a></li>
  </ul>
 </li>
 <li><a href="#">Saarland</a></li>
 <li><a href="#">Salzburg</a>
  <ul>
   <li><a href="#">Delphi</a>
    <ul>
     <li><a href="#">Ada</a></li>
     <li><a href="#">Saarland</a></li>
     <li><a href="#">Salzburg</a></li>
    </ul>
   </li>
   <li><a href="#">Delphi</a>
    <ul>
     <li><a href="#">Ada</a></li>
     <li><a href="#">Saarland</a></li>
     <li><a href="#">Salzburg</a></li>
    </ul>
   </li>
   <li><a href="#">Perch</a></li>
  </ul>
 </li>
 <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>
</body>
</html>

 

 

// 깔끔한 3단 메뉴구성을 할 수 있는 소스 입니다. CSS를 조금 다룰줄 안다면 텍스트, 이미지 구성등 더 응용을 할 수 있지 않을까 생각합니다.

 

출처 : http://jqueryui.com/ 

Posted by 진격의 파파

댓글을 달아 주세요