Web制作の現場で使えるjQuery　UIデザイン入門 ― 最終回

実務で使えるjQueryプラグイン3選

2009年12月25日 11時00分更新

文● 西畑一馬／to-R

多彩なUIがパッケージされた「Interface elements」

　「Interface elements」は、多彩なUI部品をパッケージ化したjQueryプラグインです。アコーディオンやタブパネル、ツールチップ、フローティングウィンドウ、モーダルウィンドウなど、本連載で紹介した主要なUIに加え、ドラッグ＆ドロップ処理、オートコンプリート、独自のアニメーションなどが同梱されています。ここではInterface elementsの豊富な機能の中から「フィッシュアイUIメニュー」をピックアップして紹介します。


Interface elementsの配布ページ

　フィッシュアイUIは、Mac OS Xの「Dock」でおなじみのUIです。横一列に並んでいるアイコンにマウスカーソルを重ねると、アイコンが拡大表示されます。


アイコンにマウスを乗せるとアイコンが拡大されて表示される

■利用方法

　jQuery本体と配布ページからダウンロードした「interface.js」を、利用したいWebページのhead要素内などで読み込みます。


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="interface.js"></script>

　XHTML/CSSは、ともに配布サイトで公開されているサンプルをベースに、必要に応じて変更していくだけです。

　XHTML部分は、id属性とclass属性に「fisheye」を設定したdiv要素の内側に、class属性「fisheyeContainter」を設定したdiv要素を配置します。dockで表示するメニューは、このfisheyeContainterの内側に記述していきます。

　アイコン部分はclass属性「fisheyeItem」を設定したa要素に記述し、拡大時に表示するテキストはその横にspan要素で記述します。

▼サンプル03（HTML部分）


<div id="fisheye" class="fisheye">
    <div class="fisheyeContainter">
        <a href="#" class="fisheyeItem"><img src="images/icon1.jpg" width="80" /><span>Home</span></a>
        <a href="#" class="fisheyeItem"><img src="images/icon2.jpg" width="80" /><span>Feed</span></a>
        <a href="#" class="fisheyeItem"><img src="images/icon3.jpg" width="80" /><span>Email</span></a>
        <a href="#" class="fisheyeItem"><img src="images/icon4.jpg" width="80" /><span>Graph</span></a>
        <a href="#" class="fisheyeItem"><img src="images/icon5.jpg" width="80" /><span>Display</span></a>
        <a href="#" class="fisheyeItem"><img src="images/icon6.jpg" width="80" /><span>Print</span></a>
        <a href="#" class="fisheyeItem"><img src="images/icon7.jpg" width="80" /><span>Sound</span></a>
        <a href="#" class="fisheyeItem"><img src="images/icon8.jpg" width="80" /><span>Comment</span></a>
    </div>
</div>

　CSSは次のようになります。

▼サンプル03（CSS部分）


#fisheye{
    margin-top:200px;
}
.fisheye{
    text-align: center;
    height: 200px;
    position: relative;
}
a.fisheyeItem{
    text-align: center;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    width: 40px;
    position: absolute;
    display: block;
    top: 0;
}
.fisheyeItem img{
    border: none;
    margin: 0 auto 5px auto;
    width: 100%;
}
.fisheyeItem span{
    display: none;
    positon: absolute;
}
.fisheyeContainter{
    height: 200px;
    width: 700px;
    position: absolute;
}

　スクリプト部分は、フィッシュアイで表示したい要素をセレクターで指定し、Fisheye(...)内のオプションに以下のように詳細を設定します。

maxWidth　拡大時のアイコンの横幅
items　アイコンを設定している要素（ここではa要素）
itemsText　拡大時に表示するテキストの要素（ここではspan要素）
container　アイコンを包んでいる要素（ここでは.fisheyeContainter）
itemWidth　初期表示時のアイコンの横幅
proximity　マウスの反応領域
halign　フィッシュアイの表示位置（left／right／center）

▼サンプル03（スクリプト部分）


$(function(){
    $('#fisheye').Fisheye({
        maxWidth: 80,
        items: 'a',
        itemsText: 'span',
        container: '.fisheyeContainter',
        itemWidth: 80,
        proximity: 90,
        halign : 'center'
    })
})

　これでフィッシュアイUIの完成です。Interface elementsのそのほかの機能も、同様に簡単な設定で利用できます。配布元のサイトを参考に試してみましょう。

【実務でハマる落とし穴】

jQueryプラグインが動かない！

　XHTMLやスクリプトに間違いはないはずなのに、プラグインがうまく動かない――。jQueryプラグインが動作しない場合の原因と対処方法を考えてみましょう。

■jQueryのバージョンによる動作不具合

　多くのプラグインは最新のjQueryで動作しますが、数年前に公開されたプラグインの中には古いバージョンのjQueryでしか動作しないものもあります。

　その場合は、古いバージョンのjQueryをGoogle Codeからダウンロードして使用するか、Google AJAX Libraries API（関連記事）でバージョンを指定して読み込みます。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.○.○/jquery.min.js"></script>

■プラグインによる動作不具合

　プラグイン自体に不具合があり、予想通りに動作しない場合もあります。自分でプラグインを修正できればいいのですが、高度なテクニックで作成されている場合は困難でしょう。

　場合によっては、同様の機能を持つ他のプラグインを探したほうが速やかに問題を解決できることもあります。もちろん、作者にバグを直接報告できるようなら、修正を打診してみてもよいでしょう。

著者：西畑一馬（にしはたかずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。

前へ 1 2 3 次へ

ツイートする

カテゴリートップへ