jquery：2.jQueryの機能追加

jQueryを利用すると、JavaScriptで総てを記述するより格段にプログラミングが容易になります。

更に、下記のJavaScriptライブラリを追加するとjQueryの機能を拡張することができます。

1.jQuery UI

2.Slick

3.Bootstarp

 

1.jQuery UI

jQueryのアニメーション系を強化するJavaScriptのライブラリです。

CDN(URLで呼び出せるもの)には下記の物があります。

①GoogleのCDN

②jQueryのCDN

③MicrosoftのCDN

私は①のGoogleのCDNを利用しています。

 

Googleの[jQuery UI]の最新のバージョンは下記で確認して下さい。

GoogleのjQuery UIの最新のバージョン

現在は下記になります。

jQuey

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

CSS

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

■上記はjQueryは1系、2系、3系いずれでも同じです。

 

テーマへの登録方法は「header.php」か又は「functions.php」になります。

登録方法は jQueryの導入と記述の基本 を参照してください。

 

2.Slick

ヘッダー画像のスライドをコントロールするjQuery機能が拡張されます。

slickのダウンロードは下記を参照してください。

http://kenwheeler.github.io/slick/#go-get-it

 

CDNは下記になります。

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

CSS

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

■上記はjQueryは1系、2系、3系いずれでも同じです。

 

テーマへの登録方法は「header.php」か又は「functions.php」になります。

登録方法は jQueryの導入と記述の基本 を参照してください。

 

3.Bootstarp

BootstrapはjQueryの機能を拡張するツールだけではなく、WEBページでよく使われるフォーム、ボタン、メニューなどの部品が用意されているWEBフレームワークツールです。

Bootstrapには下記のシリーズがあります。

・Bootstrap3（jQueryの1系の機能を拡張します）

・Bootstrap4（jQueryの3系の機能を拡張します）

・Bootstrap5（jQueryの利用をやめてしまいました）

①Bootstrap3

利用方法は Bootstrap3 を参照してください。

CSS（これがメインです）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

■私は上記CSSを「editor-style.css」と「style.css」に読み込んでBootstrapのCSS機能を利用しています。

JavaScriptライブラリ

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

■上記はjQueryの1系の機能を拡張します。

■jQueryが良く解らなかった時期は利用しましたが、現在はjQueryで素直に記述した方が簡単なのでこのライブラリは利用していません。

 

②Bootstrap4

利用方法は Bootstrap4 を参照してください。

（私は利用していません。）

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JavaScriptライブラリ

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

■上記はjQuery3系の機能を拡張します。

■PopperはBootstrapが独自開発したJavaScriptライブラリです。

 

③Bootstrap5

利用方法は Bootstrap5 を参照してください。

（私は利用していません。）

CSS

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JavaScriptライブラリ

bootstrap5は、jQueryの機能拡張路線をやめて、独自開発したPopper（JavaScriptライブラリ）を利用しています。

これをバンドルしたものが下記になります。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>