Webシステム開発はお任せください

↑Topへ

開発ブログ

bxSliderパラメータのまとめ(2015/05/05)

bxSliderという比較的メジャーなJqueryプラグインがありますが、そのパラメータをまとめてみました。

ご本家のURL:http://bxslider.com/
パラメータ 説明 デフォルト値
mode ‘horizontal’は水平移動、’vertical’は垂直移動, ‘fade’はフェード horizontal 'horizontal', 'vertical', 'fade'
speed スライドの遷移時間(単位はミリ秒) 500  
slideMargin サムネイル間の余白(単位はpx) 0  
startSlide 最初に表示するスライド番号(先頭は0) 0  
randomStart スライド表示をランダムに表示する false  
slideSelector スライドのセレクタを指定 '' 'div.slide'
infiniteLoop ループさせるか否か true  
hideControlOnEnd スライドが最後の時に、次へのリンクを消すか否か false  
easing イージングの設定※easingのプラグインが必要 null 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'swing'
captions trueにすると、imgタグのtitleに設定したのが出ます。 false  
ticker 文字をスライドさせるか否か false  
tickerHover マウスをスライダーの上に置いたときにティッカーが一時停止します。注:この機能は、CSSのトランジションを使用している場合は動作しません! false  
adaptiveHeight スライドの高さが違う場合、それぞれ調節して合わせるかどうか false  
adaptiveHeightSpeed スライド高さ(ミリ秒)遷移時間。注:adaptiveHeight使用時のみ使用 500  
video すべてのスライドにビデオが含まれている場合は、これをtrueに設定してください。プラグインjquery.fitvids.jsが必要
詳細はhttp://fitvidsjs.com/を参照してください
false  
responsive 画面のサイズに合わせて自動調整する。注:固定幅のスライダーを使用する必要がある。 true  
useCSS 水平および垂直スライドアニメーションのために使用されます。 falseの場合、jQueryのanimate() が使用されます。 true  
preloadImages 「all」場合は、スライダーを開始する前に、すべての画像をプリロード。もし、スライダを開始する前に、最初に表示されるスライド内のイメージだけプリロードする場合「visible」を指定。(ヒント:すべてのスライドが同一の寸法であれば「visible」'を使用) ''visible' 'all', 'visible'
touchEnabled スワイプできるようにするか否か(スマートフォン) true  
swipeThreshold ピクセルの量。タッチスワイプ使用時は、スライドトランジションを実行するために超える必要がある。注:touchEnabled場合にのみ使用 50  
oneToOneTouch trueの場合、スワイプした時のイメージのスイッチの仕方を、指にひっつくように自在に動かす true  
preventDefaultSwipeX trueの場合、スワイプなどをx軸に沿って移動させない true  
preventDefaultSwipeY trueの場合、スワイプなどをy軸に沿って移動させない false  
<ページャ>      
パラメータ 説明 デフォルト値
pager ページャーの有無 true  
pagerType 「full」の場合は、ページャのリンクはスライドごとに生成されます。 「short」の場合、x/yのページャが使用されます(例:1/5)の場合 'full' 'full','short'
pagerShortSeparator pagerTypeを指定した場合:「short」の場合は、ペジャーは、区切り文字としてこの値を使用します ' / '  
pagerSelector 要素をページャに追加するために使用される。デフォルトでは、'bx-viewport'に追加されます ''  
pagerCustom 親要素は、ページャとして使用される。親要素は、各スライドに要素が含まれている必要があります null  
buildPager サムネイルページャーの指定 null  
<制御>      
パラメータ 説明 デフォルト値
controls 次へ、前へ等のコントロールの有無 true  
nextText 次へのテキスト 'Next'  
prevText 前へのテキスト 'Prev'  
nextSelector "次へ”矢印をカスタマイズするための記述 null  
prevSelectort "前へ”矢印をカスタマイズするための記述 null  
autoControls trueの場合、「スタート」/「停止」のコントロールが追加されます false  
startText 自動ボタンのテキスト 'Start'  
stopText ストップボタンのテキスト 'Stop'  
autoControlsCombine スライドショーのみを再生しているときは「停止」コントロールが表示されます false  
autoControlsSelector 自動制御する為の要素を指定 null jQuery selector
<自動制御>      
パラメータ 説明 デフォルト値
auto 自動スタート再生さるか否か false  
pause スライドの切り替えの間隔 4000  
autoStart 起動時に自動的にスライドショーを開始、falseの場合「スタート」コントロールがクリックされたときに、スライドショーが開始されます true  
autoDirection スライドショーの表示開始方向 'next' 'next','prev'
autoHover マウスをスライダーの上に置いたときにオートショーが一時停止します false  
autoDelay スライドショー開始前に指定時間(ミリ秒)遅延させる 0  
<カルーセル>      
パラメータ 説明 デフォルト値
minSlides 1スライドに表示するサムネイルの数 1  
maxSlides 1スライドに表示するサムネイルの最大数 1  
moveSlides 指定された値だけスライドします。 0  
slideWidth サムネイルの横幅(単位はpx) 0  

<メソッド>

getCurrentSlide (現在選択されているスライド番号を取得)
getSlideCount (スライドの総数を取得)

jqueryでチェックボックスをラジオボタンのように振る舞う方法(2015/04/07)

jqueryでチェックボックスをラジオボタンのように振る舞う方法

つい先日、jqueryの複数のバージョン使用していたwebアプリを整理していたところ、実装済の「チェックボックスをラジオボタンのように振る舞う処理」が誤動作するようになったため修正しました。その内容を掲載しておきます。
 
         $("input[id^='ALART_CHKBOX_']").on("click",function () {
             var flag = $(this).prop('checked');
             var reChecked = $(this).attr('checked'); //チェックされているチェックボックスを再度クリックした結果'undefined'が格納
             $("input[id^='ALART_CHKBOX_']").attr('checked', false);
             if (flag || typeof reChecked === "undefined") {
                 $(this).prop('checked', true);
             }
);
※checkboxやradioのチェック状態を調べる際にはattrではなpropを使うのが良いとの記事を見かけ、調べたところ それぞれの実行結果の違いがあることがわかりました。 普通にチェックされている以外の項目を選択した場合はいいのですが、既にチェックされている項目を再度チェックするとflag=falseになり、reChecked=undefinedになります。 flgだけで判断するとチェックが外れてしまうことになりますので注意してください。
  チェックした時 チェックを外したとき
prop true false
attr checked undefined

<サンプル>

アラーム