---
# System prepended metadata

title: jQuery UI 基本應用
tags: [jQuery, JavaScript]

---

# jQuery UI 基本應用

###### tags:`JavaScript` `jQuery` 

---
:::info
* 需要先連結jQuery檔案與jQuery UI檔案才可以使用
* UI可選擇需要的下載
:::
```
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
```





## Interactions

### 拖曳 Draggable
```javascript=
$( function() {
    $( "#draggable" ).draggable();
  } );
```
### 調整大小（Resizable）
```htmlmixed=
<head>
    <style>
      #resizable { width: 150px; height: 150px; padding: 0.5em; }
      #resizable h3 { text-align: center; margin: 0; }
    </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $( function() {
        $( "#resizable" ).resizable();
      } );
    </script>
</head>
<body>
    <div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
    </div>
</body>
```

### 拖放（Droppable）
:white_check_mark: [官網範例](:https://jqueryui.com/droppable/)
```javascript=
$( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  } );
```
### 自動完成（Autocomplete）
:white_check_mark:[官網範例](https://jqueryui.com/autocomplete/)
```javascript=
$( 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
    });
  } );
```
```htmlmixed=
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
</body>
```

### 可折疊選單（Accordion）
:white_check_mark:[官網範例](https://jqueryui.com/accordion/)
```javascript=
$( function() {
    $( "#accordion" ).accordion();
  } );
```










---
<style>
h2 {
    color: #2383B8;
}
h4 {
    color: #1AA340;
}
h3 {
    color: white;
    background-color: #2383B8;
    padding:8px;
}

.code1 {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    font-family:'Fira Code';
}
.code {
    padding: 2px 4px;
    font-size: 90%;
    font-family:'Fira Code';
}
</style>