[JQuery] JQuery Widget

# Widget

 

Accordion
=> 여러 content panel을 이용해서 배치

 <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>

 

 

Autocomplete
=> 자동완성 기능

<script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>

 

Button
=> 버튼

<script>
  $( function() {
    $( ".widget input[type=submit], .widget a, .widget button" ).button();
    $( "button, input, a" ).click( function( event ) {
      event.preventDefault();
    } );
  } );
  </script>

 

Checkboxradio
=> 체크박스와 라디오 버튼으로 해당 element를 선택

  <script>
  $( function() {
    $( "input" ).checkboxradio();
  } );
  </script>

 

Controlgroup
=> 하나의 visual set안에 여러 버튼/위젯이 그룹으로 포함

<script>
  $( function() {
    $( ".controlgroup" ).controlgroup()
    $( ".controlgroup-vertical" ).controlgroup({
      "direction": "vertical"
    });
  } );
  </script>

 

Datepicker
=> 캘린더를 보여주며 날짜를 선택할 수 있게 함

 <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>

 

Dialog
=> 내용을 open하는 창

  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>

 

Menu
=> navigation에 대해 여러 메뉴들 중에서 선택할 수 있도록 함

  <script>
  $( function() {
    $( "#menu" ).menu();
  } );
  </script>

 

Progressbar
=> process의 진행상태를 나타내어 줌

  <script>
  $( function() {
    $( "#progressbar" ).progressbar({
      value: 37
    });
  } );
  </script>

 

Selectmenu
=> styleable하게 element를 선택할 수 있도록 배치

 <script>
  $( function() {
    $( "#speed" ).selectmenu();
 
    $( "#files" ).selectmenu();
 
    $( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );
 
    $( "#salutation" ).selectmenu();
  } );
  </script>

 

Slider
=> numeric value를 드래그 하여 정도를 나타냄

  <script>
  $( function() {
    $( "#slider" ).slider();
  } );
  </script>

 

Spinner
=> text 인풋을 numeric value로 버튼과 화살표 키를 통해 넣을 수 있게 함

  <script>
  $( function() {
    var spinner = $( "#spinner" ).spinner();
 
    $( "#disable" ).on( "click", function() {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    });
    $( "#destroy" ).on( "click", function() {
      if ( spinner.spinner( "instance" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    });
    $( "#getvalue" ).on( "click", function() {
      alert( spinner.spinner( "value" ) );
    });
    $( "#setvalue" ).on( "click", function() {
      spinner.spinner( "value", 5 );
    });
 
    $( "button" ).button();
  } );
  </script>

 

Selectmenu
=> styleable하게 element를 선택할 수 있도록 배치

 <script>
  $( function() {
    $( "#speed" ).selectmenu();
 
    $( "#files" ).selectmenu();
 
    $( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );
 
    $( "#salutation" ).selectmenu();
  } );
  </script>

 

Slider
=> numeric value를 드래그 하여 정도를 나타냄

  <script>
  $( function() {
    $( "#slider" ).slider();
  } );
  </script>

 

Spinner
=> text 인풋을 numeric value로 버튼과 화살표 키를 통해 넣을 수 있게 함

  <script>
  $( function() {
    var spinner = $( "#spinner" ).spinner();
 
    $( "#disable" ).on( "click", function() {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    });
    $( "#destroy" ).on( "click", function() {
      if ( spinner.spinner( "instance" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    });
    $( "#getvalue" ).on( "click", function() {
      alert( spinner.spinner( "value" ) );
    });
    $( "#setvalue" ).on( "click", function() {
      spinner.spinner( "value", 5 );
    });
 
    $( "button" ).button();
  } );
  </script>

 

tabs
=> 여러 panel 대해 tab 제공

 <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>

 

Tooltip

 

<script>
  $( function() {
    $( document ).tooltip();
  } );
  </script>