Options Ditail
jQuery AutoSmoothControllerはブログという、筆者によってコンテンツの書き方も十人十色なプラットフォーム上での使用を想定し、様々な条件下での使用にも対応できるよう数多くのオプションを用意しています。
こちらのデモページでは各オプションの詳細を説明を交えながら、実際に体験しながら確認していただけるようにいたしました。
このデモページはオプションに関する詳細をまとめたページです。プラグインの導入方法や使用方法に関してはDocumentationを参照下さい。
コントロールパネルの使用方法
このページ画面右上にコントロールパネルがあります。
まずはコントロールパネルを展開させてみましょう。
- 各タイトルをクリックすると、その項目のパラメーターが展開されます。
- コントロールパネルの開いているパネルのタイトル部分をクリックすると閉じます。
- パラメータを変更すると各オプションがどのように働くかをリアルタイムに確認しながらご覧いただくことができます。
- パラメーターはバー、リストボックス、チェックボックス、数値入力、テキスト入力の5タイプあります。(※後述)
- パネル最下部の「Close Controls」をクリックすると、コントロールパネルを最小化できます。
バータイプ
左右にドラッグすることで数値を変更できます。
リストボックス/チェックボックス
通常のものと同様の操作方法です。(クリックで選択・切替できます)
数値入力/テキスト入力
初期値が数字のものは数値、アルファベットなどのテキストが入っているものはテキストでの入力になります。(※Documentation 該当オプションのvalue参照)
オプション一覧と各記述法
jQuery AutoSmoothControllerのオプション一覧とデフォルトの設定は下記の通りです。
$(window).load(function(){ $('#element').autosmoothcontroller({ //Gernral Setting target: '.section', speed: 1200, distance: 0, stick:[false,'outer'], setX: 'right', setY: 'top', manualX: 0, manualY: null, addLast: true, easing: 'swing', //Tips Options autoStrings:true, maxStrings:15, autoReverse:true, dataname:'name', message: 'section', //Draggable Oprions draggable:true, axis:false, //Cookie Expires period:14, //Theme Change customClass:'default' }); });
このオプションを全て記述する必要はありません。変更したい項目のみを変更したい値と共に記述して下さい。
$(window).load(function(){ $('#element').autosmoothcontroller({ option1: value, option2: value, option3: value ・ ・ ・ }); });
Gernral Setting
target
'.section' , 'selector'(※任意のセレクタ)
ここで指定したセレクタがアンカー(スクロールのターゲット)になります。
使用できるセレクタはid,class,タグ名ですが、classの使用を推奨します。
現在このページ内の要所要所にデフォルトのtaget「.section」を要素に付与してあります。
もし、表示したページ内(例えば記事内)にこのターゲットが存在しない場合、AutoSmoothControllerのコントローラーは「ページ先頭へ戻る」のボタンとして機能するようになります。また、Footerなどページ最下部のコンテンツにターゲットのクラスを付与しておくとターゲットが存在しないページでもページの先頭と末尾へのスムーズスクローラーとして利用することができます。
※Example 筆者ブログ:アーカイブページ
Speed
1200 , Number
アンカーまでのスクロールスピードをミリ秒単位で設定できます。
distance
0 , Number
スクロールストップ位置を微調整できます。(px単位)
固定ヘッダーなどを利用している際はこちらのオプションでアンカー位置が隠れないよう調整することができます。
distanceに指定した値分、アンカーの手前でスクロールを停止します。(※負の数を入れると通り過ぎます)
stick
[false,'outer'] , [false/'selector' , 'outer'/'inner']
特定の要素にコントローラーを吸着させます。
実際に使用する際は stick : [stickElement,stickPosition] といった配列での指定になります。
配列内のstickElement(第一引数)に指定した要素にコントローラーを吸着させ、stickPosition(第二引数)でstickElementのouter/inner(内側か外側)に吸着させるかを指定します。
※両方を指定しないとエラーになります。
「manualY」やDraggble Optionの「axis」と併用することで多彩な表現が可能です。
やや複雑なオプションではありますが、ケースによって使い勝手は良いものです。このデモを用いてどのような設定にすると狙い通りの挙動をするかいろいろ試して下さい。
Example
一つ例を紹介しておきましょう。
コントロールパネルの「General Setting」の下記項目を
/*General Setting*/ 3 stickElement - nav 4 stickPosition - inner 8 manualY - 200px /*Draggable Options*/ 2 axis - y
に設定してみて下さい。
コントローラーが「コンテンツの外側、ナビの真下」に吸着したのではないでしょうか?
見た目として全体のデザインがブロックレイアウト感が強まったように変化しましたね。ドッラグでの移動も上下のみにすることで体感的にも各ブロックの関係性を強く感じるようになります。
実際に表記する際は下記のように記述下さい。
$('#element').autosmoothcontroller({ *** any options *** stick:['nav','inner'], manualY:'200px', axis:'y' ** more options ** });
※stickElementにはid,class名のセレクタ以外に要素のタグ名でも指定できます。
※stickElemet(第一引数)がfalseの時は機能しません。
※stickオプション使用時は「manualX」は無効になります。
setX / setY
'right' / 'top' , 'right' or 'left' / 'top' or 'bottom'
コントローラーの初期位置をそれぞれ画面左右 / 画面上下に設定できます。
※「setY」の設定は「manualY」の設定時にのみ効果を持ちます。
manualX / manualY
0 / null , Number / Number
任意の位置へ初期位置を変更します。前項の「setX / setY」の設定が影響します。
- setXが'left'ならmanualXは左から、'right'なら右からの距離指定になります。
- setYが'top'ならmanualYは上から、'bottom'なら下からの距離指定になります。
※単位はpxを付けて指定して下さい。
addLast
true , Boolean
コントローラーの一番下のボタンのスタイルを専用のものに変更します。footerなどへスクロールポイントを指定する際はtrueにしておくと良いでしょう。
falseにすると他のボタンと同じ形状になります。
easing
'swing' , Strings
スムーズスクロール時のアニメーションのEasingを指定します。ここに割り振れる値はjQuery animateのeasingプロパティと同じです。
「jQuery Easing Plugin」を併用した際も同様の指定です。
Tips Options
jQuery AutoSmoothControllerはコントローラーの各ボタンにマウスオーバー(タッチ)するとTipsを表示します。 デフォルトではアンカー要素から表示テキストを自動取得する仕様になっていますが、任意で細かく変更も可能です。
autoStrings
true , Boolean
アンカー要素内のテキストを自動取得します。falseにすると自動取得を行いません。
ただし、後述のdatanameをアンカーに指定している場合、dataname内のテキストを優先させます。
また、下記のようにアンカー要素内にタグが入っていた場合でも
Title sub title
タグのみを除去した状態(上記例では「Title sub title」)でTipsに表示させます。
maxStrings
15 , Number
自動取得時の最大文字数を設定します。最大文字数を超えるテキストが取得されていた場合は、最大文字数でカットし、末尾に「…」が追加されます。
autoReverse
true , Boolean
コントローラーをドラッグ移動させた際、画面中央より右側ならTipsをコントローラー左側に 画面中央より左側ならコントローラー右側へ表示させるように自動で切り替える機能です。
※ドラッグ「移動後」に切り替わります。
dataname
'asc' , Strings
アンカーによってはTipsへ任意のテキストを表示させたい場合があります。
こちらのオプションを利用することで、アンカー毎に「自動取得/任意のテキスト表示」を切り替えることができます。(※autoStringsはdatanameのテキストを優先させるのでfalseにする必要はありません)
現在datanameをoffにしてあります。その為、前述のautoStringsにより、アンカーからテキストを自動取得しています。
コントロールパネルの「Tios Option」datanameの値をonへ変更するとdata属性が指定されている3、4、5、6番目のTipsの表示が変わるのがお分かりいただけるはずです。
message
'section' , Strings
- targetに指定したアンカー内にテキスト要素が無い場合
- autoStringsがfalse
- data-asc属性(datanameで指定した属性名)の指定が無い場合
のTips表示に対して適用されます。
自由な文字列を入力できます。
コントロールパネルの「Tips Option」からautStringsのチェックを外し(falseに)前項のdatanameを「off」に変更して、messageのボックスに好きな文字を入力してみましょう。Tipsに表示される文字列がここに入力した文字列に変わるのが分かるでしょう。
表示される際は「messageのテキスト+連番」での表示になります。
Draggable Options
draggable
true , Boolean
true/falseでコントローラーのドラッグ移動ON/OFFを切り替えます。
移動後の位置はCookieに保存され、ページ移動後や次回閲覧時も反映されます。
ドラッグ移動をOFFにした場合はjQueryUIとモバイル用draggableパッチは読み込まなくてもjQuery AutoSmoothControllerは機能します。
※当ページでは各オプションの確認ページにつき、移動位置をリセットするためにcookieをoffにしてあります。
axis
false , 'x' or 'y'
jQueryUIのdraggableオプションと同様です。draggableがtrueの際のみ有効です。
- 'false':縦横無尽に移動させられます。
- 'x':横方向にのみ移動させられるようになります。
- 'y':縦方向にのみ移動させられるようになります。
Cookie Expires
period
14 , Number
当プラグインではcookieを使用し、コントローラー移動後の位置をブラウザに記憶させています。
cookieは保存期間があり、その保存期間を過ぎると自動的に削除されます。
periodのオプションはこの保存期間を日数で指定するオプションです。デフォルトでは14日間(2週間)とやや長めの保存期間に設定しています。任意で日数を変更下さい。
※periodを0に設定するとそのセッション時のみcookieを保存します。(ブラウザを閉じるとcookie削除)
Custom Class
customClass
'default' , Strings
AutoSmoothControllerのビジュアルは基本としてcssによって設定されています。
「特定のページのみコントローラーのデザインを変えたい」といったケースなどにこちらのオプションをご利用下さい。
サンプルとしてdefault,smart,tabの3つのテーマを用意しました。これらのテーマはjquery.autosmoothcontroller.css内にも内包されています。そこに指定されているプロパティを参考にご自身のブログやサイトのイメージに合わせてカスタマイズしてみて下さい。
以下、各テーマの簡単な説明です。実際にナビゲーションから変更してご確認もできます。
default
プレーンなパネル状のテーマです。これをベースにスタイルを色々変えてみても良いでしょう。
smart
シンプルでシャープなテーマです。コントローラーをあまり目立たせたくない際や、他のデザインパーツと馴染ませたい時にどうぞ。
tab
タブ風のやや丸みをおびたテーマです。デザインに向きがある為「stick」と合わせて使用する際、吸着させる要素によっては正位置とreverse時のbackground-positionを逆に設定して下さい。
このようにあらかじめcss内に「テーマ」となるclassを用意しておき、変更したいケースに応じてcustomClassの値に作成したclassをご指定下さい。
※Example 筆者ブログは3つあるトピックスに応じてブログデザインを変えています。それぞれのトピックスによってcustomClassを使い、コントローラーのデザインを変更しています。