생활코딩 jQuery 강의의 강의노트입니다(https://opentutorials.org/course/53)

 

 

<html>

<body>

<div class="welcome"></div>

<div class="welcome"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');

</script>

</body>

</html>

 

 

 

<html>

<head>

<script type="text/javascript">

function addEvent(target, eventType,eventHandler, useCapture) {

if (target.addEventListener) { // W3C DOM

target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);

} else if (target.attachEvent) { // IE DOM

var r = target.attachEvent("on"+eventType, eventHandler);

}

}

 

 

function clickHandler(event) {

var nav = document.getElementById('navigation');

for(var i = 0; i < nav.childNodes.length; i++) {

var child = nav.childNodes[i];

if(child.nodeType==3)

continue;

child.className = '';

}

event.target.className = 'selected';

}

 

addEvent(window, 'load', function(eventObj) {

var nav = document.getElementById('navigation');

for(var i = 0; i < nav.childNodes.length; i++) {

var child = nav.childNodes[i];

if(child.nodeType==3)

continue;

addEvent(child, 'click', clickHandler);

}

})

</script>

<style type="text/css">

#navigation li {

list-style:none;

float:left;

padding:5px;

}

#navigation {

cursor:pointer;

}

#navigation .selected {

background-color:red;

color:white;

}

</style>

</head>

<body>

<ul id="navigation">

<li>HTML</li>

<li>CSS</li>

<li>javascript</li>

<li class="selected">jQuery</li>

<li>PHP</li>

<li>mysql</li>

</ul>

</body>

</html>

 

jQuery

 

<html>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$('#navigation li').live('click', function() {

$('#navigation li').removeClass('selected');

$(this).addClass('selected');

})

</script>

<style type="text/css">

#navigation li {

list-style:none;

float:left;

padding:5px;

}

#navigation {

cursor:pointer;

}

#navigation .selected {

background-color:red;

color:white;

}

</style>

</head>

<body>

<ul id="navigation">

<li>HTML</li>

<li>CSS</li>

<li>javascript</li>

<li class="selected">jQuery</li>

<li>PHP</li>

<li>mysql</li>

</ul>

</body>

</html>

 

 

 

<script type="text/javascript">

//$ 대신 jQuery 사용

jQuery('body').html('hello world');

</script>

 

<script type="text/javascript">

//$ 함수의 지역변수로 선언해서 외부에 있을지 모르는 라이브러리의 $와의 충돌을 예방

(function($){

$('body').html('hello world');

})(jQuery)

</script>

 

 

 

<html>

<body>

<ul>

<li>test2</li>

</ul>

<ul class="foo">

<li>test</li>

</ul>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

(function($){

$('ul.foo').click( function() {

$('li', this).css('background-color','red');

});

})(jQuery)

</script>

</body>

</html>

 

예제 2. jQuery( element )

 

<html>

<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

jQuery(document.body).css( "background-color", "black" );

</script>

</body>

</html>

 

 

 

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

body{

font-size:12px;

}

.selected,.selected_parent {

background-color: red !important;

color:white;

border:2px solid red !important;

}

input.btn {

width:130px;

}

ul, .live{

float:left;

width:150px;

padding-left:20px;

margin:0;

}

textarea{

float:left;

width: 400px;

height:150px;

font-size:11px;

margin-left:20px;

}

.clear{

clear: both;

}

.sample{

margin-bottom: 20px;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<fieldset>

<legend> 기본 </legend>

<div class="sample">

<ul id="tutorials">

<li class="tutorial" id="HTML"> HTML </li>

<li class="tutorial" id="CSS"> CSS </li>

<li class="tutorial" id="javascript"> javascript </li>

<li class="tutorial" id="jquery"> jQuery </li>

<li class="tutorial" id="PHP"> PHP </li>

<li class="tutorial" id="MYSQL"> MYSQL </li>

</ul>

<textarea>

<ul id="tutorials">

<li class="tutorial" id="HTML"> HTML </li>

<li class="tutorial" id="CSS"> CSS </li>

<li class="tutorial" id="javascript"> javascript </li>

<li class="tutorial" id="jquery"> jQuery </li>

<li jclass="tutorial" id="PHP"> PHP </li>

<li class="tutorial" id="MYSQL"> MYSQL </li>

</ul>

</textarea>

<div class="clear"></div>

</div>

<input class="btn" type="button" id="#jquerybtn" value="#jquery" /> - id 선택자 <br />

<input class="btn" type="button" id=".tutorial" value=".tutorial" /> - class 선택자 <br />

<input class="btn" type="button" value="li" /> - 엘리먼트 선택자 <br />

<input class="btn" type="button" value="#jquery, #MYSQL" /> - 다중 선택자 <br />

</fieldset>

 

 

<fieldset>

<legend> filter </legend>

<div class="sample">

<ul id="list">

<li> HTML </li>

<li> CSS </li>

<li> javascript </li>

<li> PHP </li>

<li> MYSQL </li>

</ul>

<textarea>

<ul id="list">

<li> HTML </li>

<li> CSS </li>

<li> javascript </li>

<li> PHP </li>

<li> MYSQL </li>

</ul>

</textarea>

<div class="clear"></div>

</div>

<input class="btn" type="button" value="#list li:eq(2)" /> - 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:gt(1)" /> - 인자 보다 인덱스가 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:lt(2)" /> - 인자 보다 인덱스가 작은 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:even" /> - 첫번째, 세번째... 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:odd" /> - 두번째, 네번째.... 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:first" /> - 첫번재 인덱스 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:last" /> - 마지막 인덱스 엘리먼트에 대한 선택자 <br />

</fieldset>

 

 

<fieldset>

<legend> 속성 </legend>

<div class="sample">

<ul id="attribute">

<li target="ABCD">ABCD</li>

<li target="BCDE">BCDE</li>

<li target="CDEF">CDEF</li>

<li target="DEFG">DEFG</li>

<li target="EFGH">EFGH</li>

<li id="FGHI" target="FGHI">FGHI</li>

</ul>

<textarea>

<ul id="attribute">

<li target="ABCD">ABCD</li>

<li target="BCDE">BCDE</li>

<li target="CDEF">CDEF</li>

<li target="DEFG">DEFG</li>

<li target="EFGH">EFGH</li>

<li id="FGHI" target="FGHI">FGHI</li>

</ul>

</textarea>

<div class="clear"></div>

</div>

<input class="btn" type="button" value="[target*=&quot;BC&quot;]" /> - 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target=&quot;DEFG&quot;]" /> - 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target!=&quot;DEFG&quot;]" /> - 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target^=&quot;B&quot;]" /> - 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target$=&quot;H&quot;]" /> - 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target]" /> - 속성이 존재하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target][id]" /> - 속성들이 존재하는 엘리먼트를 찾아내는 선택자

</fieldset>

<fieldset>

<legend>Form</legend>

<div class="live">

<div>

<input type="text" disabled="disabled" value="disabled" />

<input type="text" value="enabled"/>

</div>

<div><input type="checkbox" checked="checked" /></div>

<div><input type="checkbox" /></div>

</div>

<textarea class="sample">

<div>

<input type="text" disabled="disabled" value="disabled" />

<input type="text" value="enabled"/>

</div>

<div><input type="checkbox" checked="checked" /></div>

<div><input type="checkbox" /></div>

</textarea>

<div class="clear"></div>

<input class="btn" type="button" value="[type=&quot;text&quot;]" /> - 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다. <br />

<input class="btn" type="button" value="[type=&quot;text&quot;]:disabled" /> - disabled 속성의 값이 disabled 엘리먼트를 찾아내는 선택자<br />

<input class="btn" type="button" value="[type=&quot;text&quot;]:enabled" /> - disabled 속성의 값이 enabled 엘리먼트를 찾아내는 선택자<br />

<input class="btn" type="button" value="input:checked" /> - 체크박스 체크가 엘리먼트를 찾아내는 선택자 <br />

</fieldset>

<script>

$('input').live('click', function() {

$this = $(this);

$('*').removeClass('selected');

switch($this.attr('value')) {

case '#jquery':

$('#jquery').addClass('selected');

break;

case '.tutorial':

$('.tutorial').addClass('selected');

break;

case 'li':

$('li').addClass('selected');

break;

case '#jquery, #MYSQL':

$('#jquery, #MYSQL').addClass('selected');

break;

case '#list li:eq(2)':

$('#list li:eq(2)').addClass('selected');

break;

case '#list li:gt(1)':

$('#list li:gt(1)').addClass('selected');

break;

case '#list li:lt(2)':

$('#list li:lt(2)').addClass('selected');

break;

case '#list li:even':

$('#list li:even').addClass('selected');

break;

case '#list li:odd':

$('#list li:odd').addClass('selected');

break;

case '#list li:first':

$('#list li:first').addClass('selected');

break;

case '#list li:last':

$('#list li:last').addClass('selected');

break;

case '[target*="BC"]':

$('li[target*="BC"]').addClass('selected');

break;

case '[target="DEFG"]':

$('li[target="DEFG"]').addClass('selected');

break;

case '[target!="DEFG"]':

$('li[target!="DEFG"]').addClass('selected');

break;

case '[target^="B"]':

$('li[target^="B"]').addClass('selected');

break;

case '[target$="H"]':

$('li[target$="H"]').addClass('selected');

break;

case '[target]':

$('li[target]').addClass('selected');

break;

case '[target][id]':

$('li[target][id]').addClass('selected');

break;

case '[type="text"]':

$('[type="text"]').addClass('selected');

break;

case '[type="text"]:disabled':

$('[type="text"]:disabled').addClass('selected');

break;

case '[type="text"]:enabled':

$('[type="text"]:enabled').addClass('selected');

break;

case 'input:checked':

$('input:checked').parent().addClass('selected');;

break;

 

}

})

</script>

</body>

</html>

 

 

 

<html>

<body>

<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');

</script>

</body>

</html>

 

 

예제2. javascript DOM 이용해서 코딩하는 경우

 

<html>

<body>

<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

<script type="text/javascript">

var tutorial = document.getElementById('tutorial');

tutorial.setAttribute('href', 'http://jquery.org');

tutorial.setAttribute('target', '_blank');

tutorial.style.color = 'red';

</script>

</body>

</html>

 

 

 

<html>

<body>

<ul class="first">

<li class="foo"> list item 1 </li>

<li> list item 2 </li>

<li class="bar"> list item 3 </li>

</ul>

<ul class="second">

<li class="foo"> list item 1 </li>

<li> list item 2 </li>

<li class="bar"> list item 3 </li>

</ul>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');</script>

</body>

</html>

 

 

 

<html>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

function clickHandler(e){

alert('thank you');

}

$(document).bind('ready', function(){

$('#click_me').bind('click', clickHandler);

$('#remove_event').bind('click', function(e){

$('#click_me').unbind('click', clickHandler);

});

$('#trigger_event').bind('click', function(e){

$('#click_me').trigger('click');

});

})

</script>

</head>

<body>

<input id="click_me" type="button" value="click me" />

<input id="remove_event" type="button" value="unbind" />

<input id="trigger_event" type="button" value="trigger" />

</body>

</html>

 

 

예제2. 이벤트 헬퍼

 

<html>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

function clickHandler(e){

alert('thank you');

}

$(document).ready(function(){

$('#click_me').click(clickHandler);

$('#remove_event').click(function(e){

$('#click_me').unbind('click', clickHandler);

});

$('#trigger_event').click(function(e){

$('#click_me').trigger('click');

});

})

</script>

</head>

<body>

<input id="click_me" type="button" value="click me" />

<input id="remove_event" type="button" value="unbind" />

<input id="trigger_event" type="button" value="trigger" />

</body>

</html>

 

 

예제3. live 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 있다.

 

<html>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

function clickHandler(e) {

alert('thank you');

}

$('#click_me').live('click', clickHandler);

$('#remove_event').live('click', function(e) {

$('#click_me').die('click', clickHandler);

});

$('#trigger_event').live('click', function(e) {

$('#click_me').trigger('click');

});

</script>

</head>

<body>

<input id="click_me" type="button" value="click me" />

<input id="remove_event" type="button" value="unbind" />

<input id="trigger_event" type="button" value="trigger" />

</body>

</html>

 

 

 

<!-- http://api.jquery.com/append/ -->

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

I would like to say:

</p>

<script>$("p").append("<strong>Hello</strong>");</script>

</body>

</html>

 

 

<!-- http://api.jquery.com/after/ -->

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

I would like to say:

</p>

<script>$("p").after("<b>Hello</b>");</script>

</body>

</html>

 

 

 

<!-- http://api.jquery.com/wrap/ -->

<!DOCTYPE html>

<html>

<head>

<style>

div {

border:2px blue solid;

margin:2px;

padding:2px;

}

p {

background:yellow;

margin:2px;

padding:2px;

}

strong {

color:red;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<span>Span Text</span>

<strong>What about me?</strong>

<span>Another One</span>

<script>$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>

</body>

</html>

 

 

 

<!-- http://api.jquery.com/remove/ -->

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

margin:6px 0;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

Hello

</p>

how are

<p>

you?

</p>

<button>

Call remove() on paragraphs

</button>

<script>

$("button").click( function () {

$("p").remove();

});

</script>

</body>

</html>

 

 

<!-- http://api.jquery.com/replaceAll/ -->

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p> Hello </p>

<p> cruel </p>

<p> World </p>

<script>$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples </script>

</body>

</html>

 

 

<!-- http://api.jquery.com/toggleClass/ -->

<!DOCTYPE html>

<html>

<head>

<style>p {

margin: 4px;

font-size:16px;

font-weight:bolder;

cursor:pointer;

}

.blue {

color:blue;

}

.highlight {

background:yellow;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p class="blue"> Click to toggle </p>

<p class="blue highlight"> highlight </p>

<p class="blue"> on these </p>

<p class="blue"> paragraphs </p>

<script>

$("p").click( function () {

$(this).toggleClass("highlight");

});

</script>

</body>

</html>

 

 

 

 

<!DOCTYPE html>

<html>

<head>

<style>p {

color:blue;

margin:8px;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<input type="text" value="some text"/>

<p>

</p>

<script>$("input").keyup( function () {

var value = $(this).val();

$("p").text(value);

}).keyup();</script>

</body>

</html>

 

 

 

<!DOCTYPE html>

<html>

<head>

<style>

span {

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

<input type="text" />

<span></span>

</p>

<script>

$("input").focus( function () {

$(this).next("span").html('focus');

}).blur( function() {

$(this).next("span").html('blur');

}).change(function(e){

alert('change!! '+$(e.target).val());

}).select(function(){

$(this).next('span').html('select');

});

</script>

</body>

</html>

 

예제2. (.submit(), .val())

 

<!DOCTYPE html>

<html>

<head>

<style>

p {

margin:0;

color:blue;

}

div, p {

margin-left:10px;

}

span {

color:red;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

Type 'correct' to validate.

</p>

<form action="javascript:alert('success!');">

<div>

<input type="text" />

 

<input type="submit" />

</div>

</form>

<span></span>

<script>

$("form").submit( function() {

if ($("input:first").val() == "correct") {

$("span").text("Validated...").show();

return true;

}

$("span").text("Not valid!").show().fadeOut(1000);

return false;

});

</script>

</body>

</html>

 

탐색

 

<!-- http://opentutorials.org/example/jquery/example.traversing.html -->

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>

body{

font-size:11px;

width:1000px;

}

#panel div,#panel li,#panel ul{

border:2px solid black;

margin:10px;

padding:10px;

}

#panel ul{

list-style: none;

}

#panel .s{

border:2px solid red;

background-color: #808080;

}

#panel #root{

margin-top:0;

}

textarea{

width:982px;

height:100px;

font-size:11px;

overflow: visible;

}

#help{

float:left;

width:500px;

height:450px;

overflow-y: scroll;

overflow-x: hidden

}

#panel{

float:left;

width:500px;

}

#help table{

border:1px solid gray;

border-collapse: collapse;

width:100%;

}

#help table td{

border:1px solid gray;

padding:5px;

}

#help .title{

color:white;

background-color:#555;

padding:3px;

}

#help .title.checked{

background-color:red;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<div id="wrapper">

<p>

javascript 입력 후에 엔터를 눌러주세요.

<textarea id="code"></textarea></p>

<div id="help">

<table>

<tr id="add"><td><div class="title">.add(selector)</div>엘리먼트를 추가한다</td></tr>

<tr id="andSelf"><td><div class="title">.andSelf()</div>현재 엘리먼트 셋에 이전 엘리먼트 셋을 한다</td></tr>

<tr id="children"><td><div class="title">.children([selector])</div>자식 엘리먼트를 선택한다</td></tr>

<tr id="closet"><td><div class="title">.closest(selector)</div>가장 가까운 selector 조상 엘리먼트를 탐색한다</td></tr>

<tr id="each"><td><div class="title">.each(function(index,Element))</div>현재 엘리먼트 셋에 반복 작업을 실행한다</td></tr>

<tr id="end"><td><div class="title">.end()</div>이전 체인 컨텍스트로 돌아간다.</td></tr>

<tr id="eq"><td><div class="title">.eq(index)</div>현재 엘리먼트 셋에서 index 해당하는 엘리먼트를 선택한다</td></tr>

<tr id="filter"><td><div class="title">.filter(selector)</div>현재 엘리먼트 셋에서 selector 해당하는 엘리먼트를 선택한다</td></tr>

<tr id="find"><td><div class="title">.find(selector)</div>현재 엘리먼트 셋에서 selector 해당하는 자손 엘리먼트를 선택한다</td></tr>

<tr id="first"><td><div class="title">.first()</div>현재 엘리먼트 첫번째 엘리먼트를 선택한다</td></tr>

<tr id="last"><td><div class="title">.last()</div>현재 엘리먼트 마지막 엘리먼트를 선택한다</td></tr>

<tr id="next"><td><div class="title">.next()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트를 선택한다</td></tr>

<tr id="nextAll"><td><div class="title">.nextAll()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="prev"><td><div class="title">.prev()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트를 선택한다</td></tr>

<tr id="prevAll"><td><div class="title">.prevAll()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="siblings"><td><div class="title">.siblings()</div>각각의 엘리먼트에 대한 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="slice"><td><div class="title">.slice(start, [end])</div>현제의 엘리먼트 start에서 end까지의 엘리먼트를 선택한다</td></tr>

</table>

</div>

<div id="panel">

<div id="root">

div#root

<div>

div

</div>

<div>

div

<ul>

ul

<li>li</li>

<li>li</li>

<li>li</li>

<li>li</li>

</ul>

</div>

<div>

div

</div>

</div>

</div>

</div>

<script>

var $wrapper = $('#root').addClass('selected');

$('#code').keydown(function(e){

if(e.keyCode == 13){

eval($(this).val());

return false;

}

}).change(function(){

eval($(this).val());

});

$('tr').click(function(){

$(this).find('.title').toggleClass('checked');

})

</script>

</body>

</html>

 

 

에니메이션

 

 

<!DOCTYPE html>

<html>

<head>

<style> span {

color:red;

cursor:pointer;

}

div {

margin:3px;

width:80px;

height:80px;

}

div {

background:#f00;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<input type="button" id="fadeout" value="fade out" />

<input type="button" id="fadein" value="fade in" />

<input type="button" id="hide" value="hide" />

<input type="button" id="show" value="show" />

<input type="button" id="slidedown" value="slide down" />

<input type="button" id="slideup" value="slide up" />

<input type="button" id="mix" value="mix" />

<div id="target">

target

</div>

<script>$('input[type="button"]').click( function(e) {

var $this = $(e.target);

switch($this.attr('id')) {

case 'fadeout':

$('#target').fadeOut('slow');

break;

case 'fadein':

$('#target').fadeIn('slow');

break;

case 'hide':

$('#target').hide();

break;

case 'show':

$('#target').show();

break;

case 'slidedown':

$('#target').hide().slideDown('slow');

break;

case 'slideup':

$('#target').slideUp('slow');

break;

case 'mix':

$('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});

break;

}

})

</script>

</body>

</html>

 

 

예제2.

 

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color:#bca;

width:100px;

border:1px solid green;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<button id="go">

&raquo; Run

</button>

 

<div id="block">

Hello!

</div>

<script>/* Using multiple unit types within one animation. */

 

$("#go").click( function() {

$("#block").animate({

width: "300px",

opacity: 0.4,

marginLeft: "50px",

fontSize: "30px",

borderWidth: "10px"

}, 3000);

});</script>

</body>

</html>

 

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<div id="result"></div>

<input type="text" id="msg" />

<input type="button" value="get result" id="getResult" />

<script>

$('#getResult').click( function() {

$('#result').html('');

$.ajax({

url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',

dataType:'json',

type:'POST',

data:{'msg':$('#msg').val()},

success:function(result){

if(result['result']==true){

$('#result').html(result['msg']);

}

}

});

})

</script>

</body>

</html>

예제 1-2. 서버 로직

 

<?

echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));

?>

 

 

 

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag JQuery

1.   $.mobile.changePage() 메소드


    


2.   $.mobile.loadPage() 메소드





3.   $.mobile.loading() 메소드



19-01.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>19-01</title>

    <link rel="stylesheet"  href="js/jquery.mobile-1.3.2.css" />

    <script src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript">

      $(document).on('mobileinit', function() {

        $.mobile.loader.prototype.options.theme = "a";

        $.mobile.loader.prototype.options.text = "loading";

        $.mobile.loader.prototype.options.textonly = false;

        $.mobile.loader.prototype.options.textVisible = false;

      });

      

      $(document).on('pagecreate', function() {

        

        //디폴트임

        $('#default').on('tap', function(event) {

          $.mobile.loading('show', {

            theme: $.mobile.loader.prototype.options.theme,

            text: $.mobile.loader.prototype.options.text,

            textonly: $.mobile.loader.prototype.options.textonly,

            textVisible: $.mobile.loader.prototype.options.textVisible

          });

        });

        

        // 바꿔봄

        $('#textonly').on('tap', function(event) {

          $.mobile.loading('show', {

            theme: $.mobile.loader.prototype.options.theme,

            text: "텍스트만 표시되는 로더",

            textonly: true,

            textVisible: true

          });

        });


        //텍스트를 바꿔봄 테마도 바꿈

        $('#theme_a').on('tap', function(event) {

          $.mobile.loading('show', {

            theme: "a",

            text: "페이지 로딩 (Theme a)",

            textonly: false,

            textVisible: true

          });

        });

        

        $('#theme_b').on('tap', function(event) {

          $.mobile.loading('show', {

            theme: "b",

            text: "페이지 로딩 (Theme b)",

            textonly: false,

            textVisible: true

          });

        });

        

        

        //진행 상태를 제거해라

        $('#hide').on('tap', function(event) {

          $.mobile.loading('hide');

        });

        

      });   

                

    </script>

    <!--역시 mobile 참조하기 전에 스크립트를 짜야된다. -->

    <script src="js/jquery.mobile-1.3.2.js"></script>

  </head>


  <body>

    <div data-role="page" id="main">

      <div data-role="header" data-position="fixed">

        <h3>Utilities</h3> 

      </div>

      <div data-role="content">

        <p>메시지 로더</p>

        <div>

          <button id="default">Default Loader</button>

          <button id="textonly">Text Only</button>

          <button id="theme_a" data-theme="a">Theme a</button>

          <button id="theme_b" data-theme="b">Theme b</button>

          <button id="hide">Hide</button>

        </div>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력화면




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

1.   mobileinit 이벤트


위와 같이 중간에 넣어야 한다.




2.   기본 환경 설정


3.   페이지 초기화 이벤트 (pagebeforecreate, pagecreate, pageinit)




4.   페이지 변경 이벤트 (pagebeforechange, page change, pagechangefailed)



5.   페이지 전환 이벤트 (pagebeforeshow, pagebeforehide, pageshow, pagehide)




6.   페이지 로드 이벤트(pagebeforeload, pageload, pageloadfailed)



7.   tap, taphold 이벤트



8.   swipe, swipeleft, swiperight 이벤트





9.   orientationchange 이벤트




18-01.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>18-01</title>

    <link rel="stylesheet"  href="js/jquery.mobile-1.3.2.css" />

    <script src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript">   

        // mobileinit 이벤트가 발생할 경우의 처리

        $(document).on('mobileinit', function(event) {

                 // 기본 화면 전환이 fade 것을 slide 변경합니다.

                 //extend 이용해서 쓸수있다.

          $.extend($.mobile, {

            defaultPageTransition : "slide",

          });

          

          console.log(event.type);

        });

        

        // 페이지 초기화 이벤트 발생

        $(document).on({

          pagebeforecreate : function(event) { console.log(event.type);},

          pagecreate : function(event) { console.log(event.type);},

          pageinit : function(event) { console.log(event.type);}

        });

        

        // 페이지 변경 이벤트 발생

        $(document).on({

          pagebeforechange : function(event) { console.log(event.type);},

          pagechange : function(event) { console.log(event.type);},

          pagechangefailed : function(event) { console.log(event.type);},

        });

        

        // 페이지 전환 이벤트 발생

        $(document).on({

          pagebeforeshow : function(event) { console.log(event.type);},

          pageshow : function(event) { console.log(event.type);},

          pagebeforehide : function(event) { console.log(event.type);},

          pagehide : function(event) { console.log(event.type);}

        });       

    

        // 페이지 로드 이벤트 발생

        $(document).on({

          pagebeforeload : function(event) { console.log(event.type);},

          pageload : function(event) { console.log(event.type);},

          pageloadfailed : function(event) { console.log(event.type);}

        });

        

        

    </script>

    <!--mobile 자바스크립트를 참조하기 전에 반드시 해야한다. -->

    <script src="js/jquery.mobile-1.3.2.js"></script>

  </head>


  <body>

    <div data-role="page" id="first">

      <div data-role="header" data-position="fixed">

        <h3>Events</h3> 

      </div>

      <div data-role="content">

        <p>첫번째 페이지</p>

        <div>

          <a href="#second" data-role="button"> 번째 페이지로</a>

          <a href="18-02.html" data-role="button"> 번째 페이지(외부)</a>    

        </div>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

    <div data-role="page" id="second" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>Events</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지</p>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



18-02.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>18-03</title>

  </head>


  <body>

    <div data-role="page" id="third" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>Events</h3> 

      </div>

      <div data-role="content">

        <p> 번째 페이지(외부)</p>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력화면

아래 콘솔화면에 뜨는 것을 볼 수 있다.



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

1.   레이아웃 그리드


ui-block-a 클래스가 가장 맨 앞임





2.   콜렙서블 컨텐트 블록






3.   콜렙서블 셋(아코디언)



4.   테마롤러 디자인하기





테마롤러 사용법


http://themoeroller.jquerymobile.com으로 접속한뒤


사용하는 jquery 버젼을 설정해준다.


테마롤러를 이용하면 사용자 정의 css파일을 얻을 수 있다.



위의 팔레트에서 드래그앤 드롭으로 아래와같이 커스터마이징 테마를 쉽게 만들 수 있다.



다운로드 버튼을 누르면



다음과 같이 나와서 테마 이름을 쓰고


<link rel=”stylesheet” href=”css/themes/my-custom-theme.css”/>를 추가해서 써야된다고 써있다.


다운받은 파일을 풀어보면 다음과 같이 나온다.



themes폴더를 카피해서 앱타나 스튜디오 프로젝트에 넣는다.




여기서 프로젝트.html파일에


첫번째는 자기가 만든 테마.css파일을 넣고 두번째는 jquery.mobile.structure-1.3.2.css를 반드시 넣어야한다. (커스텀 테마적용시!)


<link rel="stylesheet" href="themes/kch.css" />

<link rel="stylesheet"  href="js/jquery.mobile.structure-1.3.2.css" />


 


출력화면을 먼저 살펴보면 다음과 같이



적용됨을 알 수 있다.


17-01.html


<!DOCTYPE html>

<html lang="en">

        <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>17-01</title>

        <link rel="stylesheet" href="themes/kch.css" />

        <link rel="stylesheet"  href="js/jquery.mobile.structure-1.3.2.css" />

        <script src="js/jquery-1.11.1.js"></script>

        <script src="js/jquery.mobile-1.3.2.js"></script>

        </head>

        <body>

        <div data-role="page" id="formtheme" data-add-back-btn="true" data-theme="a">

        <div data-role="header" data-position="fixed" data-theme="a">

        <h3> 테마 적용</h3>

        <a href="#index" data-role="button" data-icon="home"

        data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

        </div>

        <div data-role="content" data-theme="a">

        <form name="myform">

        <div data-role="fieldcontain">

        <label for="textinput">텍스트 입력 필드</label>

        <input type="text" id="textinput" placeholder="입력하세요."/>

        </div>

        <div data-role="fieldcontain">

        <label for="slider">슬라이더</label>

        <input type="range" id="slider" value="0" min="0" max="100" step="1"/>

        </div>

                <div data-role="fieldcontain">

        <label for="flipswitch">플립 토글 스위치</label>

        <select name="flipswitch" id="flipswitch" data-role="slider">

        <option value="off">Off</option>

        <option value="on">On</option>

        </select>

        </div>

        <div data-role="fieldcontain">

        <fieldset data-role="controlgroup">

        <legend>

        라디오 버튼(세로)

        </legend>

        <input type="radio" name="radiov" value="선택 #1" id="radio1" checked="checked"/>

        <label for="radio1">선택 #1</label>

        <input type="radio" name="radiov" value="선택 #2" id="radio2"/>

        <label for="radio2">선택 #2</label>

        <input type="radio" name="radiov" value="선택 #3" id="radio3"/>

        <label for="radio3">선택 #3</label>

        </fieldset>

        </div>

                <div data-role="fieldcontain">

        <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>

        라디오 버튼(가로)

        </legend>

        <input type="radio" name="radioh" value="선택 #1" id="radio4" checked="checked"/>

        <label for="radio4">#1</label>

        <input type="radio" name="radioh" value="선택 #2" id="radio5"/>

        <label for="radio5">#2</label>

        <input type="radio" name="radioh" value="선택 #3" id="radio6"/>

        <label for="radio6">#3</label>

        </fieldset>

                </div>

        <div data-role="fieldcontain">

        <fieldset data-role="controlgroup">

        <legend>

        체크박스 버튼

        </legend>

        <input type="checkbox" name="checkbox1" value="선택 #1" id="checkbox1"/>

        <label for="checkbox1">선택 #1</label>

        <input type="checkbox" name="checkbox2" value="선택 #2" id="checkbox2"/>

        <label for="checkbox2">선택 #2</label>

        <input type="checkbox" name="checkbox3" value="선택 #3" id="checkbox3"/>

        <label for="checkbox3">선택 #3</label>

        </fieldset>

        </div>

        <div data-role="fieldcontain">

        <label for="selectnative">셀렉트 메뉴(native)</label>

        <select name="selectnative" id="selectnative">

        <option value="">선택하세요</option>

        <option value="선택 #1">선택 #1</option>

        <option value="선택 #2">선택 #2</option>

        <option value="선택 #3">선택 #3</option>

        <option value="선택 #4">선택 #4</option>

        </select>

        </div>

        <div data-role="fieldcontain">

        <label for="selectjqm">셀렉트 메뉴(jqm)</label>

        <select name="selectjqm" id="selectjqm" data-native-menu="false" multiple="multiple">

        <option value="">선택하세요</option>

        <option value="선택 #1">선택 #1</option>

        <option value="선택 #2">선택 #2</option>

        <option value="선택 #3">선택 #3</option>

        <option value="선택 #4">선택 #4</option>

        </select>

        </div>

        </form>

        <label for="columngrid">컬럼 레이아웃 그리드</label>

        <div name="columngrid" id="columngrid">

        <div class="ui-grid-a">

        <div class="ui-block-a">

        <button data-theme="c" data-icon="arrow-l" >

        Previous

        </button>

        </div>

        <div class="ui-block-b">

        <button data-theme="c" data-icon="arrow-r" data-iconpos='right'>

        Next

        </button>

        </div>

        </div>

        <div class="ui-grid-b">

        <div class="ui-block-a">

        <button data-theme="c">

        Cancel

        </button>

        </div>

        <div class="ui-block-b">

        <button data-theme="a">

        No

        </button>

        </div>

        <div class="ui-block-c">

                <button data-theme="b">

        Yes

        </button>

        </div>

        </div>

        <div class="ui-grid-solo">

        <div class="ui-block-a">

        <button data-theme="b">

        More

        </button>

        </div>

        </div>

        </div>

        <label for="collapsibleblock">콜랩서블 컨텐트 블록</label>

        <!-- collapsible data-collpased="false"p태그는 paragraph 문단-->

        <div name="collapsibleblock" id="collapsibleblock" data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">

                <h3>제목</h3>

        <p>

        컨텐트

        </p>


        <div data-role="collapsible" data-theme="c" data-content-theme="c">

        <h3>제목</h3>

        <p>

        컨텐트

        </p>

        <div data-role="collapsible" data-theme="d" data-content-theme="d">

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        </div>


        <div data-role="collapsible" data-content-theme="c">

        <h3>제목</h3>

        <form action="#" method="get">

        <div data-role="fieldcontain">

        <label for="textarea">내용:</label>

        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

        </div>

        <fieldset class="ui-grid-a">

        <div class="ui-block-a">

        <button type="reset" data-theme="c">

        취소

        </button>

        </div>

        <div class="ui-block-b">

        <button type="submit" data-theme="b">

        전송

        </button>

        </div>

        </fieldset>

        </form>

        </div>


        <div data-role="collapsible" data-content-theme="c">

        <h3>제목</h3>

        <p>

        내용

        </p>

        <ul data-role="listview" data-inset="true" data-theme="d">

        <li>

        <a href="#">아이템 #1</a>

        </li>

        <li>

        <a href="#">아이템 #2</a>

        </li>

        <li>

        <a href="#">아이템 #3</a>

        </li>

        <li>

        <a href="#">아이템 #4</a>

        </li>

        </ul>

        </div>

        </div>

        

        <!-- 콜랩서블 셋과 컨텐트 차이는 data-role 다르다 set 있고 없고 !-->

        <!-- 하나만 클릭가능 -->

        <label for="collapsibleset">콜랩서블 </label>

        <div name="collapsibleset" id="collapsibleset" data-role="collapsible-set">

        <div data-role="collapsible" data-collapsed="false">

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        <div data-role="collapsible">

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        <div data-role="collapsible" data-collapsed="false">

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        <div data-role="collapsible">

        <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        <div data-role="collapsible">

                <h3>제목</h3>

        <p>

        내용

        </p>

        </div>

        </div>

        </div>

        

        <div data-role="footer" data-position="fixed" data-theme="a">

        <h4>&copy; 2014 T academy</h4>

        </div>

        </div>

        </body>

</html>




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

1.   필드 컨테이너



텍스트 입력 필드


그에 맞는 소프트 키보드가 나오게 설계되어있음


 


2.   슬라이더






3.   플립 토글 스위치




4.   라디오 버튼



5.   체크박스 버튼





6.   셀렉트 메뉴



1.   네이티브 옵션 메뉴

2.   data-native-menu 옵션이 false

3.   여러개 선택하면 선택된 갯수가 나옴



16-01.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>16-01</title>

       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  </head>


  <body>

    <div data-role="page" id="index">

      <div data-role="header" data-position="fixed">

        <h3> 요소</h3> 

      </div>

      <div data-role="content">

        <ul data-role="listview">

          <li><a href="16-02.html" data-transition="slide">텍스트 입력 필드</a></li>

          <li><a href="16-03.html" data-transition="slide">슬라이더</a></li>

          <li><a href="16-04.html" data-transition="slide">플립 토글 스위치</a></li>

          <li><a href="16-05.html" data-transition="slide">라디오 버튼</a></li>

          <li><a href="16-06.html" data-transition="slide">체크박스 버튼</a></li>

          <li><a href="16-07.html" data-transition="slide">셀렉트 메뉴</a></li>

        </ul>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력 화면




16-02.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>16-02</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  </head>

  <body>

    <div data-role="page" id="text" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>텍스트 입력 필드</h3> 

        <a href="#index" data-role="button" data-icon="home"

           data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

      </div>

      <div data-role="content">

        <form name="myform">

          <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

          <label for="name">이름</label>

          <input type="text" id="name"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="pass">패스워드</label>

            <input type="password" id="pass"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="email">이메일</label>

            <input type="email" id="email"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="phone">전화</label>

            <input type="tel" id="phone"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="age">나이</label>

            <input type="number" id="age"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="url">URL</label>

            <input type="url" id="url"/>

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="search">검색</label>

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

          </div>

           <!--fieldcontain영역에 추가함 -->

          <div data-role="fieldcontain">

            <label for="content">내용</label>

            <textarea id="content" cols="40" rows="8"></textarea>

          </div> 

        </form>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>


출력 화면




 

16-03.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>16-03</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  </head>

  <body>

    <div data-role="page" id="slider" data-add-back-btn="true">

      <div data-role="header" data-position="fixed">

        <h3>슬라이더</h3> 

        <a href="#index" data-role="button" data-icon="home"

           data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>

      </div>

      <div data-role="content">

        <form name="myform">

               <!--fieldcontain -->

          <div data-role="fieldcontain">

          <label for="year">년도</label>

          <!-- 아래는 슬라이더 소스임-->

          <input type="range" id="year" value="2014" min="1900" max="2030"/>

          </div>

        </form>

      </div>

      <div data-role="footer" data-position="fixed">

        <h4>&copy; 2014 T academy</h4>

      </div>

    </div>

  </body>

</html>



출력 화면





16-04.html


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>16-04</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  </head>

  <body>

    <div data-role="page" id="fliptoggle" data-add-back-btn="true">

      <div data-role="header" data-position