[JQuery] UI

<h2 style="margin-left: 1cm;">1.7    JQuery-UI</h2> JQuery-UI를 이용하면, 일관성 있는 웹 어플리케이션을 작성할 수 있다. JQuery-UI 라이브러리는 jqueryui.com에서 다운받을 수 있다. 원한다면 다운받기 전에 테마를 설정할 수도 있다. 다운로드 받은 JQuery UI 파일을 적절한 디렉토리로 옮기고 다음과 같이 CSS와 스크립트를 임포트 한다. <link href="css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet"><script src="js/jquery-1.10.2.js"></script><script src="js/jquery-ui-1.10.4.custom.js"></script> 그리고, JQuery UI를 적용하기 위하기 위해서는 HTML 태그 객체 별로 적절한 함수를 호출해야 한다.우선, HTML 태그를 참조하는 JQuery 객체를 만들고 객체에 적용하고자 하는 위젯 함수를 호출하면 JQuery UI가 적용된다. 버튼을 예로 들면,  <script>$(document).ready(function(){   $("#mybutton").button();});</script>...<button id="mybutton">A button element</button> JQuery-UI 버튼 위젯을 적용하기 위한 함수는 button()이다. 위 예에서 id가 mybutton인 객체에서 button()을 호출했으므로, 이 객체가 참조하는 HTML 태그의 UI에 JQuery-UI 버튼 위젯 스타일이 적용된다.  위 예에서는 <button>에 적용했지만, 꼭 버튼일 필요가 없다. 다음 예제에서는 <button>, <a>, 엘리먼트에 버튼 위젯을 적용했다.   Example: Button Widget <!DOCTYPE html><html><head><meta charset="EUC-KR"><title>Insert title here</title> <link href="css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet"><script src="js/jquery-1.10.2.js"></script><script src="js/jquery-ui-1.10.4.custom.js"></script> <script>$(document).ready(function(){   $("#mybutton1, #mybutton2, #mybutton3").button();});</script> </head><body> <button id="mybutton1">A button element</button><a href="#" id="mybutton2">A button element</a><p id="mybutton3">A button element</p></body></html> 위젯을 Enable/Disable 하는 방법은 공통적으로 다음과 같다.  $("selector").widget-fucntion( "option", "disabled", true ); widget-function은 각 위젯별 함수이다. 버튼의 경우 button()이다. disable된 위젯을 다시 enable하고 싶다면 true 대신 false를 입력하고 호출한다. 또한, 위젯을 옵션 값을 가져오거나 설정하는 방법도 공통적으로 다음과 같다.  // gettervar value = $(".selector").widget-fucntion ("option", "option-name" ); // setter$(".selector").widget-fucntion ("option", "option-name", value );  <h3 style="margin-left: 1cm;">1.7.1  버튼</h3> -      일반 버튼 앞의 예제에서 이미 살펴보았다.  $("#mybutton1, #mybutton2, #mybutton3").button();...<button id="mybutton1">A button element</button> -      아이콘 버튼아이콘 버튼은 button() 함수의 파라미터로 설정한다. 사용된 아이콘들은 JQuery UI에 포함된 것들이다. 아이콘 텍스트를 보여주지 않으려면 text:false를 지정한다. text:false로 지정된 버튼에 호버하면 <button>태그의 텍스트를 보여준다.     $("#myiconbtn1").button({      icons: {        primary: "ui-icon-locked"      },      text: false    });      $("#myiconbtn2").button({         icons: {           primary: "ui-icon-locked"         }}); -      토글버튼토글버튼은 체크박스를 버튼으로 만들면 된다. <input>의 id와< label>의 for가 동일해야 스타일이 적용된다.     $("#mycheck").button();...<input type="checkbox" id="mycheck"><label for="mycheck">Toggle</label> -      버튼셋(체크박스 버튼)체크박스에 대해 buttonset()을 호출하면 멀티-셀렉션 버튼 셋이 된다.  $("#mybtnset").buttonset();... <div id="mybtnset">  <input type="checkbox" id="check1"><label for="check1">B</label>  <input type="checkbox" id="check2"><label for="check2">I</label>  <input type="checkbox" id="check3"><label for="check3">U</label></div> -      버튼셋(라디오버튼 버튼)라디오버튼에 대해 buttonset()을 호출하면 싱글-셀렉션 버튼 셋이 된다.  $("#myradiobtnset").buttonset();... <div id="myradiobtnset">    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label></div>  <h3 style="margin-left: 1cm;">1.7.2  오토컴플릿</h3> 오토컴플릿은 autocomplete() 함수를 이용하며, 단어 리스트는 배열 형식으로 제공한다.     var availableTags = ["ActionScript","AppleScript","Asp"];      $("#myautocomplete").autocomplete({       source: availableTags});... <input id="myautocomplete" title="type &quot;a&quot;"> <h3 style="margin-left: 1cm;">1.7.3  탭</h3> 탭은 tabs() 함수로 적용된다. 탭에서 탭버튼은 <ul>, <li>로 구성한다. 각 탭버튼(<li>)의 내용은  <a> 태그로 구성되며, 탭 내용과는 href를 이용해 연결한다. 아래 예에서 href=”#tabs-1”인 버튼을 누르면 id=”tabs-1”인 <div>의 내용을 보여준다.  $("#tabs").tabs();... <div id="tabs">   <ul>          <li><a href="#tabs-1">First</a></li>       <li><a href="#tabs-2">Second</a></li>       <li><a href="#tabs-3">Third</a></li>   </ul>    <div id="tabs-1">Lorem ipsum ....</div>   <div id="tabs-2">Phasellus ma... </div>   <div id="tabs-3">Nam dui erat,...</div></div> <h3 style="margin-left: 1cm;">1.7.4  아코디언</h3> 아코디언은 accordion() 함수를 이용한다. HTML 태그의 형식은 헤더 태그가 아코디언 라벨이 되고 바로 그 아래의 <div>가 내용이 된다.  $("#myaccordion").accordion();... <div id="myaccordion">   <h3>First</h3>   <div>Lorem ips....</div>   <h3>Second</h3>   <div>Phasellus ...</div>   <h3>Third</h3>   <div>Nam dui era...<div></div> 아코디언의 기본 아이콘을 바꾸고 싶다면 icons 옵션을 설정한다. icons 옵션 데이터에서 header는 일반 상태, activeHeader는 선택된 상태를 의미한다.  var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s"}; // 선택상태   $("#myaccordion_icon").accordion({icons: icons});   <h3 style="margin-left: 1cm;">1.7.5  다이얼로그</h3> 다이얼로그는 dialog() 함수를 이용한다. 파라미터로 “open”, “close”를 주면 다이얼로그 열기 닫기 동작을 수행한다. 다이얼로그에 대해 세세한 설정(아래 예에서는 버튼)을 위해 JSON 형식의 파라미터를 넘긴다. 다이얼로그의 타이틀은 HTML 태그에서 title 속성 값을 이용해 설정한다.  // 다이얼로그   $("#mydlg").dialog({       autoOpen: false,       width: 400,       buttons: [          {              text: "Ok",              click: function() {                 $( this ).dialog( "close" );              }          },          {              text: "Cancel",              click: function() {                 $( this ).dialog( "close" );              }          }       ]   });   // 다이얼로그를 열기 위한 버튼 클릭 이벤트   $("#mydlg-link").button().click(function(){       $("#mydlg").dialog("open");       event.preventDefault();});... <div id="mydlg" title="Dialog Title">   <p>Lorem....</p></div> 다이얼로그 설정을 위한 JSON 타입 파라미터로 사용할 수 있는 옵션 필드들은 다음과 같은 것들이 있다. resizable: true | false; (default false)draggable: true | false; (default true)height: sizewidth: sizemodal: true | false (default false)closeOnEscape: true | false (default true)buttons: object array or json objectshow: effect objecthide: effect objectclose: event processing functionbeforClose: event processing function 이름으로부터 직관적으로 알 수 있는 설정들이다. buttons는 예제에서 볼 수 있듯이, text와 click으로 구성된 json 타입을 할당하면 된다. text가 다이얼로그 버튼 라벨이고 click의 함수는 클릭했을 때 동작할 함수이다. 다이얼로그의 modal 옵션은 디폴트가 false이다. show와 hide는 다이얼로그에 효과를 주기 위한 옵션이다. 예를 들어,         show: {        effect: "blind",        duration: 1000        },        hide: {        effect: "blind",        duration: 1000    } 효과에 대해서는 <a href="http://jqueryui.com/hide/">http://jqueryui.com/hide/</a>, <a href="http://jqueryui.com/show/">http://jqueryui.com/show/</a> 참조.다음은 이러한 설정들을 추가한 다이얼로그 설정이다. 그리고, 어떤 버튼이 눌렸는지 알기 위해 $(this).data()를 이용했다.     // 다이얼로그 설정   $( "#mydlg" ).dialog({       autoOpen: false,       width: 400,       // Button 설정       buttons: [          {              text: "Ok",              click: function() {                 // $(this): dialog div, event: button level event                 $(this).data("return", true); // close 이벤트에서 참조하기 위해.                 $(this).dialog("close");              }          },          {              text: "Cancel",              click: function() {                 $(this).data("return", false); // close 이벤트에서 참조하기 위해.                 $(this).dialog("close");              }          }       ],       modal: true,           //모달       closeOnEscape: false,   //ESC키에 다이얼로그가 닫히지 않도록       draggable: false,       //드래그 금지          // Effect       show: {        effect: "blind",        duration: 700        },        hide: {        effect: "blind",        duration: 700        },       // 다이얼로그를 닫을 때 발생하는 이벤트.       close: function( event, ui ) {            var ret = $(this).data("return"); // OK, Cancel 버튼의 값 설정 참조.          alert(‎ret);       } }); 위 옵션 속성들은 다음과 같이 “option”을 지정하여 설정할 수도 있다.  $(".selector").dialog("option", option_name, option_value); 예를 들어, $(".selector").dialog("option", "closeOnEscape", false ); 이런 옵션 설정 방식은 다른 위젯 함수들도 동일하게 적용된다.  <h3 style="margin-left: 1cm;">1.7.6  Date Picker</h3> 데이트 픽커는 달력을 이용해 사용자가 날짜를 입력할 수 있게 해주는 위젯이다. 데이트 픽커를 보여주기 위한 함수는 datepicker()이다. 이를 <div> 엘리먼트에서 호출하면 바로 달력을 보여주고, <input type=”text”> 엘리먼트에서 호출하면 필드 클릭 시에 달력을 보여준다. 보여준 달력의 날짜를 클릭하면 날짜가 입력된다.     $( "#mydatepicker" ).datepicker();   ... <input type="text" id="mydatepicker"></p> 날짜 포맷입력되는 날짜의 포맷을 변경하려면 dateFormat 옵션 필드 값을 지정한다.     $("#mydatepicker").datepicker({       dateFormat: "yy/mm/dd"   });   or $("#mydatepicker").datepicker( "option", "dateFormat", "yy/mm/dd"); 포맷으로 사용할 수 있는 요소는 다음과 같다.  -       d - day of month (no leading zero)-       dd - day of month (two digit)-       o - day of the year (no leading zeros)-       oo - day of the year (three digit)-       D - day name short-       DD - day name long-       m - month of year (no leading zero)-       mm - month of year (two digit)-       M - month name short-       MM - month name long-       y - year (two digit)-       yy - year (four digit)-       @ - Unix timestamp (ms since 01/01/1970)-       ! - Windows ticks (100ns since 01/01/0001)-       '...' - literal text-       '' - single quote-       anything else - literal text 표시언어표시언어를 지정하려면 다음과 같이 지역 코드를 입력한다.     $.datepicker.setDefaults( $.datepicker.regional["fr"] );   //or 호출시: $( selector ).datepicker( $.datepicker.regional["fr"]  ); 단, 한국 지역은 제공하고 있지 않기 때문에 다음과 같이 한글로 된 데이터를 제공해야 한다.  $.datepicker.regional['ko'] = {            closeText: '닫기',            prevText: '이전달',            nextText: '다음달',            currentText: '오늘',            monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],            monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],            dayNames: ['일','월','화','수','목','금','토'],            dayNamesShort: ['일','월','화','수','목','금','토'],            dayNamesMin: ['일','월','화','수','목','금','토'],            dateFormat: 'yy-mm-dd',            yearSuffix: '년'};      $.datepicker.setDefaults( $.datepicker.regional["ko"] ); 날짜 제한사용자가 선택할 수 있는 최대, 최소 날짜 범위 지정에는 minDate, maxDate 옵션이 이용된다. 이 옵션의 값은 연월일로 이루어진 완전한 날짜나 상대적 날짜를 입력할 수 있다. 상대적 날짜는 숫자 또는 문자열로 주어진다. 숫자는 일수를 의미하고 문자열은 숫자와 함께 y, m, w, d (년, 월, 주, 일)를 이용해 구성한다. 숫자 앞에 붙는 +는 이후 –는 이전을 의미한다. 예를 들어, 다음 설정은 이전 10일, 이후 1달 10일이 날짜 선택 범위임을 의미한다.     $("#mydatepicker").datepicker({       minDate: -10,       maxDate: "+1M 10D"   }); 이렇게 설정할 경우, 달력 UI에서 해당 범위의 날짜만을 선택할 수 있다. minDate, maxDate를 이용해 from, to 날짜 선택을 할 수 있다.     $("#mydate_from").datepicker({        onClose: function( selectedDate ) {          $( "#mydate_to" ).datepicker( "option", "minDate", selectedDate );        }   });   $("#mydate_to").datepicker({        onClose: function( selectedDate ) {          $( "#mydate_from" ).datepicker( "option", "maxDate", selectedDate );       }   });...from: <input type="text" id="mydate_from"> to: <input type="text" id="mydate_to"> onClose는 날짜 선택이 끝날 때 일어나는 이벤트이고 selectedDate는 선택한 날짜이다. from 쪽에서 선택한 날짜는 to 쪽의 최소 날짜로 to 쪽에서 선택한 날짜는 from 쪽의 최대 날짜로 설정한다.  그 밖에아이콘을 클릭해야 달력을 보이도록 설정하려면 다음과 같이 한다.     $("#mydate_button").datepicker({       showOn: "button",       buttonImage: "img/calendar.gif",       buttonImageOnly: true,       buttonText: "Open Calender"   }); 내용은 직관적으로 파악할 수 있다. 아이콘이 top에 정렬되어 있지 보기에 안 좋을 것이다. 달력 아이콘과 관련된 스타일 클래스 ui-datepicker-trigger를 참조해 정렬 스타일을 추가한다.     .datepicker_icon_pos {       position: relative;       vertical-align: middle;       margin-left: 5px;   }... $(".ui-datepicker-trigger").addClass("datepicker_icon_pos"); 그 밖에 옵션들로는 다음과 같은 것이 있다.  numberOfMonths: numberdefaultDate: stringfirstDay: 0 | 1 numberOfMonths는 한 화면에 보일 달의 수, defaultDate는 말 그대로 디폴트 날짜로 설정하지 않았다면 현재 날짜이다. firstDay는 1주일의 시작을 의미한다. 0이면 Sunday, 1이면 monday이다.  <h3 style="margin-left: 1cm;">1.7.7  메뉴</h3> 메뉴 위젯은 menu() 함수를 이용한다. 그리고 메뉴는 리스트 태그 <ul>, <li>로 구성한다. 바로 예를 살펴본다.  .ui-menu { width: 150px; }... $("#mymenu").menu();... <ul id="mymenu">  <li><a href="#">menu item 1</a></li>  <li><a href="#">menu item 2</a></li>  <li><a href="#">menu item 3</a></li>  <li>    <a href="#">menu item4</a>    <ul>       <li><a href="#">menu subitem 1</a></li>       <li><a href="#">menu subitem 2</a></li>       <li><a href="#">menu subitem 3</a></li>    </ul>  </li>  <li class="ui-state-disabled"><a href="#">menu item5</a></li>  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li></ul> 메뉴의 기본 width 설정에 의해 화면을 다 채우므로, .ui-menu 클래스를 이용해 width를 지정한다. 서브 메뉴를 만들려면, <li> 내에 다시 <ul>을 포함시켜 만들면 된다. 메뉴 항목 중에 disable 시키려는 항목은 클래스로 ui-state-disabled를 지정한다. 위에서 사용한 아이콘 추가는 JQuery에서 제공하는 기본 아이콘을 이용했다. 태그 부분이 아이콘 부분이다.  <h3 style="margin-left: 1cm;">1.7.8  프로그레스바</h3> 프로그레스바는 progressbar() 함수를 이용한다. progressbar()의 옵션을 살펴보면 -       max: number-       value: number | false max는 프로그래스바의 최대 값이다. value는 프로그레스바의 초기값 혹은 진행 값을 나타낸다. value가 false로 설정되면 프로그레스바의 중간 상태를 나타낸다. 간단한 예제를 살펴보면,     // progress bar   $( "#myprogress" ).progressbar({       max: 100;       value: 20   });... <div id="myprogress"></div> 프로그레스바의 이벤트로 change, complete가 있다. change는 프로그레스바의 값이 변할 때마다 호출되고 complete는 max값에 도달하면 발생한다. 다음은 change, complete 이벤트와 타이머를 이용해 progress를 시뮬레이션하는 예제이다.     .ui-progressbar {       position: relative;   }    .progress-label {       position: absolute;       left: 50%;       top: 4px;       font-weight: bold;       text-shadow: 1px 1px 0 #fff;   }   ...     // progressing.....      $( "#myprogress2" ).progressbar({       max: 10000,       value: 0,       change: function() {          $(".progress-label").text( Math.floor($(this).progressbar("value")/100) + "%" );       },       complete: function() {          window.clearInterval($("#myprogress2").data("timerID"));          $(".progress-label").text("Complete");                 }   });      // progress 시작 버튼   $("#progress_start").click(function(){       // loading message       $("#myprogress2").progressbar("value", false);       $(".progress-label").text("Loading ...");       // delay        window.setTimeout(startProgress, 1000);   });      // progressbar 갱신   function startProgress(){              var unit = 20;   // 20ms       var progressBar = $("#myprogress2");       progressBar.progressbar("value", 0);              var intervalID = window.setInterval(function(){                    var currProgress = progressBar.progressbar("value");          progressBar.progressbar("value", currProgress + unit);          progressBar.data("timerID", intervalID);                 }, unit);           }      // progress 클리어 버튼   $("#progress_clear").click(function(){       // clear timer       var intervalID = $("#myprogress2").data("timerID");       window.clearInterval(intervalID);       // clear progressbar       $("#myprogress2").progressbar("value", 0);       $(".progress-label").text("");          });   // .ui-progressbar, .ui-widget-header ui-progressbar-value .ui-widget-content// progress color 변경// $("#myprogress2").find(".ui-progressbarvalue").css("background","#6699FF");   ...  <div id="myprogress2"><div class="progress-label"></div></div><br><button id="progress_start">progress start</button><button id="progress_clear">progress clear</button>         <h3 style="margin-left: 1cm;">1.7.9  Slider</h3> 슬라이더는 slider() 함수를 이용한다. slider()의 옵션 속성 range는 min, max or true 값을 갖는다.  range: min | max | true-       min: 슬라이더 바의 선택 값 이하를 쉐이딩-       max: 슬라이더 바의 선택 값 이상을 쉐이딩-       true: 범위 선택 Range: min or maxrange로 min 또는 max를 선택하는 경우, 설정은 다음과 같이 할 수 있다.     // min   $("#myslider_min").slider({       range: "min",       min: 0,       max: 100,       value: 35   });... <div id="myslider_range_true"></div>  min, max 옵션은 슬라이더로 선택할 수 있는 최대, 최소 범위로, 슬라이더 선택 결과 값은 최소 초과 최대 미만이다. value 옵션은 초기값이나, 바를 움직이면 value 값이 변한다. 현재 선택 값을 얻어오거나 설정하는 방법은 var currValue = $("#myslider_min").slider("value");   // getter$("#myslider_min").slider( "value", 55 );                // setter Range: truerange로 true를 선택한 경우, 설정은 다음과 같이 할 수 있다.     $("#myslider_range_true").slider({       range: true,       min: 0,             // min/max       max: 100,       values: [17, 67]  // 선택된 min/max   });    ...<div id="myslider_range_true"></div> <br><br> min, max는 같은 의미이고 값 values가 다르다. values는 초기 슬라이더 선택 범위이다. 슬라이더 바를 움직이면 values가 변한다. 현재 선택 값을 얻어오거나 설정하는 방법은    var currValues = $("#myslider_range_true").slider("values"); //getter   $("#myslider_range_true").slider("values", [10 90] );          // setter 여기서 currValues는 배열로 currValues [0]는 현재 선택된 최소값, currValues[1]은 현재 선택된 최대값이다. 최소/최대를 각각 다루는 방법은 다음과 같다. 0은 선택된 최소값, 1은 선택된 최대 값을 나타낸다.         // getter   var currMin = $("#myslider_range_true").slider("values", 0); // get min   var currMax = $("#myslider_range_true").slider("values", 1); // get max      // setter   $("#myslider_range_true").slider( "values", 0, 10); // set min   $("#myslider_range_true").slider( "values", 1, 90); // set max Event슬라이더 값의 변화와 관련 있는 이벤트로 slide와 change가 있다. slide는 바를 움직일 때마다, change는 움직이다가 멈추었을 때 발생한다. 둘 다 이벤트 핸들러 함수 형식은 동일하다. 예를 들어,  slide: function(event, ui){$("#slider_value1").html(ui.value);} change: function(event, ui){$("#slider_value1").html(ui.value);} range: true일 때, 이벤트에서 ui.value 대신 ui.values[0], ui.values[1]을 이용한다.  ETC그 외, 옵션으로-       orientation: "horizontal" | "vertical"-       step: number orientation은 슬라이더를 수직 방향으로 혹은 수평 방향으로 위치시키는 옵션이다. step은 슬라이더를 한 번 움직일 때 변할 값의 단위이다.  설정 이후에 min, max 같은 옵션 값을 얻고자 한다면, $(selector).widget_function(“option”, option_name)을 이용한다. 슬라이더의 경우에는 다음과 같이 이용된다.     $("selector").slider("option","min");   $("selector").slider("option","max"); 다른 옵션 값들도 동일한 방식을 적용하면 된다.  <h3 style="margin-left: 1cm;">1.7.10     Spinner</h3> 스피너는 spinner() 함수를 이용한다.  $("#myspinner").spinner(); ... <input id="myspinner" name="value"> 스피너의 옵션 몇 가지만 나열하면 -       min: number-       max: number-       step: number min, max는 스피너로 지정할 수 있는 최대, 최소값을 의미한다. step은 스피너 버튼을 눌렀을 때, 값을 증가 혹은 감소시킬 단위이다. 스피너의 값을 Get/Set하는 방법은 다음과 같다.  $(selector).spinner("value");$(selector).spinner("value", 10); value는< input> 태그의 value 속성이다. 따라서, 초기값을 지정하고자 한다면 <input> 태그의 value 값을 설정한다. 그리고, spinner의 이벤트로 spin 이벤트가 있다. 이 이벤트는 값이 변할 때마다 발생한다.  spinner에 대한 예를 들고, 넘어간다.     $("#myspinner").spinner({       min: 0,       max: 100,       step: 5,       spin: function(event, ui) {                    var currValue = $(this).spinner("value");          var changeVal‎ue = ui.value;                    if( currValue > changeVal‎ue) {              $("#myspinner_message").html("changed to " + changeVal‎ue+" (down)");          } else if(currValue < changeVal‎ue) {              $("#myspinner_message").html("changed to " + changeVal‎ue+" (up)");          }                 }   }); ... Select a value:<input id="myspinner" name="spinvalue" value="10"> <br>value: <span id="myspinner_message"></span>  <h3 style="margin-left: 1cm;">1.7.11     Tooltip</h3> 모던 브라우져가 툴팁을 기본으로 지원한다. 태그의 속성 title 값을 툴팁 텍스트로 이용한다.  <p title="this is tooltip">test</p> JQuery에서는 tooltip() 함수로 툴팁을 지원한다. 툴팁 텍스트는 동일하게 title 속성을 이용한다.     $(document).tooltip();... <p title="tooltip display">tooltip-test</p><a href="#" title="tooltip display">tooltip-test</a>툴팁 스타일링은 툴팁 CSS를 변경하거나 CSS를 추가하여 수행할 수 있다. 툴팁과 관련된 CSS는  ui-tooltip: 툴팁 컨테이너 스타일ui-tooltip-content: 툴팁 콘텐츠 스타일 다음은 ui-tooltip으로 보더 색상과 배경 색을 바꾸고 ui-tooltip-content으로 텍스트 폰트를 변경했다.  그리고 ui-toolip:after 수도 엘리먼트로 화살표를 추가한 예제이다.     /* 툴팁 스타일 */   .ui-tooltip {       background-image: linear-gradient(rgba(255,255,255, 0.5), rgba(255,255,255, 0));       background-color: #99CCFF;       border-radius: 10px;       border: 2px solid #6699FF;       padding: 15px 20px;          }    .ui-tooltip-content {       font: bold 1em Arial, Helvetica, sans-serif;       color: #111;   }   /* 삼각형 */   .ui-tooltip:after {       content: "";              position: absolute;    left: 50%;    bottom: -24px;   /* 툴팁 컨테이너 바로 아래 */    margin-left: -24px;           width: 0px;      height: 0px;      border-style: solid;       border-left: 10px solid transparent;       border-right: 10px solid transparent;       border-top: 12px solid #6699FF;       border-bottom: 12px solid transparent;   }...    // 툴팁   $(document).tooltip({position: {        my: "center bottom-15",        at: "center top"       }}); my, at 모두 정렬에 관련된 옵션으로 “horizontal vertical” 값이다.my는 위치시킬 엘리먼트의 정렬 기준이고 at은 부모 엘리먼트에서 위치시킬 엘리먼트의 정렬을 의미한다. 즉, 툴팁의 “center bottom-15”를 부모 엘리먼트의 “center top”에 위치시킨다.   <h3 style="margin-left: 1cm;">1.7.12     아이콘</h3>아이콘은 class를 이용해 지정한다. class=”ui-icon 아이콘-이름” 다음 예에서< li>의 class 설정은 보기 좋게 만들기 위한 것이다.  <ul id="icons" class="ui-widget ui-helper-clearfix">   <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>   <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>   <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>   <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>   <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li></ul> 전체 아이콘 리스트는 다음 링크를 참조하라.<a href="http://api.jqueryui.com/theming/icons/">http://api.jqueryui.com/theming/icons/</a>  <h3 style="margin-left: 1cm;">1.7.13     클래스</h3> JQuery에서 클래스는 Theming과 연관성이 깊다. 각 위젯 별로 Theming을 위한 별도의 클래스들이 존재한다. 이에 대해서는 위젯 별로 API Document를 참조해 보아라. 여기서는 프레임워크 스타일에 대해 주로 설명할 것이다. (참조: <a href="http://api.jqueryui.com/theming/css-framework/">http://api.jqueryui.com/theming/css-framework/</a>) Widget Containers-       ui-widget: 모든 위젯의 컨테이너 클래스. font-family와 font-size를 위젯에 적용함. -       .ui-widget-header: 헤더 컨테이너에 적용되는 클래스.. -       .ui-widget-content: 콘텐츠 컨테이너에 적용되는 클래스.  Interaction States-       .ui-state-default: 버튼 같은 clickable 엘리먼트에 적용되는 클래스. -       ui-state-hover: 버튼 같은 clickable 엘리먼트에 mouseover 상태를 적용하는 클래스.-       ui-state-focus: 버튼 같은 clickable 엘리먼트에 focus 상태를 적용하는 클래스-       ui-state-active: 버튼 같은 clickable 엘리먼트에 active 상태를 적용하는 클래스 Interaction Cues-       ui-state-highlight: 하일라이트 또는 셀렉터블 엘리먼트에 적용되는 클래스.-       ui-state-error: 에러 메시지 컨테이너 엘리먼트에 적용되는 클래스. -       ui-state-error-text: 백그라운드 없이 에러 텍스트의 컬러에 적용되는 클래스. -       ui-state-disabled: diabled된 엘리먼트에 적용되는 클래스. -       ui-priority-primary: 계층적인 버튼이 필요한 상황에서 priority-1 버튼에 적용되는 클래스.-       ui-priority-secondary: 계층적인 버튼이 필요한 상황에서 priority-2 버튼에 적용되는 클래스.  Icons States and images-       ui-icon: 아이콘 엘리먼트에 적용되는 기본 클래스.  Icon typesui-icon이 선언된 후에 아이콘의 타입을 기술하기 위해 .ui-icon-{icon type}-{icon sub description}-{direction} 신택스를 갖는 클래스를 지정할 수 있다.  Corner Radius helpers-       ui-corner-tl: top-left corner radius-       ui-corner-tr: top-right corner radius-       .ui-corner-bl: bottom-left corner radius-       ui-corner-br: top-right corner radius -       ui-corner-top: top corner radius-       ui-corner-bottom: bottom corner radius-       ui-corner-right: right corner radius-       ui-corner-left: left corner radius-       ui-corner-all: all corners radius Overlay & Shadow-       ui-widget-overlay: 100% 너미와 높이로 스크린을 오버레이하는 클래스. background color/texture, screen opacity를 적용함. -       ui-widget-shadow: 위젯 쉐도우 엘리먼트를 오버레이하기 위해 적용되는 클래스. background color/texture, corner radius, opacity, opt/left offset, shadow “thickness”를 적용함. thickness는 패딩으로 조절하고 offset은 top과 left 마진으로 조절함.     Example: ui-state- <h3>ui-state-default, hover, focus</h3><div id="btn_shape" class="ui-state-default ui-corner-all">default state</div> <br><div id="btn_shape" class="ui-state-hover ui-corner-all">hover state</div> <img width="249" height="138" id="그림 1" src="data:image/png;base64,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" border="0">  Example: ui-state-highlight <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em; width: 300px">   <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>   <strong>Hey!</strong> Sample ui-state-highlight style.</p></div> <img width="349" height="83" id="그림 2" src="data:image/png;base64,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" border="0">  Example: ui-state-error <div class="ui-state-error ui-corner-all" style="padding: 0 .7em; width: 300px">   <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>   <strong>Alert:</strong> Sample ui-state-error style.</p></div> <img width="349" height="85" id="그림 3" src="data:image/png;base64,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" border="0">  Example: ui-widget-header, content <div class="ui-widget-content" style="width: 300px;height: 300px;padding: 0.5em;">    <h3 class="ui-widget-header" style="margin: 0;text-align: center;">ui-widget-header and content</h3>   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p></div> <img width="360" height="361" id="그림 4" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAFpCAIAAAA+2yUnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABpjSURBVHhe7d1tjB3VfcfxudcP61SNHTAxFAONvF67SlSpwQJb+GFtJzRskoIqlCaYNNCyNkkUtUZEMVVjqONKhgQJJ0KJn5oCkUmq9E148IZA7PVTajsNTV4EMOu1GogpdjDGTgLepzs9T3PumYd7d//e9fru5vvRcPfMmTNnzsyd+d2Zu7YpxXEcAYBE2f0EgCEjOACIERwAxAgOAGKNEhzd2xaVSqW7drnZEXN++j1fox09u+5SO7BoW7ebBWTkwTGsU47zVWpYGTX2Aw4Nauw/qugsIopGjcmi8x9Fw39XOS/OK3lwLHsojuN97c1uVmZYKxfa9cRGVxqfmtv3qUP20DI3KzOslQt173pkvyueT8N/V8f7eXHBqROryM7VatnCrUcyc6YQLqk6snWhWrB6Z3UuLOsl+ZWTmoRdw7b30qNwiloWDCrbV3WAWr5DLaxNdVk82vQ20oNduHq1WxRutkByiDJzvueC1e0Ggs1lNr11Z27l7MFwa2T2K2keVru6dMuCQWmFh6NmZfUQ+QXpYSath98DRtDIBUdqHfvOBeWClZPZgDoV0++5snD1TtU8V13QuGhQBeuFI0xxF0JmSeE1Y5gl+Xrbf6q+aGQpdptuU9U5P5RkSShcx24tKOdX9rNVeli58a/eeuRIUWPdS7qx7Tct253Z83xvdd+DdLVpmhuluAeMLGFwpMrB22OX+UXJ+6zLppVbN79ycvLZWTUXbirboT9Tfev00JJZyywOWvqleq52h1W2su5ogyZGdTR2A9Ul9aW3H84F5Zr7Zguu2rSy6+ZX9uNJBhpuqtrcNna1qW5S7ZNZQ3ftZpPFR7aqFMpu2rYxc6nOUusmwzNLwlWM6tKh9oCRNqJfji77gnrr9j/y8F1rN6r3bOvqaP/Kh7fph+KFty/Lfq3xyi/Vs/LCrV/IPn/bPlbOLmnL9XPqNc3JuhuXm9pSafZK/aD9027pV19XfcCcWl5hh/ZXEb7SqDVaKxmuG/D+X75i64v2ewQ1t69XV8fGJ+56WA109VZ13Dau3bZNP9uvvjE70O7un6rX1euzXy+5PuxxMDu88ANXuWXnerj91pvbH/Lb84eiednt6k2oHqOEra+j5lFODNoDRs6QgsOedTn2qzfDfd9p3rr9Gzeq83h9e7uOgI0r9UmdO1/dNbz/kV25kzH99qvPjOp3e8knmVP0Jav59tUawneC+Q5VaqjLxH1S2Y9KreZojewH23C/jTQxlZfft2U36qt+o47pL7TrCNi/cqWZyQ2gufka9brxifyvQ0wf3uqd1aM6hMOdPwWU6lZ23eV//+Kvc/v1ajWehmykjzKGxb0LWdVrxguvpuyb6KXvKm0vwQkYrOxuLFN0y+L+s619g3CgBaNK3cuGczU6DNu7JoXNNbMg3L6WbKpgN8K+M2p2X28lzW7eLbZtg42GK2cHquiWxf1nx+P7TC0oGFVuK7pNtrekv/S2w7mwG902223ROvV7wMiqdcex7KHgyC9cmH3jazK3vv4Owzx35O+bDfVhlT+hFPMJWL0tdX9oINvaf/qnBipQo8Pw1v226HbdtfkArTVafRuQGkDRh7pjbyQKGzS3Pxr0Ljje+gj7Owwz+FqPR9mBOvYGzz+VuD/7UPNwpweal9mKHVqmN3UdF929hLLvquAoO+d6XmCIXIA0EHWOJR8h9mwZPx8Y+vJpuL3ZudoPyV7e/ugDtTTcP+Rjv2RwM5Y6kcfF86zZtWsabGd23WW/a6wawg0B/uA14r8AlsqO8ZIa5hJ94sZG3JkwO0gNDAn/dCAAsbH/l9wAjDqCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBX/tfqjR4+6EoDGNmvWLFcaRTWDY+bMmW4GQKM6duzYBQkOHlUAiBEcAMQIDgBiBAcAMYIDgJjgtyqnvvUeVwJwIVz0ubdcKXGhfqsiC46L/uzDbgbA6Dr10nONExw8qgAQIzjO0cTrnmy64dFJM9zsiJnz9aYbnpx89Xw3OzLmT1qmRvv1iW52tJWvflTv1Bw3i3Fg/AfHsK7wGV+efMOTTdfd5mYBGNLgiM3kC0OZLFsI68PJL7Iy9VamMjMVVtrJql9Ta7J8OSxYtiasDwt+qtaYj9+NE1OVtmCFhfwU1ofl/GSFZSVc6l/PebKr29dMjefrlUyDsOAX+YJ9Hcpk7qeu+0ywiuUbZMpKpt73YGft5JdmyuEU1tuy5SvDydbb1/xkhYXM1FiEweH2InY74mZNWcmX9aQam/buNbPU1iSLbONqA1PWS00DU0yVLV0wM2GNLcdR//6P93R8pu94Uqnrk62YYsGrnZTj63s7Pt7zk0dNjdmuLYSqc6bkG4StqusumDDtYlMTVto9CkaluEVm8lxLwzauzgavil6azLifybr61ZRsb3aydbag+PpMjWULbvWwE1/jJ1vvhQ3Cgi3bJn6RrTeTrjevSlivphnXl5psfdCV+uHKZtaX1X921qxgfwQ9hFNmrXwDNQVtXFm9Jo2V6lI7o15qLLUr6ko7n9RXC3amUQh/qzL3Q26m0Vy6dvLV80tnvt+z/1E1V5732KQZF8dHP1655KkJU1XFm5XnTXaE5n69aVZzfOJfe392QM1NXPhU+Wy1PGHqm5WjXaVZ80tqPunWbUWXLNetae+qFLXd3sPq522T2z6RNO4e6PjHftezq/KVKWZUrqyFI18wafmXy/YUD+rDPv3uaNmuks2Fe9FzsG/n+oqvPNMdT23Wi3x9onAr+jhPOxVHze7CS60V7r6WHJYU+07ZcqrbXKUeQJQMT3FvSnor6RPA1p1bDw3o1OEfj9nfqsQD2anSF1V6RmwaOBsNvHMuU8Wermo8ph8X1T3mh+E34acXH1MvpRmfmqhnP12easpxfxR/RpWjM8/1qSvCUZ8GA/r7jlRqOOksULrjtxbo6zB12TRPaDu37yYvLl9tV1Tnt08NRdU/NulSXaqcfdPUaCU1yLmmlE2NhKoP96Jp/qTla6snQXJRxcdSqaEUb0VpSlJDUb0ttN8HZVOjkDp0/vJWStOuVyMJr3lFb2veAjfjr3ll6ieq9WnZbuU9YFCy4Ij7fpud+n8f978zYtPA2Xig55ymATO+ftePuY2KK+/07VrUf1oXVbjE/bdN+tizTXZadFvc/+P+UyejaHZpzjuledeb82l2qeV3cctfqHLl+DfiX3+x5+A+01Gv2tMJsxeo+vj1fzr7g0Vqct32/Xlpsiq83G8qe19XHTZH7352QrO+OCtdrWef0JOtL7e83b9nrYqpKOoaeGp5z1N39lfmTVr+VFObmZb/c1ktM2EVH1/Xs+OGnh3rTOOLSpfG5Xkf0ls/sb6n42N6OtqtsqN0xXxVV/nZ39rKvhPm2v5jVTl/0kydGvFR07hjvelHsfXqbsXWf2zgjLraWyZc6iNS3ZXo+t7DqiY1FW1F1WtuK88f1PNTr54YudHqT+9wlXSHKlt1QCdb1Kuf/lElum2ivuaTEZo+TaCon0pSr3ff1j/Sa7drt7X/Edetuvex3XZ8X9yDH2HDTQ1EeMcxvlQOdqjP1fKMb0+8bHp0el/lbFS+8v7JM+aoIKi84NokFptP+5cHDu6184m9va++HEVzJt60b8pN+yarfqKT0ZsmxVTPLbun3KgnU68vtnhA3dGoUhwP9OqU7O+tng/xgI68ik3As3Hf7+K+Z9WQ9BnTdzqu6HalGWub2p7Wk7mbKDU1R/3vlD/4mK10H7PqpqnSou8Ceg70v6R6y59w6m7FdNL2tLlXurjk/0jwmeezj06J8rzvpLaSd/xH/g6vPMVc/EfURTgYv8XjX6k+ZPV0DdinM9tn0yXZ0/Tw84NcRurexx4oe+NzDj2grvEZHOV3mQs1a1OvuS/QU+cmW1NRNw7T5pSjk5WX7tERMGVReZq6rfj33PWz13xozym/384GXjgU3tVXum7qfd2Xk82ZqScbOsre3meSBs/ck3k6yPP3O27q/Gbpmu9Pumy6q+9SEaYa9cb9v4hV4qhbiem/i3vPxL1vm/QYiPveMYWTlUOtPU8u91Pvi73VZ73wOTShUkPlhbvfMZ/V9ZnnGnVDNIQHAX2HYt0+eeHtruiv80v/0iTgG4MemazqHYed/qFWIOLcSINDnXeNORnTPq0+9tU0cZqdDxZVW6am/hPmYju9o/f1OHrh2+YT/mT8qz1JA6vastyi+w83UZ7fpg5ipWvh2R/oqfcF0/gl/YzjG0+56QeTL7MdqklJ7lDe7yv9ZGVnKwd3qIundNmGpEO/rln8Wz3g8rt1XJbepbJtT/9b6uFoenm+bbyhPMW2223uj6aXr93d9Fc7zbRpQqUn7n87edbrSz2H9r7lJnO/E59+Tt0Hlf5I35+Ummarmx33i4BKbzSgosdem7Ha+8qr+lHH3x8V36Qc/0pFPSjpb3+SWwMdIo/06+eapNJ8HWMeYQYz9ROmk29MtN1W7ziebvJ5VJ/vwc2jnvFyx/H6mj79PYITn62WB6HDQt1u2BsQ89xx9sX+5JYh5YW/cx/paZVfvaguknLL/ik32emJyZfp8bjvR5zppT9dbAp7e38R1g+dul36Tnj9lGd8Vr3aQLFbnxS9qBtMm69O/crBG80XKznZvSi6h8pJtqIfu5KtzNOJY/YkjlXuvB332y9oKvohy389FIgHVAadCYOpr3OJ+arIUTd6ff1vVw79Td9x+52IFh+/t/e/9+nnLzevnvXUZI+E2kIcHV9nssaL+/d/VH9345mvXUxjy5btrCnkemjUqYHIfh37nvd90M1o+sPAFesZYrNBDaefwnXrV4ZLbTl8tWz5c5NveF//D9foc/lPvto0f1Hp9HfO7vqWbWHaKHaVcN0R5zvPF0L1x5BfWqe9WqSopbZN/Z49u5Yy9FWsOo3zi0xNue7dQ0l9avrBjIBSaYIr5el7tqHvabG3ug+M1b8dmw4OaBOX/SR5bHFidbtxIP91BjAsb/3v//C3Y8eP/l3Xpe+3SQ2Mf/xDPsCYMSYfVQA0Gh5VAIwZBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFArOZfcrv88svdDIBG9dprrzX8X3Lr2n7Hog273Myo2LVh0R3bu9zM6Ki3yREazgXYqz941XN3kLO45pszCifGWMKjygV0fpN49HN+UIMPqQEHjSI1g0M9wuTpf8fRFUfF0nv2blsx282MDv0vQ7piTr1lAsFend8DOtpv1xAMPqTzNeik39krtu29Z6mpKlLzlKt3Ll6A8zThLtdRN9w7jq7t7YudDZ2mpnPD4vbtXep1sf5Z0EJVbOg0y02VX+7W92yTbB+K78bNmya6ddJDUu7c0L690zVLxmSLtl0gWbZ47Q5XE9QVrZHbLd082Ui6fbUf1dLO6AZd2x/YdDjasdbNhoLOk0WD7Ut1I7aqTu8ZqeFphbu2YUPSLOk/aeS6z6+V7To/pOw6mRZ69aSvpKxXSU4avx0t6Ku6w77y71W/1Xm3Mb+CYqrseO3qqbGHC7K7FSxTXbZv2JB0mwyv2jwc2ljngiutu7v793k/37Ji3tqn3Yzx9Np5SY1euGLLz03dihUrglq/il6iWug6V6nXNytVVw/5yrAbt06qZyUYii+nuw+2Ga6oZLr3m0wGFPTnqoJOfEO91O94oLqWVe053G6xalu9xepabrVkGOEmfKeD964kPWg/37LF9pXU+K0Hda6Y6Tw160aT7zrdrGidXKWfScq6gTrKyd4WMC3M8qRTV2m78p2Gm9KVfvumEKxrhAv8asFupdeuFoOqcM0Roy5Vd9GOrmHdcXQe2BF9dMFSU265duncw68eM+XDzbfeY2q7DnWqD5B7l1j37oiSFm6tmVfOjZpntqhSy8xmv7C+pTffqTekt6d6vj/80Ckwd+m1SfdzrzT/GKLeZvexMPf1KJPdSOg6t67a5IKPplcZdMdDau3Dm+9YKfuo6bzfHLI7Ngf/f/ea+6KHozZh1jCrpPevjnBHopZbb11ac9fcFs0mlfThL3qf812n1Tw3hmDpzbfadyYle8zUCPxbOAh3Urk5rda7NthuufPZvEvjmeQ7joLqoKK6VJ9krqTMvfPfdletaQ27CYqpvhy92LSwr46bmb1ii+pv/n+pU2XDLluvX62kHKyYFPVPV3SKZvWL/plwM74uv0iX/I6ntK5RA/1S9NUlS9R5aNvbVdyPnK7tK+/ttodtXZtvFLROivqnKUZR2zrd3NmiH7jtksHk2wQ11S58KSmkDr+uzL3PhV1X62qtk1ornLFl3WDW5fnvEwqPWfIz3a8rhVV+Rv+0xTrvmm4Y8svsa8LMzV7xpTsjG+r37mhbp/dxROmNXAjDuuNYuqAt6jhgP3Q6/3Pz4blXXWHK3mz9kdV56IiZOfL4qsHuD4ZCb6gtifxo6T3qNDn62pHoiqvmmp/KkdeOmmVDNfvyWX43EuHIjzz+eIc+WXX58Cu/Vq+D7niePoHm2rVT3JhTfv2KvtvR2+s80OE2WU84HPW5u+px32XQe+f9ra2t2TdAr+nbqP3sFO6aO/xRwfuc79pK6mqfG34tyXtacMzU6n4Dg0ifVFX5d63WbtV05FBnlORj/nZ0zKr5v7oqCDNd1XFfa4ebVR9ynWu2rVrV3tqazN7SHMfqIJsoNKs337J5W7zqjtbNSQO/yLwGRSsoKnpO/Wdeq1ues2rbllb1CbOqfYv9fxmqfpvjqHlF2+b7zJbmzJmjq01XZnXbpyu6//SPRGu4G3oDauHsWzave2WpG7napPk4vHnVnPb7WiO134PteGD3A0vv8yNXvRzxA2i+JRmz3qcVJpm01ptXbW83m25bt66t474DnWv0luxKpoUruv/Up2PnugeW2uHortRo1AFJ9646ndPxqlkloHb9WPL+6B1RS+vvml0/e/ibo/z7nO86u8P5dbKDzr+nulEyilDBMVsTvoVKW7Ca6Sh3UtlK89pZ610r2C3FLlOvqlIXjKTu8BY/CLWCeS/HvJp/cnTGjBlupgGoD6T2V28dJ4f8gtn9wAPRGo5hYrROquphPx9bPHHiRGP9yVGTlg2j8UY01qhP0APzv7TEzUEZnZOqK46671tqtG9p/peRfgv0TlwINe843vve97oZAI3qN7/5TWP9n9wuueQSNwOgUb3xxhv8n9wAjA017zimT5/uZura87UPfffKzd/6lP6NQFgGMApOnjw5ju44VIR87ntD+gU6gDFo2L9V0U1d48VffO6bn9R/hCBVC+C8MRfrBSC849jz4Iedz3+v29VZdomp3fPgV34YvbztTjX/4B63GMA4Irnj2P21D3/3ik3PGpuW7L7za7t1rbu1WHz3pvYWW15899qPRC3tuuXdi/UyAOeHu1xHneCOY8+hZ6KubZ+93vjstq7o6P+lbzoA/IEQPqp8ZK294TC++cnx/TeHAdQgCI4l134keuaQ+9Jiz4Of/w93v9FV+O8ohLV7Hrz+et+89gyAMUJyx7Hki8+ujdbbR5XvXXm3ud9Y8tftLc+svz7zJairVfh2FBiHav4BsIsuusjNAGhUp06d4o+cAxgbCA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGIEBwAxggOAGMEBQIzgACBGcAAQIzgAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHADGCA4AYwQFAjOAAIEZwABAjOACIERwAxAgOAGKlOI5dMXD06FFXAtDYZs2a5UqjqDg4AKAOHlUAiBEcAMQIDgBiBAcAMYIDgBjBAUCM4AAgRnAAECM4AIgRHADECA4AYgQHAKEo+n94bM3i+2faqAAAAABJRU5ErkJggg==" border="0">  Example: overlay <div class="ui-overlay" style="position:relative;width:500px;height:300px">       <div class="ui-widget-overlay"           style="position:absolute;"></div>                <div class="ui-widget-shadow ui-corner-all"           style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div>                 <div class="ui-widget-content ui-corner-all"           style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;">          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>   </div></div> <img width="567" height="342" id="그림 5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjcAAAFWCAIAAAAaCiubAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAACRcSURBVHhe7d1PiCXnee/xHtkwkrFBQuCNEi2smatFVhaYWIxy5REIlEhoc/HiBpkMspRgyEJahGsLiZBYzHiXWRh0cyUbgZRsvBOaG4NgWrnXgxLb2AuTxTAzYEQEwkYY/0Uj2e48Ve9znlP1nDp9uqq6u341/f0s5Hrr1K/+vG+/73NO92F8bGdnZwsAAEk3+f/O0PbTx44du++la96cp2sv3WdP8fS2N/XN7oY7Hd5TjLvSDfEzDoyzT1XqCMymUY/IajPQqEX+xqiowBE3489SR1xV+Kh7h60ufNQ94BDtU5U6/Q87OzvfeeIub96IRj3i/vfP9mvnfeuGdtcT37Ge+4fT3uxnVLjTte2XL/kmgMPRq0q1f28VrXqj+Uq2OKBS3ofm38U0z1xeK+KUHnh63aWal/AXy664xt5+/dO8kUZrcfqV6+bzVq3mdvXKanix59ixE08uV71yfFgc3tzt+2zXA1WRuvTkieXOrCPXfrq4wUajiENK4Omn/aXce82Mv1h2La+RLtmtdSPLVpw+X9e0z2utdM8vba+G61dqw7p9++mSO/9AtbPjppqXWN6QKYlaxFrXbZ6s8UI9ygudd7TcrlvN7fYtALNlbzb37OJTFjj14tXUqjear7QsXl166uJityeuvniqtbulHFMOWVg5Q3q9HFD2+RHlxPX+3bROumwtbiteaWpkmpestzvCi2aD3VZ6ADv6qYt2+OrB1VnaB/t5W1ZOV44qu70XGvfdfZm0f/UMKdfMlCPK0WX/LtonjVbZaLzS1Mw0L1lvd4Tbt1prHrWwW7e39/p5m1oHlNdXLrDsjvbpfO+641f3N3aXS5XzNbY77hCYn/2oUq3txmyq2t5czJfGRFrOrxyOK6yetjnvmtdfap0iLtcR79Y+abO1ci+V8lq8VK5XtuujPLsaXtxJaVqrealolFcXe1v30zrem0V16tJcvNw8TeTiyqnPzPLc7fNUGrGmcmDZvTzdarxb+6TNVmO7nKxWt+OlsuG766NKthn2Y/yF5Sv14YsbXDTKq8vbXh7UOGMt3VP9cvtx24ly/DJfNPaWzThFXLm9v3GDcf6yUbbL4fkywDwdzrcnnnrU/zZw+tFq+nzv2rXqjwZfte3zz730UvUXlqe+uvyjTfk9VqX8Wus/3i77G+dZEb8Naf4uxy93/rn7/qLae+rFv97HP1E0nP5rWyEuvfz1p587bxd58Sl7gq+/VP0F49SZ0/lPUW//R/edlHP4k9fP/Zm7PLu+P3YXV7/r9BlbwUrOr+P317yPtZfpeIqF+AVX81dTfrkn/+I+64/20O4n/wF67emv2+A+9aI9Vvwwrf6YHE63V38Iu/gZz3X9RvDOP/JSUunovGvXvmf/XddjXQPaqxeAORpepcqEWlH+Yl1bflugLkuV8jd/Xwh8hXiyWtqby0f7zege/vxtJcqKk8fKu05XX2Lr0qWqcu2y2K6x50esV41L58/bOvHVJ56ornn+yWrR6Fht6nXq0svbK38wKCvPgj1MPPZe+qP+ekYRL8e6Wv7mf+qP7qwavqyt3l/vbrdV1tbX8o493slXyiW82/svlnVFWbX6iPWbkPPn65+fJ6prdvwwucPr9rLLfgrPP9D5lyvX3Xl33fUZ++/517qD3QPaoxeAWapmyV61CkDhU7l+JU/rYjXU+E1EeXFlx9LipfjFxtLyms0XfcYvj1ycsXF3HSdbWL3bPTyiKadcvFzO0rhAI+w32FId2X3+fD9xzuYLHXe1epXGQe2bray7zOpNNfqu+WI5wfLIuH53JyTr+qR1uS7lsv7yymM1w+su0X1T5bxLixtonaXjrtq56oD2AyxbzeuWVGnkK5v6hdX7X950yfg1yoErTwTMVq8q1ZpDp041ZkNzzq1qzrw0tW1O5Vh7nrbmXivs87bet8zUv3Ezy0PLa82oH906W2hcvscj1q8vT1jd28oVI+x3vlQf2rhwbZFv71+edbm/+66aV+no4+btVTovU+9sh8tx9b7GFerfNTUPLa81o350vpWidbN1t5c7KPvzvS7Z640T2r2tXjHCzWvU6lfaz708vLM/WidZvavWFcrL7XtotJonandevqPF/ubZ271or6zvBWDmelapGWovE67aqTaT7Z7iLuuFatZLTecTVDvTSEzuxup24MZzQ1epetGptZfGunCJrZalmLaored7tHyStN5XwyH41sBvNsy024Eb1RH4F5KqhbH1l+/trz/5mYubvxxwuO564jutFdPWSrE77MkeoPWPbVx76bnv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" border="0">  <h3 style="margin-left: 1cm;">1.7.14     Interaction</h3> <h4 style="text-indent: -22pt; margin-left: 21.3pt;">1.7.14.1          Draggable</h4> 엘리먼트를 드래그 가능하게 하려면 엘리먼트에 대해 draggable() 함수를 호출한다.  $("selector").draggable(); draggable의 옵션으로는 다음과 같은 것들이 있다.  -       scroll: true | false-       axis: "x" | "y"-       containment: "parent" | "document" | "window" | "selector"-       distance: px-       delay: ms-       handle: "selector"-       revert: true | false | "valid" | "invalid"-       helper: "clone" | function scroll은 드래그하는 범위가 화면을 벗어날 경우에 자동으로 스크롤 되도록 할 것인지에 대한 것이다. axis는 드래그 방향을 x 축 방향 혹은 y축 방향으로 고정하기 위한 것이다. containment는 드래그 가능 범위를 제한하기 위한 것이다. distance는 최소한 px 만큼 마우스 드래그가 발생해야만 엘리먼트의 이동이 시작되도록 설정한다. delay는 드래그 시작 후 ms가 지난 후에 엘리먼트 이동이 시작되도록 설정한다. handle은 draggable로 설정된 엘리먼트에서 드래그 핸들을 지정하는데 이용한다. 이 엘리먼트를 마우스로 드래그 해야 드래그가 시작된다. revert는 드래그를 멈추고 마우스 버튼-업 했을 때 원래 위치로 돌아갈지를 설정한다. true면 항상 돌아간다. valid와 invalid는 droppable 엘리먼트와의 동작에서 revert를 수행하는 방식을 지정한다. valid면 드롭된 후에도 revert한다. invalid면 droppable 영역 외에서는 revert되지만, droppable 영역에 드롭된 후에는 revert 되지 않는다. helper: “clone”으로 설정하면, 엘리먼트는 그대로 있고 엘리먼트의 모양이 복사되어 이동된다. “clone” 대신 함수를 이용하여 커스텀 클론 모양을 만들 수 있다.  draggable의 이벤트로는 drag, start, stop로 이 이벤트 함수의 인터페이스는 function(event, ui)로 동일하다.  Example:    // draggable    $("#draggable").draggable({    scroll: true,    drag: function(event, ui){           // relative with parent (top, left)           var pos = ui.position;             // absolute (top, left)           var offset = ui.offset;                       $("#disptext").text("position: ("+pos.top+","+pos.left+"), "                   + "offset: (" + Math.floor(offset.top) +"," + Math.floor(offset.left) +")");        }    });...    <p>Info: <span id="disptext"></span></p><div id="draggable" class="ui-widget-content">  <p>Drag me around</p></div>  <h4 style="text-indent: -22pt; margin-left: 21.3pt;">1.7.14.2          Droppable</h4> 드래그 가능한 엘리먼트를 특정 엘리먼트로 드롭 가능하게 하려면, 드래그 엘리먼트를 받아들일 엘리먼트에서 droppable() 함수를 이용한다.  $("selector").droppable(); droppable() 함수의 주요 옵션은 다음과 같은 것들이 있다.  -       accept: "selector"-       activeClass: "css class"-       hoverClass: "css class"-       greedy: true | false-       revert: "valid" | "invalid" accept은 만약 명시된다면, 명시된 엘린먼트만 이 엘리먼트에 드롭할 수 있다. activeClass와 hoverClass는 active or hover 상태에서 적용할 css를 지정한다. greedy는 droppable 엘리먼트가 중첩되어 있을 때, 부모로 이벤트가 전파되는 것을 막아준다. droppable과 관련된 주요 이벤트는 drop으로, function(event, ui) 인터페이스를 갖는다. 이 함수의 파라미터 중, ui.draggable은 드롭된 엘리먼트에 대한 객체이다. 만약, accept를 명시했고 accept에 없는 엘리먼트가 드롭된다면 drop 이벤트는 발생하지 않는다.  Example: ....box1 {    float: left;   width: 150px;    height: 150px;    padding: 0.5em;    margin: 10px;} #droppable {    float: right;   width: 300px;    height: 300px;    padding: 10px;    margin: 10px;}  ... $(function() {    // draggable    $(".draggable").draggable({    revert: "invalid"    });         $("#droppable").droppable({        accept: "[id ^= 'item']",      // item으로 시작되는 id 엘리먼트만 받음.        activeClass: "ui-state-hover",        hoverClass: "ui-state-active",        greedy: true,                drop: function(event, ui) {                // #droppable의 리스트에 드래그된 엘리먼트 추가        var ulelem = $(this).find("ul");          ulelem.find(".dropmessage").remove();                $("<li></li>").text(ui.draggable.text()).appendTo(ulelem[0]);                // 드래그된 엘리먼트 감추기          ui.draggable.css("display","none");        }      }); }); ... <div id="item1" class="ui-widget-content box1 draggable">  <p>drag item 1</p></div> <div id="item2" class="ui-widget-content box1 draggable">  <p>drag item 2</p></div> <div class="ui-widget-content box1 draggable">  <p>drag item 3/this is not accepted.</p></div> <div id="droppable" class="ui-widget-content">   <ul>       <li class="dropmessage">Drag to Here</li>   </ul></div>  <h4 style="text-indent: -22pt; margin-left: 21.3pt;">1.7.14.3          Resizable</h4> 엘리먼트가 리사이즈 가능하게 하려면 resizable() 함수를 이용한다.  $("selector").resizable(); resizable() 함수의 주요 옵션은 다음과 같다.  -       animate: true | false-       containment: "selector"-       helper: css class-       maxHeight: number-       maxWidth: number-       minHeight: number-       minWidth: number-       aspectRatio: true | aspect ratio-       grid: number | [x_num y_num]-       ghost: true | false animate는 최종 사이즈 변환 후에 엘리먼트를 애니메이션 효과와 함께 리사이즈한다. 사이즈 변환 중에는 점선의 가이드만 보인다. containment는 지정된 엘리먼트의 범위 내에서만 리사이즈가 가능하도록 제한한다. helper는 사이즈 변환 중에 보여줄 가이드의 스타일을 지정한다. 최종 사이즈 변환 후에 엘리먼트가 리사이즈 된다. 미리 정의된 클래스 중에 "ui-resizable-helper"가 있다. min/max-들은 최소, 최대 너비와 높이를 지정한다. aspectRatio는 리사이즈 할 때 가로 세로 길이의 비율을 유지할지에 대한 옵션이다. true면 원래 비율을 유지한다. 다른 숫자를 지정하면 해당 비율을 유지한다. grid는 리사이즈에 그리드를 적용하는 옵션으로, 이 그리드에 따라서만 사이즈가 변경된다. 옵션 값만큼 리사이즈 가능 영역을 나누어 그리드를 만든다. (그리드가 보이지는 않음)ghost가 true면 리사이즈 가이드와 함께 투명도가 적용된 엘리먼트를 함께 보여준다.  Example:   $("#resizable").resizable();... <div id="resizable" class="ui-widget-content box1">  <h3 class="ui-widget-header">Resizable</h3></div>  <h4 style="text-indent: -22pt; margin-left: 21.3pt;">1.7.14.4          Selectable</h4> 선택 가능한 엘리먼트로 지정하려면 selectable() 함수를 이용한다.     $("selector").selectable(); selectable로 지정된 엘리먼트가 선택 중이면 .ui-selecting 클래스가 지정되고 선택 완료되면 .ui-selected 클래스가 지정된다.selectable()의 이벤트로는 selected, unselected, stop 등이 있다. 이벤트 핸들러 함수의 인터페이스는 function(event, ui)로 동일하다. selected 이벤트에서 선택된 엘리먼트는 ui.selected로, unselected 이벤트에서 선택 해제된 엘리먼트는 ui.unselected로 접근할 수 있다. stop 이벤트에서 ui는 형식상 있는 것으로 아무 역할을 하지 않는다. 바로 예제를 살펴본다.  Example    $( "#selectable" ).selectable({         stop: function() {          var result = $( "#select-result" ).empty();          // 선택된 엘리먼트에 대해 각가에 대해           $(".ui-selected", this).each(function() {              var index = $( "#selectable li" ).index(this);             result.append( " #" + ( index + 1 ) );          });       }   });... <p id="feedback"><span>You've selected:</span> <span id="select-result">none</span>.</p><ol id="selectable">  <li class="ui-widget-content">Item 1</li>  <li class="ui-widget-content">Item 2</li>  <li class="ui-widget-content">Item 3</li>  <li class="ui-widget-content">Item 4</li>  <li class="ui-widget-content">Item 5</li>  <li class="ui-widget-content">Item 6</li></ol>  <h4 style="text-indent: -22pt; margin-left: 21.3pt;">1.7.14.5          Sortable</h4> sortable은 리스트의 아이템을 드래그해 재정렬할 수 있게 해주는 기능으로 sortable() 함수를 이용한다.  $("selector").sortable(); 주요 옵션은 다음과 같다. -       placeholder: css class-       connectWith: "selector"-       dropOnEmpty: true | false-       items: “selector”-       cancel: “selector” placehoder는 아이템을 위치시킬 부분에 적용할 css 클래스를 지정한다. connectWidth는 엘리먼트 교환을 할 다른 sortable 리스트를 지정한다. 만약, 두 리스트가 서로를 connectWith로 지정하면 두 리스트 간에 엘리먼트를 교환할 수 있다. dropOnEmpty를 false로 지정하면 리스트가 비더라도 엘리먼트를 받을 수 있다. 이 옵션을 false로 지정하지 않은 상태에서 리스트가 비게 되면 엘리먼트를 더 이상 받을 수 없다. items는 sortable한 엘리먼트 아이템들을 지정한다. cancel은 sortable하지 않을 엘리먼트 아이템을 지정한다.  Example:    $("#sortable").sortable();   $("#sortable").disableSelection(); <ul id="sortable">  <li class="ui-state-default">Item 1</li>  <li class="ui-state-default">Item 2</li>  <li class="ui-state-default">Item 3</li>  <li class="ui-state-default">Item 4</li>  <li class="ui-state-default">Item 5</li>  <li class="ui-state-default">Item 6</li>  <li class="ui-state-default">Item 7</li></ul>       <h2 style="margin-left: 1cm;">1.8    JQuery-Mobile</h2> JQuery-Mobile인 웹 어플을 위한 자바스크립트 라이브러리이다. 이 라이브러리를 포함시키는 방법은 JQuery로부터 다운받아 설치하거나 온라인 설치하는 것이다.  <meta name="viewport" content="width=device-width, initial-scale=1" charset="EUC-KR"> <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.4.2.min.css"><script src="js/jquery.js"></script><script src="js/jquery.mobile-1.4.2.min.js"></script>  메타데이터 viewport는 페이지 크기에 대한 정보를 제공하는 역할을 한다. 위 설정은 페이지 스크린의 너비를 장치의 픽셀 너비로 설정한다. 직접 다운받아 임포트하는 방법 대신 외부 링크를 이용하길 원한다면 다음과 같이 한다. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile1.4.2.min.js"></script> JQuery-Mobile 페이지는 div 태그와 data-role을 이용해 구성한다. 다음은 단일 페이지 구성에 대한 예이다.  <div data-role="page" id="pageone">   <div data-role="header">      <h1>Header Text</h1>   </div>      <div data-role="main" class="ui-content">      <p>Hello World</p>   </div>      <div data-role="footer">      <h1>Footer Text</h1>   </div></div> 한 페이지는 data-role이 page인 <div> 태그로 감싸인다. 이 페이지 내부는 헤더(header), 메인 콘텐츠(main), 풋터(footer)로 구성된다. 여러 개의 페이지를 구성하고자 한다면, 페이지를 연속해서 사용하면 된다. 페이지 간의 이동은 <a> 태그를 이용하며, 페이지의 아이디를 링크로 사용하면 된다. 페이지를 다이얼로그 형태로 보여줄 수도 있다. data-dialog=”true” 속성을 추가하면 된다.  <div data-role="page" id="pageone">...<div data-role="main" class="ui-content"><p>This is Page One.</p><a href="#pagetwo">Go to Page Two</a><a href="#pagethree">Go to Page Three</a></div>...</div>  <div data-role="page" id="pagetwo">...<div data-role="main" class="ui-content"><p>This is Page Two.</p><a href="#pageone">Go to Page One</a></div>... </div>  <div data-role="page" data-dialog="true" id="pagethree">...<div data-role="main" class="ui-content"><p>This is Page Three.</p><a href="#pageone">Go to Page One</a></div>... </div> 기본적인 페이지 구성을 위한 data-role을 살펴보았다. 나머지 data-role 목록은 다음과 같다.  -       "button"-       "collapsible"-       "collapsible-set"-       "content"-       "controlgroup"-       fieldcontain"-       "flipswitch"-       "footer"-       "header"-       "listview"-       "navbar"-       "page" -       "popup" JQuery Mobile 사용법은 w3school을 참조하라. <a href="http://www.w3schools.com/jquerymobile/default.asp">http://www.w3schools.com/jquerymobile/default.asp</a>