アークウェブ
アクセシビリティ
Wiki
Web制作会社アークウェブのスタッフが、アクセシビリティに関するTips・ノウハウをまとめているWikiです
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
** はじめに [#dfbd9cb5]
こんにちは、[[竹村]]です。
最近、jCarouselLite の利用頻度の高くなってきています。
jCarouselLite は、表示エリアが限られている場所で多くの画...
下記のようなものです。
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/...
#ref(sample_nomal.jpg,nolink,左右のボタンをクリックすると...
jCarouselLiteの公式サイト:http://gmarwaha.com/jquery/jca...
jCarouselLite は画像バナーを指定した秒数待ってから自動的...
これによって、ボタンを押さなくてもループ再生されるのでア...
''自動的にループ再生できるくせに、停止や再スタートの機能...
これでは、JIS X 8341-3:2009 7.2.2.2 (WCAG 2.0 2.2.2, 2.2....
現在は、githubからダウンロードできるようにしています。
http://github.com/tiadeen2/jCarouselLite_auto_controller
#blikimore
** 目次 [#b79c4176]
#contents
** なぜ jCarousel を使わない? [#g38c9b22]
autoの停止/再スタートは実は jCarousel (http://sorgalla.co...
…が、なぜ jCarousel を使わないで、jCarouselLite にこだわ...
jCarouselLiteは jCarouselより導入が簡単です。よって、既に...
機能の差分をプラスした方がやり易いと判断しました。
** インストール方法 [#t21c4241]
- jCarouselLiteと同じです。Option が増えただけという認識...
** 追加したOption [#n463583f]
4つ追加してあります。
- btnStart, btnStop :
停止/再生ボタンのElement名を指定する。autoオプションがnul...
- afterStop, afterStart :
停止/再生ボタンが実行された時に呼び出されるコールバック関...
btnStart, btnStop は、btnPrev, btnNext と同じように「Elem...
afterStop, afterStart は、afterEnd と同じように「停止時、...
** サンプル [#qac7fc5b]
このコールバック関数で、再生ボタンを停止ボタンに差し替え...
下記のような感じです。
<script type="text/javascript">
$(".jcarousellite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto: 1000,
btnStart: ".start",
btnStop: ".stop",
afterStart: function() {
$(".start").css("display", "none");
$(".stop").css("display", "block");
},
afterStop: function() {
$(".start").css("display", "block");
$(".stop").css("display", "none");
}
});
</script>
:
<style type="text/css">
.start {display:none}
</style>
:
<div class="jcarousellite">
<div class="controller">
<button class="prev">前へ</button>
<button class="stop">停止</button>
<button class="start">再生</button>
<button class="next">次へ</button>
</div>
<div class="carousel">
<ul>
<li><img src="example1.jpg" alt="example1" /></li>
<li><img src="example2.jpg" alt="example2" /></li>
<li><img src="example3.jpg" alt="example3" /></li>
</ul>
</div>
</div>
- 最初は再生ボタンが表示されないようにCSS上で .start を非...
- afterStart, afterStop のコールバック関数で表示/非表示を...
上記コードの実際のサンプルは↓こちらにあります。
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/...
#ref(sample_acc.jpg,nolink,停止ボタンをクリックすると自動...
** ダウンロード [#ya1fa04c]
上記に書きましたが、githubからダウンロードできるようにし...
http://github.com/tiadeen2/jCarouselLite_auto_controller
** さいごに [#m901912c]
今回の実装にはWAI-ARIAへの対応などは含まれていません。
実装のアラを探せば色々あると思いますが、ちょっとずつ対応...
それを公開していければと思っています。
#blikifooter(竹村)
Tag: [[JavaScript>tag/JavaScript]], [[jQuery>tag/jQuery]]
終了行:
** はじめに [#dfbd9cb5]
こんにちは、[[竹村]]です。
最近、jCarouselLite の利用頻度の高くなってきています。
jCarouselLite は、表示エリアが限られている場所で多くの画...
下記のようなものです。
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/...
#ref(sample_nomal.jpg,nolink,左右のボタンをクリックすると...
jCarouselLiteの公式サイト:http://gmarwaha.com/jquery/jca...
jCarouselLite は画像バナーを指定した秒数待ってから自動的...
これによって、ボタンを押さなくてもループ再生されるのでア...
''自動的にループ再生できるくせに、停止や再スタートの機能...
これでは、JIS X 8341-3:2009 7.2.2.2 (WCAG 2.0 2.2.2, 2.2....
現在は、githubからダウンロードできるようにしています。
http://github.com/tiadeen2/jCarouselLite_auto_controller
#blikimore
** 目次 [#b79c4176]
#contents
** なぜ jCarousel を使わない? [#g38c9b22]
autoの停止/再スタートは実は jCarousel (http://sorgalla.co...
…が、なぜ jCarousel を使わないで、jCarouselLite にこだわ...
jCarouselLiteは jCarouselより導入が簡単です。よって、既に...
機能の差分をプラスした方がやり易いと判断しました。
** インストール方法 [#t21c4241]
- jCarouselLiteと同じです。Option が増えただけという認識...
** 追加したOption [#n463583f]
4つ追加してあります。
- btnStart, btnStop :
停止/再生ボタンのElement名を指定する。autoオプションがnul...
- afterStop, afterStart :
停止/再生ボタンが実行された時に呼び出されるコールバック関...
btnStart, btnStop は、btnPrev, btnNext と同じように「Elem...
afterStop, afterStart は、afterEnd と同じように「停止時、...
** サンプル [#qac7fc5b]
このコールバック関数で、再生ボタンを停止ボタンに差し替え...
下記のような感じです。
<script type="text/javascript">
$(".jcarousellite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto: 1000,
btnStart: ".start",
btnStop: ".stop",
afterStart: function() {
$(".start").css("display", "none");
$(".stop").css("display", "block");
},
afterStop: function() {
$(".start").css("display", "block");
$(".stop").css("display", "none");
}
});
</script>
:
<style type="text/css">
.start {display:none}
</style>
:
<div class="jcarousellite">
<div class="controller">
<button class="prev">前へ</button>
<button class="stop">停止</button>
<button class="start">再生</button>
<button class="next">次へ</button>
</div>
<div class="carousel">
<ul>
<li><img src="example1.jpg" alt="example1" /></li>
<li><img src="example2.jpg" alt="example2" /></li>
<li><img src="example3.jpg" alt="example3" /></li>
</ul>
</div>
</div>
- 最初は再生ボタンが表示されないようにCSS上で .start を非...
- afterStart, afterStop のコールバック関数で表示/非表示を...
上記コードの実際のサンプルは↓こちらにあります。
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/...
#ref(sample_acc.jpg,nolink,停止ボタンをクリックすると自動...
** ダウンロード [#ya1fa04c]
上記に書きましたが、githubからダウンロードできるようにし...
http://github.com/tiadeen2/jCarouselLite_auto_controller
** さいごに [#m901912c]
今回の実装にはWAI-ARIAへの対応などは含まれていません。
実装のアラを探せば色々あると思いますが、ちょっとずつ対応...
それを公開していければと思っています。
#blikifooter(竹村)
Tag: [[JavaScript>tag/JavaScript]], [[jQuery>tag/jQuery]]
ページ名:
アークウェブのサービスやソリューションはこちら
サービス
Webの企画・戦略立案
Webデザイン
Webシステム開発
Zen Cartソリューション
Zen Cart導入コンサルティング, RFP作成, トラブル診断
Zen Cartで大規模ECサイト構築
Zen Cartモジュールの開発・カスタマイズ
Zen Cart制作会社(デザイン・企画会社)様向けサービス
Zen Cart海外向け・多言語ECサイトの制作
Zen Cartのデザイン, ペルソナ/シナリオ法, RIA(Ajax・Flex)
Zen Cartのセキュリティ・運用保守サポート
Zen Cart企画・マーケティング戦略, SEO・SEM(サーチエンジン広告)
Zen Cartハイエンド版(大規模サイト用高可用バージョン)
EC-CUBEとZen Cart 機能比較表(概要)
Zen Cart携帯モジュール(モバイルショップ構築用)
Zen Cartの導入事例
Zen-Cart.JPのご紹介とアークウェブの取り組み
Zen-Cartモバイルショップ構築サービス
Movable Typeソリューション
企業サイトでのMovable Type活用
Movable Type用プラグイン一覧
MT用フォーム作成プラグイン「A-Form」
A-Formパートナー制度
その他ソリューション
AjaxでRIA開発
Ruby on Rails
Flexによる業務システム構築
ペルソナ/シナリオ法
ビジネスブログ
SNS・ソーシャルソフトウェア
SEO・SEM
アークウェブのCSR(企業の社会的責任)
アークウェブのCSR指針