Jqueryに関するブログ記事（Blog）

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
maxSlides	１スライドに表示するサムネイルの最大数	1
moveSlides	指定された値だけスライドします。	0
slideWidth	サムネイルの横幅（単位はpx）	0

＜メソッド＞

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

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