jQuery UI

jQuery UIとは、jQueryを拡張するプラグインの一種であり、UI(ユーザインタフェース)に関する機能を提供している。

jQuery UIの使い方

jQuery UIを利用するには、jQuery UI の CSS と JavaScript が必要である。

jQuery UIはjQueryを利用しているため、jQueryのJavaScript も必要である。

<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  </head>
</html>

.resizable()

jQuery UIのresizableメソッドを使うと、ユーザのマウス操作で要素のサイズを変えられるようになる。

<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
    <style>
      #resizable {
        width: 150px;
        height: 150px;
        padding: 0.5em;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
      $(function(){
        $("#resizable").resizable();
      });
    </script>
  </head>
  <body>
    <div id="resizable" class="ui-widget-content" style="border: 1px solid gray">
      <h3 class="ui-widget-header">Resizable</h3>
    </div>
  </body>
</html>

Resizable

参考文献

OpenJS Foundation (2022) jQuery UI

OpenJS Foundation (2022) jQuery