외부메모리 -_-

페이지의 풋터에 페이지가 이동되어도 유지되는 가로 네비게이션 바를 생성할 수 있습니다. 풋터의 다른 네비게이션 링크를 클릭하면 페이지가 이동되어지면서도 풋터는 고정되어있는 것을 볼 수 있습니다. 연관된 페이지들의 풋터는 같은 data-id 속성을 가지고 있기 때문에 새로운 페이지로 이동되어도 풋터가 고정됩니다.

고정 풋터의 페이지가 보여질때 활성화된 버튼이 남아 있도록 하고 싶다면 ui-btn-active와 ui-state-persist의 class를 추가하면 됩니다.

<div data-role="footer" data-id="foo1" data-position="fixed"> 
<div data-role="navbar"> 
<ul> 
<li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li> 
<li><a href="footer-persist-b.html">Albums</a></li> 
<li><a href="footer-persist-c.html">Emails</a></li> 
</ul> 
</div><!-- /navbar --> 
< /div><!-- /footer -->

네비바의 Friends를 클릭하면 페이지는 해당 링크를 따라 이동 되어지고, 네비바는 고정된 것 처럼 보이게 됩니다.

이 툴바는 전체 화면을 꽉 채우는 컨텐트를 사용해야하는 특별한 상황에서 사용됩니다. 페이지를 클릭시 해더와 풋터가 보였다 안보였다 하하 원할 때 사용합니다. 보통 사진이나 이미지, 비디오 화면인 경우에 적합합니다.
이를 사용하기 위해서는 data-role=”page” 속성의 div태그에 data-fullscreen=”true”속성을 추가하고, 해더와 풋터에 data-position=”fixed” 속성을 사용하여야 합니다.

Fullscreen 모드는 페이지에 감춰있기 때문에, 모든 컨텐트에서 항상 보여지는 것은 아니니 유의하셔야 합니다. 반면에, fixed 모드는 항상 페이지의 상단과 하단에 보여지며 스크롤로 보여지지 않는 화면에서 터치시 보여지게 됩니다.

<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed"> …. </div>

평소엔 보이다가 화면을 터치하거나 페이지를 스크롤하면 페이지 뒤로 사라지는 툴바를 구현합니다.
이를 위해 툴바 컨테이너에 data-position="fixed" 속성을 추가해 줍니다.

<div data-role="header" data-position="fixed">
	<h1>Fixed toolbars</h1>
</div>

JQM은 보통 header나 footer 안에 존재하는 바에 옵션 아이콘 5개 버튼까지 제공하는데 유용한 기본적인 navbar 위젯을 가지고 있습니다.

Navbar는 data-role=”navbar”를 가지는 컨테이너 엘리먼트로 감싸져 있는 링크들의 리스트로 코드화되어 있습니다. 엥커 태그에 class=”ui-btn-active” 속성을 추가 하면 링크들중 하나를 active(seleted) 상태로 셋팅하게 됩니다. 다음 예제는 footer내에 두개의 버튼으로 이루어진 navbar에서 “One” 버튼을 활성화 하였습니다.

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
< /div><!-- /footer -->

data-role="page" 태그안에 data-role="footer"를 삽입한다.

<div data-role="footer"> 
	<h4>Footer content</h4> 
</div> 

footer 툴바 역시 기본적으로 a테마를 적용받으며 ,쉽게 테마를 변경할 수 있습니다.
옵션 및 설정개념은 header와 매우 비슷합니다.
차이는 footer는 덜 구조적이며 유연하기에 왼쪽이나 오른쪽 자동 정렬을 하지 않습니다.

Adding buttons

footer에 추가된 링크나 버튼 마크업은 자동적으로 버튼으로 변경되어 집니다. 공간절약을 위해 문구와 아이콘의 길이만큼 inline 스타일을 셋팅합니다.

툴바의 이동버튼이나 위젯들 사이에는 어떤 패딩값도 없기때문에 패딩을 적용하고 싶다면 class="ui-bar" 속성을 footer태그에 추가합니다.

<div data-role="footer" class="ui-bar">
	<a href="index.html" data-role="button" data-icon="delete">Remove</a>
	<a href="index.html" data-role="button" data-icon="plus">Add</a>
	<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
	<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

data-role="controlgroup" 과 data-type="horizontal"속성을 추가한 태그로 감싸게 되면 버튼 그룹을 만들수 있습니다.

Adding form elements

폼 속성과 다른 컨텐츠도 툴바에 추가될수있습니다.

<div data-role="footer" class="ui-bar" data-position="inline">
        <label for="select-choice-1">Shipping:</label>
        <select name="select-choice-1" id="select-choice-1">
            <option value="standard">Standard: 7day</option>
            <option value="rush>Rush: 3days</option>
            <option value="express">Express:next day</option>
        </select>
</div>   

Persistent footers

footer가 전체적인 네비게이션 역할을 하는 경우 페이지의 이동중에도 고정된 위치에 보여지길 바랄 겁니다. 이는 JQM에 포함된 영구적인 푸터 특징을 사용하여 이뤄질수 있습니다.

footer가 페이지 이동중에도 자기 위치에 머물 수 있게 하는것은 모든 적절한 페이지들의 footer에 data-id속성을 추가하고, 각각 같은 id값을 사용하여 가능합니다. 현재 페이지와 타겟페이지에 data-id="myfooter"를 추가함으로서, 프레임웍 페이지 애니메이션이 일어나는 동안 같은 곳에 footer 앵커를 유지할 것입니다.

이 효과는 header와 footer에 data-position="fixed" 속성을 셋팅하여야 올바르게 동작할 것입니다.

data-role="page" 태그안에 data-role="header"를 삽입하여 사용합니다.

<div data-role="header"> 
	<h1>Page Title</h1> 
</div>

Default header features

툴바의 기본 테마는 검정색의 a테마이며 data-theme 속성을 추가하여 사용자가 쉽게 테마 변경이 가능합니다. 사용하면 좌측에 back버튼이 자동으로 생성됩니다. 만약 버튼을 사용하지 않거나 다른용도로 사용할경우 data-backbtn="false" 속성을 추가하여 사용합니다.

Adding buttons

기본적인 헤더설정으로 타이틀문구 양쪽으로 버튼을 설정할수 있습니다.

<div data-role="header" data-position="inline">
	<a href="index.html" data-icon="delete">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html" data-icon="check">Save</a>
</div>

Creating custom back buttons

앵커 태그에 data-rel="back" 속성을 추가하면 뒤로가기 버튼처럼 작동합니다.또한, 단순히 뒤로가기 효과만을 원할 경우 data-direction="reverse" 속성을 사용하면 됩니다.

Default button posisioning

하위링크는 자동으로 첫 링크를 왼쪽 버튼 슬롯에 셋팅하고, 두번째 링크는 오른쪽 버튼 슬롯에 셋팅합니다. 그리고 버튼은 기본적으로 a테마를 적용받게 되며 테마를 설정할 경우 data-theme 속성을 추가하여 설정합니다.
<a href="" data-icon="delete" data-theme="b">Cancel</a>

Controlling button position with classes

버튼 위치는 버튼 앵커 태그에 class를 추가하여 조정이 가능합니다. 앵커태그에 ui-btn-left 혹은 ui-btn-right의 class를 추가합니다. 버튼을 오른쪽에 하나만 위치하게 할 경우는 data-backbtn="false"속성을 추가하고 class 속성에 ui-btn-right을 추가하면 됩니다.
<a href="" data-icon="gear" class="ui-btn-right>Options</a>

Customizing the back button text

이전페이지로 돌아가기 버튼의 텍스트를 설정하고 싶다면, data-back-btn-text="previous"속성을 사용하거나, 페이지 플러그인 옵션을 통해 $.mobile.page.prototype.options.backBtnText="previous"로 셋팅 가능합니다.

Default back button style

$.mobile.page.prototype.options.backBtnTheme="a"를 사용하여 돌아가기 버튼의 테마를 변경할수 있습니다.

Jquery Mobile을 사용하기 위해서는 html문서의 head태그에 3가지 파일을 참조해 주면 됩니다.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head> 
<body> 

...

</body>
</html>

본문의 내용은 div태그 안에 data-role="page" 안에 구현합니다.

<div data-role="page"> 
	<div data-role="header">...</div> 
	<div data-role="content">...</div> 
	<div data-role="footer">...</div> 
</div>

정규식(오라클10g부터 사용가능)

WHERE REGEXP_LIKE(name, 'aa|bb|cc')

1) checkbox checked 여부

id 인 경우 : $('input:checkbox [ id="checkbox_id" ]').is(":checked") == true;
name인 경우 : $('input:checkbox [ name="checkbox_name"]').is(":checked") == true;

2) checkbox 전체 갯수 : $('input:checkbox [ name="checkbox_name"]').length

3) checkbox 선택된 갯수 : $('input:checkbox [ name="checkbox_name"]:checked').length

4) checkbox 전체 순회 하며 checked 처리

$('input:checkbox [ name="checkbox_name"]').each(function() {
        this.checked = true;
        if ( $(this).is(":checked") ) {
                  처리로직;        
        }
});

5) checkbox value 값 가져오기

$('input:checkbox [ id="checkbox_id" ]').val();

5-1) checkbox value 여러개 값 한번에 가져오기

$('input[id="checkbox_id"]:checkbox:checked').map(function(){
        return $(this).val();
}).get().join(",");

6) checkbox checked 처리하기

$('input:checkbox [ id="checkbox_id"]').attr("checked", true);

압축 풀때

.tar확장자     tar xvf <파일명>
.tar.gz나.tgz확장자    tar xvfz <파일명>

압축 할때

.tar확장자     tar cvf <파일명.tar> <압축할 폴더명>
.tar.gz나.tgz확장자    tar cvfz <파일명.tar.gz> <압축할 폴더명>
                              tar cvfz <파일명.tgz> <압축할 폴더명>

압축하기 -c(create)
압축풀기 -x(extract)
압축 -z(없으면 압축하지않고 단순 묶음(tar))
퍼미션 -p(파일이나 폴더의 퍼미션까지 압축