Change the appearance of an input field that does not have focus
Firebug 를 이용하면 input fields 가 ui-input-text CSS class를 가지고 있는 것을 확인 할 수 있습니다. 이 클래스는 <input> 나 <textarea> elements에 할당 돼 있습니다. 만약 <input> element가 search field 이면 그것을 둘러싼 <div>가 jQuery Mobile에 의해서 생성됩니다. 그리고 ui-input-search CSS class 가 그곳에 할당됩니다.
input fields를 바꾸기 위해 이 CSS classes들을 사용하겠습니다.
Styling input fields
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-input-text, .ui-input-search {
color : white;
background-color : black;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
Name : <input type=text value=Sarrion /> <br />
Description : <textarea> Nice studio for renovation </textarea> <br />
Search : <input type=search value="Your name" />
</div>
</div>
</body>
</html>
<script>
</script>
tistory459_01.html
Change the appearance of an input field that has focus
만약 input field에 focus 가 가면 jQuery Mobile은 ui-focus CSS class를 할당합니다.
이 클래스는 다음 element 들에 영향을 미칩니다.
on <input> element for a single line input field,
on <textarea> element for a multiline input field,
on the <div> element surrounding the <input> element for a search field. This <div> element is automatically created by jQuery Mobile.
이전 처럼 이 클래스를 이용해서 focus가 됐을 때 일어날 스타일링을 하실 수 있습니다.
Styling fields that have focus
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-focus {
color : white;
background-color : black;
}
.ui-input-search.ui-focus > .ui-input-text {
color : white;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
Name : <input type=text value=Sarrion /> <br />
Description : <textarea> Nice studio for renovation </textarea> <br />
Search : <input type=search value="Your name" />
</div>
</div>
</body>
</html>
<script>
</script>
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| selection 리스트 열고 닫기 (0) | 2012.11.13 |
|---|---|
| Ajax 로 selection list 삽입하기 (0) | 2012.11.12 |
| HTML element를 jQuery Mobile selection list로 바꾸기 (0) | 2012.11.12 |
| 다이나믹하게 selection list 생성하기 (0) | 2012.11.11 |
| input field 관련 예제들 (0) | 2012.11.10 |
| input field에서 이벤트 관리하기 (0) | 2012.11.09 |
| input field 에 값 할당하기 (0) | 2012.11.09 |
| Ajax 로 input fields 삽입하기 (0) | 2012.11.07 |
| HTML element 를 jQuery Mobile 의 input field로 변환하기 (0) | 2012.11.07 |
| 다이나믹하게 input field 생성하기 (0) | 2012.11.07 |