Blog

簡単に使い方ツアーを実装できる jQueryプラグイン aSimpleTour

アプリケーションの使用方法をわかりやすく説明する

ツアー形式のインターフェイスを簡単に実装できるaSimpleTourを使ってみた。

 

デモ

※ページ右上の「ツアー」ボタンをクリックして下さい。

 

使い方は以下のとおり

 

JS

 

まず、

$(‘.lchelp’).click(function(){}

のように、イベントを定義するし、

以下のようにツアーのデータを定義する。

今回だと

var options{ data: [{データ1},{データ2}], controlsPosition : メニューの位置 }

というような形。

 

データの定義は

{ element : ‘#ec_admin_product_form_name’, ‘tooltip’ : ‘商品名を入力してください’, ‘position’ : ‘T’ }

のような形に統一した。

element:jsのセレクタでフォーカスする要素を選択

tooltip:出力する文字列

position:

T – Top

L – Left

B – Bottom

R – Right

という感じ。

 

controlsPositionは

1文字目:

T – Top

B – Bottom

2文字目:

L – Left

R – Right

の組み合わせ。

 

CSS

デフォルトのものだとレイアウトの定義も入っているので少し調整した。

ティップのz-indexが低いので

#tourtip {z-index: 999;}

は必ず入れたほうがよいと思う。

 

先週紹介したChardin.jsに引き続き、今後タイミングがあれば使って行きたい。

Author Profile

hoshino

ECのことを中心に書きたいと思います。
ネタが無いときはプログラムやデザインのことも書きます。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ