操作
操作に関連するサンプルコードをカテゴリー別にまとめています。

アコーディオン

マウスホバーで開くアコーディオンの作り方

カードUI

ドラッグでカードを並び替える方法｜番号の自動更新と滑らかな移動アニメーション
マウスドラッグで上下左右に自由に360度回転できるカードを作る方法
マウスの動きに合わせて傾くカードを作る方法
クリックで裏表が切り替わるカードを作る方法

スライダー

2枚の画像を比較できるスライダーを作る方法
キーボード操作でスライドする画像スライダーを作る方法
ドラッグ・スワイプ対応スライダーを作る方法

セレクトボックス

セレクトボックスからページ内の指定位置へ移動する方法
複数選択できるセレクトボックスの作り方｜2種類の選択方法

タブ切り替え

縦スクロールに連動して切り替わるタブを作る方法
クリック時に初回だけ内容を読み込むタブ切り替えを作る方法

チェックボックス

一括選択機能付きチェックボックスを作る方法

ツールチップ

「？」アイコンにマウスホバーして注釈を表示するツールチップの作り方
クリックで表示するツールチップを作る方法

テキストボックス

コピーボタン付きテキストボックスを作る方法
クリアボタン付きテキストボックスを作る方法

テーブル

CSVデータをAjaxで切り替えるページネーションを作る方法
省略記号（…）付きCSVページネーションを作る方法
最初・最後へ移動できるCSVページネーションを作る方法
前へ・次へボタンを付きCSVページネーションを作る方法

トグルスイッチ

モーダルウインドウを表示するトグルスイッチを作る方法
複数のトグルスイッチのON・OFF状態を取得する方法
一括でON・OFFできるトグルスイッチを作る方法
確認メッセージを表示するトグルスイッチを作る方法
ボタンを有効・無効に切り替えるトグルスイッチを作る方法
ON・OFF状態を取得するトグルスイッチを作る方法

ドロップダウンメニュー

スワイプ・ドラッグで閉じられるドロップダウンメニューの作り方

ドロワーメニュー

スワイプ・ドラッグで閉じられるドロワーメニューの作り方

フッター

下スクロールで隠れて上スクロールで表示する固定フッターメニューの作り方
クリックしたメニューを選択状態に切り替える固定フッターメニューの作り方

ページネーション

前へ・次へボタン付きページネーションを作る方法
CSVデータをAjaxで切り替えるページネーションを作る方法
省略記号（…）付きCSVページネーションを作る方法
最初・最後へ移動できるCSVページネーションを作る方法
前へ・次へボタンを付きCSVページネーションを作る方法
省略記号（…）付きページネーションを作る方法
最初・最後へ移動できるページネーションを作る方法

ボタン

ボタンを有効・無効に切り替えるトグルスイッチを作る方法
コピーボタン付きテキストボックスを作る方法
クリアボタン付きテキストボックスを作る方法

モーダルウインドウ

モーダルウインドウを表示するトグルスイッチを作る方法
モーダルウインドウ内のみキー操作可能にする方法
モーダルウインドウ表示中の背景スクロールを禁止する方法