영삼이의 IT정보2011. 11. 9. 02:00

원본: http://iphonedevelopertips.com/user-interface/uialertview-without-buttons-please-wait-dialog.html
출처: http://www.devpia.com/MAEUL/Contents/Detail.aspx?BoardID=7462&MAEULNO=911&no=52368&page=1

If you’ve ever wanted to show a simple “please wait” dialog without resorting to a custom view, UIAlertView is a good option, and is even more appropriate if you customize the alert such that no buttons are shown.

In the figure below you can see how a simple alert can be shown (sans buttons) while you are busy doing some other system activity (reading/writing files, etc).

UIAlertView without Buttons
UIAlertView *alert;   ...   alert = [[[UIAlertView alloc] initWithTitle:@"Configuring Preferences\nPlease Wait..." 
  message:nil delegate:self cancelButtonTitle:nil otherButtonTitles: nil] autorelease];   [alert show];

Trouble with this approach is that things look a little lopsided, as there is a significant amount of dead space on the bottom where the button(s) are to be shown. We can fix this by adding a few newline characters at the start of our message:

UIAlertView *alert;   ...   // Add two newlines characters at the start of the message
alert = [[[UIAlertView alloc] initWithTitle:@"\n\nConfiguring Preferences\nPlease Wait..." 
  message:nil delegate:self cancelButtonTitle:nil otherButtonTitles: nil] autorelease];   [alert show];

The text is nearly centered, yet we’ve created a different problem, there is now white space on the top and bottom. There is one more approach…

UIAlertView with UIActivity Indicator

In the whitespace on the bottom, let’s add an activity indicator. Also, remove the newlines in the message text so the text starts near the top:

UIAlertView *alert;   ...   alert = [[[UIAlertView alloc] initWithTitle:@"\n\nConfiguring Preferences\nPlease Wait..." 
  message:nil delegate:self cancelButtonTitle:nil otherButtonTitles: nil] autorelease];

[alert show];   UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] 
  initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];

// Adjust the indicator so it is up a few pixels from the bottom of the alert
indicator.center = CGPointMake(alert.bounds.size.width / 2, alert.bounds.size.height - 50);
[indicator startAnimating];
[alert addSubview:indicator];
[indicator release];

Dismissing the Buttonless UIAlertView

Since there are no buttons associated with the alert, we have to dismiss the alert ourselves, versus the traditional approach where the system dismisses the alert when a button is pressed.

Here is the call to dismiss the alert:

[alert dismissWithClickedButtonIndex:0 animated:YES];
Posted by 다오나무
영삼이의 IT정보2011. 11. 9. 01:31

UIAlertView *alert = [[[UIAlertView alloc] initWithTitle:@"잠시만 기다려주세요.\n로딩중..."

                               message:nil delegate:self cancelButtonTitle:nil otherButtonTitles: nil] autorelease];

[alert show];

UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc]

                                     initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];

indicator.center = CGPointMake(alert.bounds.size.width / 2, alert.bounds.size.height - 50);

[indicator startAnimating];

[alert addSubview:indicator];

[indicator release];

로딩중.png

Posted by 다오나무
카테고리 없음2011. 11. 8. 16:35

소셜커머스 100% 활용하는 방법
요즘은 소셜커머스(Social commerce)를 이용해서 저렴한 가격에 제품이나 공연, 음식 등을 이용하는 경우가 많습니다. 다양한 쿠폰을 구매할 수 있어서 요즘 소셜커머스를 이용하지 않고 이용하는 분들이 없을 정도로 소셜커머스 분야가 활발한 편이 되버렸네요. 하지만 소셜커머스 쿠폰을 구매해놓고서 이용하지 않다거나 쿠폰 이용하러 해당 매장에 가서 불친절한 서비스만 받았다고 항의하는 분들도 많습니다.

소셜커머스란 무엇인가?
소셜커머스(Social commerce)는 소셜 미디어와 온라인 미디어를 활용하는 전자상거래의 일종입니다. 소셜 커머스라는 용어는 야후에 의해 2005년에 처음 소개되었습니다. 소셜커머스는 크게 소셜 링크형, 소셜 웹형, 공동구매형, 오프라인 연동형의 네가지로 분류할 수 있는데 2008년 설립된 Groupon이 설립된 이후 전세계적인 공동구매형 소셜 커머스 붐이 일어났습니다.(출처-위키백과)
쉽게 말하자면 특정 상품을 특정기간(대체적으로 하루)동안 아주 저렴하게(할인율은 상품마다 차이가 있음) 파격적인 가격에 구입할 수 있는 할인혜택을 받을수 있다는 점입니다. 판매하는 상품으로는 IT상품과 같은 실물상품과 음식점, 각종 공연, 피부관리와 같은 서비스상품까지 종류는 다양합니다.

우리나라의 대표적 소셜커머스 사이트
하루에도 몇 개씩 만들어질 정도로 국내 소셜커머스 사이트 숫자가 방대해졌습니다. 그 중에서 메이저라고 할 수 있는  사이트는 티켓몬스터(http://www.ticketmonster.co.kr/), 위메이크프라이스(http://www.wemakeprice.com/),쿠팡(http://www.coupang.com/)이라고 할 수 있을 거 같습니다.(소셜커머스 시장에도 인수 합병 붐이 일어나서 몸집을 불리는 업체도 있는 거 같습니다)
위에 설명한 사이트 말고도 현재 소셜커머스 사이트는 현재 네이버에만 662개의 사이트가 등록이 되어있습니다. 소셜커머스 사이트의 특성상 사이트당 하루에 파는 물건은 1개부터 많아야 10개 미만의 상품만을 판매하기 때문에 소비자 입장에서 내가 원하는 물품을 찾아서 구매한다는 것은 사실상 불가능에 가깝습니다.
그래서 탄생한것이 662여개에 흩어져있는 소셜커머스상품들을 모아서 볼수 있는 소셜커머스 모음 사이트들입니다. 이곳에서는 여러 소셜커머스사이트를 돌아다니지 않고도 한 사이트에서 여러 소셜커머스 상품들을 모아서 볼수있고 해당 상품을 클릭하면 판매사이트로 넘어갈 수 있게 만들어진 사이트들입니다.

소셜커머스 사이트의 이용방법
위에서도 말했듯이 소셜커머스사이트는 662가지정도지만 사용방법은 거의 비슷한 편입니다. 간단히 설명하자면,
1. 해당 소셜커머스 사이트에 가입한다.
2. 상품을 고르고 구매한다.
3. 결재한다.
4. 쿠폰을 다운 받거나 인쇄한다.
5. 해당 업체에 가서 쿠폰을 보여주고 서비스 or 상품을 받는다.
소셜커머스의 장점
1. 오프라인에서는 접할수 없는 파격적인 할인가를 제공한다
2. 판매하는 상품이 외식상품부터 IT기기, 피부관리와 같은 서비스상품까지 생활전반에 걸친 방대한 영역이라 실생활에 도움이 된다.
3. 여러 곳의 서비스를 받게 된다. 음식점, 의류, 공연, 쇼핑 등 평소보다 저렴한 가격에 이용할 수 있습니다.
소셜커머스의 단점
그렇다면 단점은 없을까요? 구매자들은 매우 저렴한 가격에 현혹되어 피해를 많이 보았었는데 그 이유는 무엇일까요?
1. 쿠폰에 기한이 설정되어 있다.
2. 환불 가능기간이 극도로 짧다.
3. 사용제약이 걸려있는 경우가 있다.
4. 불필요한 구매를 자극한다. 일명 지름신 강림
5. 같은 상품을 또 파는경우는 드물다.

그렇다면 우리는 소셜커머스를 어떻게 사용하는것이 좋을까요?
1. 구매전 주의사항을 철저히 확인한다. 쿠폰의 기한은 언제까지인지 사용제약에는 어떠한것이 있는지 확인하고 구매한다.
2. 상품의 구성을 메모한다. 음식점의 경우 특정상품이나 금액을 설정해놓는 경우가 있습니다.
3. 자주 방문하는 지역의 쿠폰위주로 구매한다. 아무리 저렴해도 자신이 잘 가지 않는 지역의 매장보다는 자신의 움직이는 동선 위주의 쿠폰을 구매한다면 이용할 수 있는 확률이 높아지겠죠?
4. 자신에게 필요한 쿠폰인가 생각해보자. 할인에 현혹되어 과소비를 하기보다는 자신이 평소에 소비하는 금액을 감안해가며 쿠폰을 구매하는 것이 좋다고 봅니다.
5. 돈을 아낀다기보다 평소에 사용하는 금액으로 좀더 나은 서비스를 받는다고 생각하고 쿠폰을 구매하세요.

Posted by 다오나무
영삼이의 IT정보2011. 11. 4. 03:58

<자바스크립트 명령어>

자바스크립트는 자료형을 쓰지않고 변수선언이 가능함
ex)
i=10
s=한글

<script language=javascript> </script> //이사이에 자바스크립트 명령어들사용

function 메서드명{} //사용자정의 메서드를 만든다

document.write() //화면에 메세지를 출력한다 (system.out.print기능)

document.write("<br>") //한줄 내린다

document.write("&nbsp") // 일정칸띄운다

prompt("메세지","기본값") // 입력창을 띄운다

alert()  // 알림창을 띄운다

confirm() //확인 취소창 (확인은 true,취소는 false반환)

<input type=button value=함수호출 onclick=aa()> // 버튼을 클릭하면 aa()함수를 호출한다

i=parseInt(변수)//문자열을 정수로 정수로변환

OnClick  // 마우스 클릭했을때

OnMouseOver //마우스가 올라왔을때

OnMouseOut // 마우스가 나갔을때

OnLoad  //페이지 시작시 실행한다 body에만 사용가능
ex)<body OnLoad=메서드명>

OnUnload // 페이지에서 나갔을때 body에만 사용가능
ex)
<body OnUnload=메서드명>

OnChange //값을 변경했을때

OnBlur  // 커서제거시 실행 (focus를 잃었을때)

OnFocus // 커서가 있을시 focus가 들어가면실행

document.myform.pwd.value=""; //myform의 pwd에 내용삭제

document.myform.pwd.focus(); //myform의 pwd에 포커스를 맞춘다

*******************************************************************
<form name=myform>
<select name=job>
  <option selected>직업선택
   <option value=학생>학생
   <option value=회사원>회사원
   <option value=자영업>자영업
   <option value=백수>백수
   <option value=프로그래머>프로그래머
   <option value=주부>주부
   <option value=기타>기타
</select>

document.myform.job.options[i].text //i번째 text를 반환

document.myform.job.options[i].text.value //i값을얻는다

document.myform.job.options[i].text.selected //i선택돼었는가

document.myform.job.options.selectedIndex //선택한 위치를 얻는다

document.myform.job.options.length  //option배열 길이갯수반환

********************************************************************

스크립트의 배열
Sum=new Array(100,”kim”,188,9) 형에상관없이 하나의배열에 정수 실수 문자 모두가능

window.open("열릴주소이름or파일이름","새창이름","속성"); //새창을연다
속성의종류
menubar=yes  //메뉴바
scrollbars=yes  //스크롤바
resizable=yes  //창크기재설정
toolbar=yes  //툴바
status=yes //상태바
width=600  //폭
height=600 //높이

window.close();//창닫기

<a href=javascript:window.close()>닫기</a> //창닫기

<a href=javascript:self.close()>닫기</a> //창닫기

today=new Date(); //시스템날짜구하기
getYear()  //년도
getMonth() //월(0~11월이므로 표기시 +1)
getDate() //일
getDay()  //요일(일요일0 월1 토6)
getHours()  //시간
getMinutes() //분
getSeconds()  //초

window.status= //윈도우상태창설정

setTime(명령어,밀리초); //1초후에 명령어실행

setInterval(명령어,밀리초); //1초마다 명령어실행

location.replace(url);  // 지정 url로 대체(back)안됨

location.herf="url"  // back 가능

location.reload() // 새로고침

---------------------------------------

추가

var str = "test,123,test333".split(","); // ,단위로 나누어 배열저장

var str = "niee@naver.com".indexOf("@") //@의 문자열위치반환

var str = "niee@naver.com".substr(start,end); //start~end위치의 문자열반환첫문자의 위치는0번

var num = "123123123".replace("1","ee"); //1이라는 숫자가나오면 ee로변환 첫번째탐색되는1만해당

var num = "123123123".replace(new RegExp("1","g"),"ee"); //모든1을 ee로변환

[출처] 자바스크립트 명령어들|작성자 niee

Posted by 다오나무
2011. 11. 3. 10:35

jQuery Mobile 5일차.

-jQuery Mobile 페이지 이동과 효과.

Page 이동

1. 기본 페이지 구조.

기본적으로 단일 페이지 구조에 최적화 되어 있다. 즉, 하나의 HTML 파일에 모든 콘텐츠를 정의하거나 페이지 내에 서로간의 영역을 구분해 교체하는 방식으로 페이지 이동을 처리한다. 이렇게 하면 전체 적으로 스타일을 일관되게 적용할 수 잇고 페이지 이동에 따른 애니메이션 효과를 원할히 처리할 수 있어 웹앱의 으로서의 특징을 살릴수 있다.

jQuery mobile application은 data-role="page" 속성이 지정된 영역을 하나의 페이지로 간주하고 이 영역 단위로 브라우저에 표시한다.

2. 내부 링크 페이지 이동.

기본 페이지 구조에서도 말했듯이, jQuery Mobile은 page영역을 하나의 화면으로 여긴다. 때문에 한페이지 정의 여러화면을 대상으로 내부적으로 이동할 수 있게 내부 링크를 지원한다.

내부 링크를 사용하기 위해서는 일단 하나의 HTML 파일에 여러 page를 정의해 놓고 서로 교체하는 방식으로 페이지 이동을 처리한다.

이동할 page를 식별하기 위해서 ID를 부여하고 이 값으로 링크를 연결하는 방식을 취한다.

3. 외부 링크 페이지 이동.

외부 링크란 건 내부 링크와는 달리 하나의 HTML에서 다른 HTML 파일로의 페이지 이동을 말한다. 솔직히 jQM이 단일 페이지에 특화되어 있어도 HTML파일 하나로는 솔직히 관리도 힘들고 구현하기도 너무 힘들다. JQM에서는 자동적으로 외부링크 이동을 Ajax 통신으로 처리를 하고, 통신의 결과를 기존 페이지에 통합하는 방식으로 처리해서 내부 링크 페이지 이동과 유사하게 동작하도록 만들어져 있단다.

<a href="xxx.html"> </a> 이런식으로 앵커태그를 사용하여, 기존 HTML에서의 링크 작업과 같은 방식으로 동작하게 된다. 물론 다른 HTML파일들은 JQM의 양식에 맞게 작성이 되어 있어야한다.

4. 외부 사이트 이동 과 링크 옵션

위에는 모드 동일 사이트 내의 링크들에 대한 이야기이고, 외부 사이트로의 링크의 경우에는 JQM의 페이지 이동 매커니즘이 적용안된다. JQM은 HTML 링크 타입을 모두 지원하며, Ajax 기반의 처리외의 방식을 지원하기 위해 몇개의 옵션을 지원한다.

rel="external" , data-ajax="false", target="_blank" 3가지 방법 모두 앵커 태그에 덧붙여서 사용을 하시면 되고, 이런 방법들은 페이지 제어권이 완전히 넘어가 새로고침되는 방식으로 동작을 하게 된다.

외부 사이트가 JQM의 방식을 따르지 않는다면 꼭 사용을 하여야하는 방법같다.

5. 기능 링크

기능 링크는 이메일이나 전화 번호에 대한 링크를 말한다. 다들 스마트폰이나 태블릿 pc 등에서 경험을 해보았겠지만 전화번호를 누르면 전화가 걸어진다 던지, 메일 주소를 누르면 메일을 쓸수 있도록 동작을 한다던지의 행동을 하게 만드는 것들이다. 이 기능들은 JQM이 지원하는게 아니라 모바일 기기들이 알아서 고맙게 지원해주는 기능들이다.

TIp.

1. 링크를 이용하여 page를 구성하면 자동으로 back 버튼이 header 부분에 생성이 된다. data-backbtn="false" 속성을 header에 추가하면 자동 생성이 안된다.

2. jQM은 페이지 이동시 기존 js 객체인 location.hash값도 함께 업데이트하므로 브라우저 자체 back 기능도 잘 동작이된다.

페이지 이동 API 와 애니메이션 효과.

1. 페이지 이동

스크립트 영역에서의 page 이동을 처리하기 위해 JQM에서는 mobile 객체의 changePage() 메서드를 제공해준다.

내부: $.mobile.changePage("#OtherPage","slide","reverse");

외부: $.mobile.changePage("#Other.html","slide","reverse");

2. 애니메이션 효과

Page Transition 이라고 하며 , 총 6개의 CSS 기반 Transition이 제공된다. 페이지 링크를 정의하는 애커 테그에 data-transition 속성을 지정하면 ok !!.

효과의 종류

slide: 왼쪽으로 미끄러지듯 이동 (default).

slideup: 위쪽으로 미끄러지듯 이동.

slidedown: 아래쪽으로 미끄러지듯 이동.

pop: 팝업 형태로 새 페이지가 두둥.

fade: 기존 페이지가 희미해지면서 새 페이지가 두둥.

flip: 새 페이지가 트리플 악셀 . 두둥.

반대 방향으로 Transition 효과를 주고 싶으면 data-direction="reverse" 속성을 주면 ok.

Posted by 다오나무
2011. 11. 3. 09:54

JavaScript

a free online quick reference order here VisiBone
JavaScript Numbers (section of the JavaScript Card and Foldouts)
I hope you find these 
excerpts of VisiBone
JavaScript references
very useful.

Contents:
Number
String
Number <–> String
Boolean
Date
Math

Array
Function
logic
Object
type
object-orientation
Error (exceptions)
LEGEND
Operator Precedence

More content is in the
product closeups, especially:
DOM (Document 
Object Model)
Regular Expressions

The information here 
is part of two printed
references, that
VisiBone makes, the
JavaScript Card:
JavaScript Card

a dense, laminated,
four-page 8.5x11 book

and also the
JavaScript Foldouts:
JavaScript Language Foldout JavaScript DOM Foldout JavaScript Regular Expressions Foldout
a set of three fan-fold
booklets with larger
print and smaller
folded size.

JavaScript Strings (section of the JavaScript Card and Foldouts)
Does it look busy?
Well, it wasn't meant
for idle people!

Here are all the
features of client-side
JavaScript, in
living code.

English takes a
back seat here.  
To make solid 
code, learn to 
read, think and 
write in
JavaScript.
Fluency will
serve you best
in the end.

The assert()
function is the best
invention for
programming
since the subroutine.

Not only will its
proper use make
your software
test itself, earning
and protecting
reliability from the
start.

But it's a clear,
concise way to
describe exactly
what all the features
of JavaScript do.

Did I mention?
Feedback 
form below!

Regular Expressions
are very versatile for
validating or
analyzing strings.

See the JavaScript
Regular Expressions
reference.
If you are looking to
establish or extend
your business in
international markets,
it is very important to
ground your company's
brand and presence in
targeted countries. The
first step in a successful
strategy is to register
an international domain
for your company.
International domain
registration can be
tricky, so use a
registrar that knows
the requirements and
process is important.
Check out godaddy
for the widest selection
and best prices on
international domains.

JavaScript Number / String conversion (section of the JavaScript Card and Foldouts)

JavaScript Boolean (section of the JavaScript Card and Foldouts)

JavaScript Dates (section of the JavaScript Card and Foldouts)
The assert() function
is like a video camera. 
Hold on now, this will 
make sense in a sec.

Think how you first learn 
human language. You 
observe words spoken 
and their effects. 
Person A: "I'm hungry" 
Person B gives A food. 
You infer an association 
between making the 
sound "hungry" and 
getting fed.

This card can teach you 
JavaScript not by talking 
about it but by doing it 
and (here's the part I'm 
smug about) showing 
you the effects. The 
assert() function is a 
great way of showing 
you what JavaScript 
code does.

Imagine, instead of a 
dead-tree dictionary 
that defines words in 
terms of ... other words, 
it would instead show 
a video clip of people 
using and responding
to
those words.

Assert makes the 
effects of JavaScript 
code visible, just like 
this video-dictionary 
would make the 
effects of human 
words visible.

JavaScript Math (section of the JavaScript Card and Foldouts)
JavaScript Arrays (section of the JavaScript Card and Foldouts)

JavaScript Functions (section of the JavaScript Card and Foldouts)

JavaScript Programming Logic (section of the JavaScript Card and Foldouts)

VisiBone also makes
several printed web
color references.

Posters & Charts
Webmaster's Palette Color Wheel Poster

Laminated Cards
Color Card, laminated and slick for clients
that match the 
"VisiBone2"
swatch collection 
in Adobe
Illustrator and 
Photoshop.

Plus two varieties 
of Mouse Pads.

And a chart with 
1068
non-web-safe
colors:
Web Color KiloChart
Guaranteed compatible
with walls in Asia,
Europe, the Americas,
Africa, Australia and
California.

JavaScript Objects (section of the JavaScript Card and Foldouts)

JavaScript Types (section of the JavaScript Card and Foldouts)

JavaScript Object Oriented Programming (section of the JavaScript Card and Foldouts)

JavaScript Exceptions (section of the JavaScript Card and Foldouts)
Legend (section of the JavaScript Card and Foldouts)
Thank you, and good luck building!

JavaScript Reference Contents:
Number
String
Number <–> String
Boolean
Date
Math

Array
Function
logic
Object
type
object-orientation
Error (exceptions)
LEGEND

Here's a table of Browsers versus the JavaScript versions they claim to support:

        
         
                IE   IE   IE   IE  IE  IE  IE  IE
                PC   Mac  PC   PC  Mac Mac PC  PC    Netscape   Mozilla   Opera
                4.01 4.01 4.01 5.0 5.0 5.1 5.5 6     4.7  6.0   0.9-1.0   6.03

JavaScript      X    X    X    X   X   X   X   X     X    X        X      X
JavaScript1.0   X    X    X    X   X   X   X   X     X    X        X      X

JavaScript1.1   X    X    X    X   X   X   X   X     X    X        X      X
JavaScript1.2   X    X    X    X   X   X   X   X     X    X        X      X
JavaScript1.3             X    X   X   X   X   X     X    X        X      X
JavaScript1.4                      X   X                  X        X      X
JavaScript1.5                                             X        X

Jscript         X    X    X    X   X   X   X   X

EcmaScript                X    X           X   X                          X

exceptions      no   no   yes  yes yes yes yes yes   no   yes     yes     yes
supported?


An "X" in row "Yyyyy" means code under <script language="Yyyyy"> will run
in the browser for that column.  For example:

     IE6/PC
     ------
     <script language="JavaScript 1.3">
          // runs
     </script>

     Netscape 6
     ----------
     <script language="EcmaScript">
          // ignored
     </script>

(Yes, there are two radically different browsers both claiming to be IE4.01,
one claims to support JavaScript 1.3 and EcmaScript, and exceptions work
perfectly, and the other not.)

See the Error section for a trick on how to include code with exceptions.


        
      
Posted by 다오나무
영삼이의 IT정보2011. 11. 2. 08:02

오늘 소개해 드릴 아이디어는 아이폰을 DSLR카메라처럼 만들자는 아이디어 입니다.

단지 렌즈만 붙이는것이 아니라 셔터같은 부가적인 기능도 있는데요.
전용 앱(APP)을 실행 시키면 진짜 카메라로 찍는듯한 느낌이 듭니다.

Concept Camera: The WVIL from Artefact on Vimeo.
그리고 사진보정및 사진공유같은 기능도 있네요~
실용화가 된다면 카메라를 따로 살 필요 없이 간편하게 화려한 사진을 찍을수 있을것 같습니다.
아이폰을 생각하다보면 핸드폰도 핸드폰이지만
이런 아이디어 넘치는 악세사리가 많아서 많이들 구입하시는것 같아요.

'영삼이의 IT정보' 카테고리의 다른 글

로딩중&hellip; 메세지박스 출력  (0) 2011.11.09
자바스크립트 명령어  (0) 2011.11.04
jQuery Mobile 일본글  (0) 2011.10.31
jQueryMobile 일본 글 [출처]  (0) 2011.10.31
데이터베이스와 테이블생성  (0) 2011.10.28
Posted by 다오나무
카테고리 없음2011. 10. 31. 19:09

iScroll을 이용하여, 특정 영역만 스크롤이 가능하게 해보자.
참고 : http://cubiq.org/iscroll
예를 들어 아래와 같은 jquery mobile을 이용하여, 만든 webapp을 구현했다고 치자.
.
.

<div data-role="page" id="page_default" data-theme="e">
.
.

<div data-role="content">

<div id="collapser" data-role="collapsible" data-collapsed="true">

<h3>검색어 입력</h3>

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

<div data-role="controlgroup" data-type="horizontal" align="center">

<a id="enteredItemSaveButton"href="#" data-icon="star" data-role="button">검색어 저장</a>

<a id="directSearchButton"href="#" data-icon="search" data-role="button">바로 검색</a>

</div>

</div>

<ul id="ItemList" data-role="listview">

<!-- 여기에 동적으로 li가 붙는다. -->

</ul>

</div>

<!-- CONTENT END -->

</div>
.
.
1. 특정 영역만을 scroll가능도록 하기 위해서 일단 이 페이지 (#page_default) 의 스크롤링을 prevent하자.
$("#page_default").live('touchmove', function (e) { e.preventDefault(); }, false); 
2. iscroll.js를 페이지에 import하자.
<script src="./lib/iscroll.js"></script>
3. scrolling되었으면 하는 영역을 래핑하자.

<div id="wrapper">
    <div id="scroller">
        <ul id="itemList" data-role="listview">
            <li>...</li>
        </ul>
    </div>
</div>

4. wrapper를 위한 css를 내 어플에 맞게 customize하자.
#wrapper {
    position:relative;
    z-index:1;
    width:100%;
    height:350px;
    overflow:auto;
}

5. iscroll 객체를 listview dom id와 함께 인스턴싱하자.
myScvar roll = new iScroll('scroller');
결과 >> 리스트 부분만 스크롤링 된다. 

이 모든 내용은 
http://cubiq.org/iscroll 에 돔 더 자세히 잘 나와 있으니, 참고도록 하자.

Posted by 다오나무
영삼이의 IT정보2011. 10. 31. 05:10

http://d.hatena.ne.jp/pikotea/20101019/1287484040

 

Page

요소 특성 개요
div data - role page 페이지

설정 기본 비고
data - fullscreen true 전체 화면
false *
data - theme 임의 a 기본 테마는 a ~ c


Header

요소 특성 개요
div data - role header 헤더

Page 포함

설정 기본 비고
data - nobackbtn true Back 버튼 자동 표시
(되지 않는 것)
false *
data - position inline *  
fixed   화면 하단에 고정 표시
data - theme 임의 a 기본 테마는 a ~ c


Content

요소 특성 개요
div data - role content 페이지 내용

Page 포함

설정 기본 비고
data - theme 임의 a 기본 테마는 a ~ c


Footer

요소 특성 개요
div data - role footer 바닥글

Page 포함

설정 기본 비고
data - position inline *  
fixed   화면 하단에 고정 표시
data - id 임의   여러 Page에 동일한 Footer을 정의한다. 화면 전환시 화면이 사라지지 않는다.

동일한 data - id를 가진 Footer를 자식 요소없이 정의한다.

(필수 data - position : fixed)

※ 자식 요소는 동일한 data - id를 가진 HTML 마지막으로 정의한다.

(다른 좋은 방법이 있는지 알 수 없음)

class ui - bar   바닥글 요소의 자동 패딩
data - theme 임의 a 기본 테마는 a ~ c


Navigation Bar

요소 특성 비고
div data - role navbar 화면 전환시 화면이 사라지지 않는다. Footer 요소에 포함한다.
data - id의 차이점은 Footer 내용을 미묘하게 바꾸는 것이 가능 (필수 data - position : fixed)


Page Link

요소 특성 개요
a - -

효과와 함께 화면 전환한다.

링크된 Page 요소를 # id로 지정하거나 URL을 상대 경로 지정으로한다.

다음 중 하나를 지정하면 일반 링크된다.

rel : external

target : _blank

data - request - type : http

설정 기본 비고
data - transition slide * 화면 전환 효과
slideup  
slidedown  
pop  
fade  
flip  
data - request - type http   일반 링크


Dialog

요소 특성 개요
a data - rel dialog 링크를 대화로 표시한다.

Page 요소를 # id로 지정하거나 URL을 상대 경로 지정으로한다.

설정 기본 비고
data - transition slideup   대화 효과
pop *
flip  


Button

요소 특성 개요
input type button 버튼
submit
reset
image
a data - role button

설정 기본 비고
data - icon arrow - l   아이콘 종류
arrow - r  
arrow - u  
arrow - d  
delete  
plus  
minus  
check  
gear  
refresh  
forward  
back  
grid  
star  
alert  
info  
data - iconpos left * 아이콘 위치
right  
notext  
class ui - btn - left * 버튼 위치
ui - btn - right  
ui - btn - active   선택 상태
data - theme 임의 a 기본 테마는 a ~ c


Inline

요소 특성 개요
div data - inline true 여러 요소를 1 줄로 표시한다.
false


Control Group

요소 특성 개요
div data - role controlgroup 여러 요소를 그룹화한다.

Button, Radio, Checkbox 요소 등

설정 기본 비고
data - type vertical * 세로로 그룹화
horizontal   가로로 그룹핑


Grid

요소 특성 비고
div class ui - grid - a ui - grid - a는 가로 2 분할, ui - grid - b는 가로 3 분할.

자식으로 div 요소의 class : ui - block - a - ui - block - c에 대응한다.

ui - grid - b
fieldset class ui - grid - a
ui - grid - b
data - theme 임의 a 기본 테마는 a ~ c


Collapsible

요소 특성 비고
div data - role collapsible 개폐 가능한 블록. 제목이 필수 (h1 ~ h6 요소)

설정 기본 비고
data - state collapsed   초기 표시를 닫은 상태로
data - theme 임의 a 기본 테마는 a ~ c


Fieldcontain

요소 특성 비고
div data - role fieldcontain Form의 자식 요소를 묶으면 외형이 약간 변화하지만 상세 불명.
(화면 크기가 바뀌었을 때 위치 조정?)
fieldset


Form Elements

요소 특성 비고
input type text 텍스트 입력
password 암호 입력
search 검색창
range 범위 입력
radio 라디오 버튼

label 요소가 필요합니다. label의 for 속성 radio 요소의 id를 설정한다.

checkbox 확인란

label 요소가 필요합니다. label의 for 속성에 checkbox 요소의 id를 설정한다.

select - - 셀렉트 박스 입력

모든 option 요소가 Dialog 형식으로 표시되지 않는 경우 Page 형식으로 표시한다.

data - role slider 플립 토글 스위치

option 요소를 2 개를 필요가있다.

textarea - - 텍스트 영역 입력

설정 기본 비고
data - theme 임의 a 기본 테마는 a ~ c


List

요소 특성 비고
ul data - role listview 목록

(List / Read - only List)

ol data - role listview 번호 매기기 목록

(Numbered List)

설정 기본 비고
data - inset true   목록 화면 너비로 포장하지 않는다
false *
data - filter true   목록에서 검색을 검색 상자 표시
false *
data - theme 임의 a 기본 테마는 a ~ c


기타 ※ li 요소 등에 대한 지정. 여러 조합 가능

목록 형식 조건 비고
링크 매기기 목록

(Linked List)

자식 요소 a 요소를 포함 링크 표시
상자 목록

(Nested List)

자식 요소 ul 요소를 포함 목록을 중첩
구분 단추 목록

Split button List

자식 요소 a 요소 img 요소, h1 ~ h6 요소, p 요소 등 목록에 여러 요소를 표시하는
분할 목록 li 요소 data - role : list - divider를 지정한다. 목록 제목보기
카운트 버블 자식 요소 span 요소를 마신다. span 요소에 class : ui - li - count를 지정한다. 카운트보기
파일 자식 요소에 img 요소를 포함 파일보기
아이콘 자식 요소에 img 요소를 포함한다. img 요소에 class : ui - li - icon을 지정한다. 아이콘 더보기
레이블 자식 요소 h1 ~ h6 요소를 포함한다. 레이블을 표시하려면
비고 자식 요소 p 요소를 포함한다. 레이블 아래 비고보기
보충 자식 요소 p 요소를 포함한다. p 요소에 class : ui - li - aside를 지정한다. 오른쪽 상단에 보충보기

 

Posted by 다오나무
영삼이의 IT정보2011. 10. 31. 05:08

http://d.hatena.ne.jp/pikotea/20101019/1287484040

jQuery Mobile 참조적인 것을 만들었습니다.

급히 叩き台에서 태클 등이 있으면 댓글주세요!

Page

요소
특성

개요

div
data - role
page
페이지

설정

기본
비고

data - fullscreen
true
전체 화면

false
*

data - theme
임의
a
기본 테마는 a ~ c

Header

요소
특성

개요

div
data - role
header
헤더

Page 포함

설정

기본
비고

data - nobackbtn
true
Back 버튼 자동 표시
(되지 않는 것)

false
*

data - position
inline
*

fixed
화면 하단에 고정 표시

data - theme
임의
a
기본 테마는 a ~ c

Content

요소
특성

개요

div
data - role
content
페이지 내용

Page 포함

설정

기본
비고

data - theme
임의
a
기본 테마는 a ~ c

Footer

요소
특성

개요

div
data - role
footer
바닥글

Page 포함

설정

기본
비고

data - position
inline
*

fixed
화면 하단에 고정 표시

data - id
임의
여러 Page에 동일한 Footer을 정의한다. 화면 전환시 화면이 사라지지 않는다.

동일한 data - id를 가진 Footer를 자식 요소없이 정의한다.

(필수 data - position : fixed)

※ 자식 요소는 동일한 data - id를 가진 HTML 마지막으로 정의한다.

(다른 좋은 방법이 있는지 알 수 없음)

class
ui - bar
바닥글 요소의 자동 패딩

data - theme
임의
a
기본 테마는 a ~ c

Navigation Bar

요소
특성

비고

div
data - role
navbar
화면 전환시 화면이 사라지지 않는다. Footer 요소에 포함한다.
data - id의 차이점은 Footer 내용을 미묘하게 바꾸는 것이 가능 (필수 data - position : fixed)

Page Link

요소
특성

개요

a
-
-

효과와 함께 화면 전환한다.

링크된 Page 요소를 # id로 지정하거나 URL을 상대 경로 지정으로한다.

다음 중 하나를 지정하면 일반 링크된다.

rel : external

target : _blank

data - request - type : http

설정

기본
비고

data - transition
slide
*
화면 전환 효과

slideup

slidedown

pop

fade

flip

data - request - type
http
일반 링크

Dialog

요소
특성

개요

a
data - rel
dialog
링크를 대화로 표시한다.

Page 요소를 # id로 지정하거나 URL을 상대 경로 지정으로한다.

설정

기본
비고

data - transition
slideup
대화 효과

pop
*

flip

Button

요소
특성

개요

input
type
button
버튼

submit

reset

image

a
data - role
button

설정

기본
비고

data - icon
arrow - l
아이콘 종류

arrow - r

arrow - u

arrow - d

delete

plus

minus

check

gear

refresh

forward

back

grid

star

alert

info

data - iconpos
left
*
아이콘 위치

right

notext

class
ui - btn - left
*
버튼 위치

ui - btn - right

ui - btn - active
선택 상태

data - theme
임의
a
기본 테마는 a ~ c

Inline

요소
특성

개요

div
data - inline
true
여러 요소를 1 줄로 표시한다.

false

Control Group

요소
특성

개요

div
data - role
controlgroup
여러 요소를 그룹화한다.

Button, Radio, Checkbox 요소 등

설정

기본
비고

data - type
vertical
*
세로로 그룹화

horizontal
가로로 그룹핑

Grid

요소
특성

비고

div
class
ui - grid - a
ui - grid - a는 가로 2 분할, ui - grid - b는 가로 3 분할.

자식으로 div 요소의 class : ui - block - a - ui - block - c에 대응한다.

ui - grid - b

fieldset
class
ui - grid - a

ui - grid - b

data - theme
임의
a
기본 테마는 a ~ c

Collapsible

요소
특성

비고

div
data - role
collapsible
개폐 가능한 블록. 제목이 필수 (h1 ~ h6 요소)

설정

기본
비고

data - state
collapsed
초기 표시를 닫은 상태로

data - theme
임의
a
기본 테마는 a ~ c

Fieldcontain

요소
특성

비고

div
data - role
fieldcontain
Form의 자식 요소를 묶으면 외형이 약간 변화하지만 상세 불명.
(화면 크기가 바뀌었을 때 위치 조정?)

fieldset

Form Elements

요소
특성

비고

input
type
text
텍스트 입력

password
암호 입력

search
검색창

range
범위 입력

radio
라디오 버튼

label 요소가 필요합니다. label의 for 속성 radio 요소의 id를 설정한다.

checkbox
확인란

label 요소가 필요합니다. label의 for 속성에 checkbox 요소의 id를 설정한다.

select
-
-
셀렉트 박스 입력

모든 option 요소가 Dialog 형식으로 표시되지 않는 경우 Page 형식으로 표시한다.

data - role
slider
플립 토글 스위치

option 요소를 2 개를 필요가있다.

textarea
-
-
텍스트 영역 입력

설정

기본
비고

data - theme
임의
a
기본 테마는 a ~ c

List

요소
특성

비고

ul
data - role
listview
목록

(List / Read - only List)

ol
data - role
listview
번호 매기기 목록

(Numbered List)

설정

기본
비고

data - inset
true
목록 화면 너비로 포장하지 않는다

false
*

data - filter
true
목록에서 검색을 검색 상자 표시

false
*

data - theme
임의
a
기본 테마는 a ~ c

기타 ※ li 요소 등에 대한 지정. 여러 조합 가능

목록 형식
조건
비고

링크 매기기 목록

(Linked List)

자식 요소 a 요소를 포함
링크 표시

상자 목록

(Nested List)

자식 요소 ul 요소를 포함
목록을 중첩

구분 단추 목록

Split button List

자식 요소 a 요소 img 요소, h1 ~ h6 요소, p 요소 등
목록에 여러 요소를 표시하는

분할 목록
li 요소 data - role : list - divider를 지정한다.
목록 제목보기

카운트 버블
자식 요소 span 요소를 마신다. span 요소에 class : ui - li - count를 지정한다.
카운트보기

파일
자식 요소에 img 요소를 포함
파일보기

아이콘
자식 요소에 img 요소를 포함한다. img 요소에 class : ui - li - icon을 지정한다.
아이콘 더보기

레이블
자식 요소 h1 ~ h6 요소를 포함한다.
레이블을 표시하려면

비고
자식 요소 p 요소를 포함한다.
레이블 아래 비고보기

보충
자식 요소 p 요소를 포함한다. p 요소에 class : ui - li - aside를 지정한다.
오른쪽 상단에 보충보기

Posted by 다오나무