MS Office 2007から採用されたリボンメニュー。今は(といっても2年前からあるが)まだ違和感があるかも知れないが、徐々にリボンメニューを採用したソフトウェアも増えており、慣れると使いやすさは向上していることに気づくはずだ。

ピクチャ 20.png

jQueryで実現するリボンメニュー!

 

そんなリボンメニューをブラウザで使える、そんなライブラリがjQuery Ribbonだ。

今回紹介するオープンソース・ソフトウェアはjQuery Ribbon、jQueryでリボンメニューインタフェースを提供するソフトウェアだ。

jQuery RibbonはjQueryを使ってあのリボンメニュー風インタフェースを実現する。凄いのは全てのインタフェースがリスト(ulタグ)だけで実現されていることだろう。そのためJavaScriptがオフであっても機能はするはずだ。

ピクチャ 23.png

メニュー

 

リボンインタフェースはもちろん、左上にはツリーメニューを表示することもできる。大きなアイコンと文字による説明があるので、分かりやすい操作性を提供できるのではないだろうか。

各アクションはリンクで呼び出すようになっているので、Ajaxを使えばWebアプリケーションとしての利用も簡単にできるはずだ。altキーを押すと数字が出るのだが(アクセスキー機能)、Mac OSXではこの後のアクションが分からなかった(SafariまたはFirefox3)。

リボンメニュー内に小さなアイコンを配置したり、チェックボックスを付けることもできる。さらに小さなメニューを付けることもできる。これはかなり汎用性が高く、便利に使えるのではないだろうか。テーマ機能で見た目を変更する機能もある。

Webブラウザではまだまだリボンメニューは一般的ではない。そのため、ブラウザのウィンドウに通常のメニューが並ぶのに加えると違和感が少ないかも知れない。WebアプリケーションにとってはjQuery Ribbonはかなり使えるライブラリになりそうだ。

2016年05月17日:本文修正

ピクチャ 21.png

テーマを変更した例

 

via これは注目!jQueryでExtばりにリッチなUIが実装できる「jQuery Ribbon」 [phpspot開発日誌]

jQuery Ribbon - Home

 http://jqueryribbon.codeplex.com/