jQueryプラグインを使わずに自前カルーセルパネルを導入してみる | 1：n – DETELU Blog
カルーセルパネル系のjQueryプラグインはかなり数が多いのですが、今回はjQuery本体のみ利用しプラグインを利用せず自作してみます。CSSとJavascriptを数行書き換えるだけで横型、縦型の２つが作れます。 プラグインを使わずにカルーセルパネル 横型 プラグインを使わずにカルーセルパネル 縦型 ではでは横型のカルーセルパネルを作っていきます。まずはHTML、CSSでカルーセルパネルの表示部分をつくります。内容を表示させるボックスを指定して、その中にリスト横並びに並べることにしましょう。両端にはリストを動かすボタン（「id=prev」「id=next」）を置き、これはCSSで配置を制御します。で、できたものは下記↓。 プラグインを使わずにカルーセルパネル HTML、CSSのみ ■HTML <div id="carouselwrap"> <div id="prev" class="hi
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
jQuery | 1：n – DETELU Blog
さてさて、jQuery2.0のリリースも近そうですし、ちょこっと1.9での変更を確認しながら準備をしておこうかな？ ということで、近いうちに使うであろう、jQueryの読み込み分岐をメモ。 <!--[if lt IE 9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <!--<![endif]--> レスポンシブWebデザインでサイトを作る場合に、メディアクエリとjQueryを使ってメニューの表示を切り替えるものをちょこっと作成。 画面サイズが大きい時は横並びのメニュー、小さい場合は折りたたみメニューにする、という簡単なものです。 レスポンシブWebデザインで折りたたみメニューに切り替える 動きとして
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
