.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQuery UIのダウンロードの手順と使い方

jQuery UIのダウンロードの手順と使い方

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
jQuery UIのダウンロードの手順と使い方
基本情報技術者試験の試験対策はこちら>>

「jQuery UI」を利用すると、Webサイトの画面項目に動きを付けることや、画面の見た目がリッチなデザインを作成することができます。
主にカレンダー、アコーディオン、ダイアログ、エフェクトなど、多くの機能が用意されています。

システム
エンジニア
jQuery UIを使うと様々な機能が利用できるのですね!ダウンロードとインストール、使い方を教えてください。
プロジェクト
リーダー
ダウンロードとインストールは簡単ですよ。ダウンロードしてから使い始めるところまでを一緒に確認しましょう。

jQuery UIのダウンロード方法

jQueryを導入する方法は必要なファイルをダウンロードする方法と、既に必要なファイルが置かれているサーバーを参照して利用する方法の2通りがあります。

簡単なのは、既に必要なファイルが置かれているサーバーを参照する方法です。
この方法はCDNと呼ばれるもので、jQuery以外でも様々なライブラリで利用することができます。

本記事ではGoogleを利用する方法を紹介します。まず、以下のURLにアクセスします。
https://developers.google.com/speed/libraries/#jquery

本記事執筆時点の2019年9月で最新バージョンである、3.4.1を利用する場合、「3.x snippet:」の見出し部分に記載されているコードをコピーします。
コピーしたコードはHTMLのheadタグ内にそのまま記載してください。

jQuery UIのダウンロード後の使い方

jQuery UIはタグ内に以下のタグをそのまま記載するだけで使用可能になります。

上記の3文を記載すれば、jQuery UIの読み込みは完了です。

jQuery UIを使用して、カレンダーを表示させます。
以下に例を記載します。

idがdateというテキストボックスを用意します。
これは普通のhtmlのテキストボックスです。

headタグ内のscriptタグでjQueryの初期処理を記載します。

の部分です。
カレンダーを表示しているのが、下記の部分です。

#dateという要素を指定して、datepickerというメソッドを呼び出します。
datepickerというメソッドがjQuery UIで用意されているメソッドです。

カレンダーを表示するために必要な実装はこれだけです。
実際の画面は以下の通りです。

カレンダー表示ボタン

テキストボックスにカーソルを合わせると、以下のようにカレンダーが表示されます。

カレンダー

カレンダーのような機能を自力で全部実装しようと思ったら、通常は多くのコードが必要です。しかし、以上のようにjQuery UIを使用することで、記載するコード量は格段に少なくなります。

システム
エンジニア
簡単にカレンダーが表示できましたね!実装するコード量も少なく、ダウンロードしてから使うまでの手順は非常に簡単でした。
プロジェクト
リーダー
jQuery UIにはカレンダー以外にもたくさんの機能があるので、ぜひ使ってみてください。

jQuery UIをダウンロードして使うことは簡単

jQuery UIのダウンロードと、カレンダーを表示する機能を作りました。
ダウンロードの場合も数行記載するだけでした。jQueryを使い始めることは非常に簡単で、実装も簡単にできます。
また、jQuery UIにはカレンダー以外にもたくさんの機能が用意されていますので、jQuery UIを使用してみてはいかがでしょうか。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムロゴ

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

秋葉原オフィスイメージ
  • スマホアプリから業務系システムまで

    スマホアプリから業務系システムまで

    スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

  • 充実した研修制度

    充実した研修制度

    毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

  • 資格取得を応援

    資格取得を応援

    スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

  • 東証プライム上場企業グループ

    東証プライム上場企業グループ

    オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

    安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへのご応募はこちら↓
株式会社オープンアップシステムへのご応募はこちら↓

新着案件New Job