Client Side JavaScript API

Class jQuery.imui.imuiSiteTour

  • Inheritance
  • imuiSiteTour

Constructor

imuiSiteTour ( [Object options] ) Static
画面に埋め込まれたメッセージを表示し、簡易ヘルプを表示します。
順番にヘルプを表示するステップ表示と一括でヘルプを表示する一括表示が可能です。
ステップ表示の場合は、右下に表示されるステップメニューにてステップの移動とサイトツアーの終了が可能です。また、キーボード操作も可能です。
  • 右矢印アイコン、右矢印キー
    • 次のステップへ移動
  • 左矢印アイコン、左矢印キー
    • 前のステップへ移動
  • ×アイコン、エスケープキー
    • サイトツアーを閉じる

テーマの機能にあるサイトツアーはこちらの関数を実行しています。
サイトツアーについての詳細はサイトツアー仕様書を参照してください。
注意事項
  • この API は 8.0.10 から利用できます。
  • data属性が指定されている場合はオプションの値ではなく、data属性の値が有効になります。

本API は以下のdata属性と組み合わせ利用してください。
属性名省略時の値説明
data-intro必須項目ヘルプとして実際に表示される説明文です。
data-escapetruedata-intro に指定した文字列をエスケープするかどうかを指定します。
エスケープをしない場合は HTML を埋め込むことができます。
data-positionbottomヘルプを表示する対象の要素から、どこの位置に説明文を表示するか指定します。
省略すると対象の要素の下に説明文が表示されます。
data-aligncenterdata-position に top,bottom のどちらかを指定した場合のみ有効になります
説明文の横方向の表示位置を指定します。
left（左寄せ）,center（中央寄せ）,right（右寄せ） の指定が可能です。
data-verticalAligntopdata-position に left,right のどちらかを指定した場合のみ有効になります。
説明文の縦方向の揃え位置を指定します。
top（上揃え）,middle（中央揃え）,bottom（下揃え） の指定が可能です。
data-width200px説明文を表示する要素の横幅を指定します。
未指定の場合は200px になりますが、ヘルプを表示する対象の要素が200px 未満の場合は、対象の要素の長さの横幅になります。
data-lineTypemiddleヘルプを表示する対象の要素と説明文表を結んでいる支持線の長さの種類を指定します。
short,middle,long の指定が可能です。
position に指定した値が top,bottom の場合は
  • short（25px）,middle（75px）,long(150px)の長さになります。
position に指定した値が left,right の場合は
  • short（50px）,middle（100px）,long (200px)の長さになります。
data-menu-positionrightステップメニューの表示位置を指定します。
right,left の指定が可能です。
同じステップ内で別々の指定をした場合は、最初に指定した値が有効になります。
data-step全表示説明を表示する順番を数値で指定します。
同じ数値を指定した場合は、複数個の説明が同時に表示されるのでグループ化としても利用できます。
未指定の要素は最後に表示されます。
Parameters
options : Object
Optional
オプション
options.position : String
OptionalDefault: bottom
data-position 未指定の要素の表示位を指定します
"right","left","top","bottom"の指定が可能です
options.escape : boolean
OptionalDefault: true
data-intro属性に指定した文字列をエスケープするかどうかを指定します
options.step : number
OptionalDefault: 0
data-step に指定した最小の値を0とし、何番目のステップからサイトツアーを開始するかを指定します
options.hideMenu : boolean
OptionalDefault: false
ステップ表示の場合に指定します
ステップメニューを表示するかどうかを指定します 
<!-- imuiSiteTourを使い一括表示でヘルプを表示する例 -->
<button id="start_help">start</button>
<div class="imui-operation-parts">
  <button data-intro="ここの値が表示されます" data-position="left">削除ボタン</button>
  <button data-intro="ここの値が表示されます" data-position="right">更新ボタン</button>
</div>
<a data-intro="ここのヘルプは表示されません">sample_a</a>

<script type="text/javascript">
  $(function(){
    $('#start_help').on('click',function(){
      // class="imui-operation-parts" 内の data-intro 属性を持つ要素のみヘルプ対象になります。
      $('.imui-operation-parts').imuiSiteTour();
    })
  })
</script>
<!-- imuiSiteTourを使いステップ表示でヘルプを表示する例 -->
<button id="start_help">start</button>
<div class="imui-operation-parts">
  <button data-intro="ここの値が表示されます" data-step="3" data-width="150px">step3</button>
  <button data-intro="ここの値が表示されます" data-step="1" data-width="150px">step1</button>
  <button data-intro="ここの値が表示されます" data-step="2" data-width="150px">step2</button>
</div>

<script type="text/javascript">
  $(function(){
    $('#start_help').on('click',function(){
      // 先頭は0から始まるので、このサンプルでは data-step=2 を指定した要素からサイトツアーが開始されます。
      $('body').imuiSiteTour({step:1});
    })
  })
</script>