[JS]不可視のDOMをコントロールしてUIを拡張するスクリプト -Shadow UI
Post on:2013年9月17日
sponsors
ドロップダウン、モーダルウインドウ、ポップアップ、ツールチップなど、最初は可視状態にないDOMをコントロールしてUIを拡張するjQueryのプラグインを紹介します。
「Shadow DOM besed UI extensions」って表現するセンス、いいですね。
Shadow UIのデモ
デモはデスクトップ、スマフォの最新のモダンブラウザ、IEは8+でご覧ください。
modal
モーダルウインドウ
以下、デモをアニメーションgifにしてみました。
dropdown
ドロップダウン
input
input要素
picker
ピッカー、日付なども用意されています。
tooltip
ツールチップ
Shadow UIの使い方
Step 1: 外部ファイル
まずは、ベースとしてhead内にjquery.jsと当スクリプトを外部ファイルとして記述します。
<script src="/shadow-ui/assets/js/jquery.js"></script> <script src="/shadow-ui/js/shadow.js"></script>
スタイルシートはベースとなるファイルとそれぞれ用のファイルが用意されています。
<link rel="stylesheet" href="/shadow-ui/assets/css/main.css"> <link rel="stylesheet" href="/shadow-ui/css/ui.css"> <link rel="stylesheet" href="/shadow-ui/css/ui-drop.css"> <link rel="stylesheet" href="/shadow-ui/css/ui-modal.css"> <link rel="stylesheet" href="/shadow-ui/css/ui-blob.css">
Step 2: HTML
HTMLはシンプルで、jQueryのセレクタで呼び出せるよclassやidを加えておきます。
<div class="shadow shadow--dropdown">Dropdown</div>
Step 3: JavaScript
jQueryのセレクタで要素を指定し、表示するDOM要素を設定します。
下記は、ドロップダウンの記述例です。
<script>
shadow.extend({
name: 'dropdown',
template: '<div class="ui-face ui-face--padded">This is a dropdown – the most basic form of a shadow extension.</div>'
})
$('.shadow--dropdown').shadow('dropdown')
</script>
sponsors
