[JS]不可視のDOMをコントロールしてUIを拡張するスクリプト -Shadow UI

ドロップダウン、モーダルウインドウ、ポップアップ、ツールチップなど、最初は可視状態にないDOMをコントロールしてUIを拡張するjQueryのプラグインを紹介します。

「Shadow DOM besed UI extensions」って表現するセンス、いいですね。

サイトのキャプチャ

Shadow UI
Shadow UI -GitHub

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>

top of page

Trackback

コメントは、ありません。

top of page

©2014 coliss