[B! <LI>][<OL>] jetta_swinginのブックマーク

選択した項目を明示させられるjQueryプラグイン「lister」｜skuare.net

twitter facebook hatena google pocket あるリストの中から選択させて申し込ませたい場合、少なければcheckboxなどでも耐えられるかもしれませんが、多くなってくると何がなんだかわかりにくくなります。そこでjQueryプラグインのlisterを利用し選択項目を明示してあげましょう。 sponsors 使用方法 listerからファイルをダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.lister.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#id名1

jetta_swingin 2010/06/11

左右の項目移動インターフェースのリストボックス。セレクトボックス。グループ表示できる。アンカーつけてジャンプできる。多量のリストに向いている。

リンク

覚えて良かったCSSテクニック « zaru blog

ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス幅：190px マージン：15px liボックスダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックスダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7

jetta_swingin 2010/04/28

リンク

ページ送りのサンプル4種+2

ず、随分間が空いてしまった・・・何て言う現実。気付けば冬間近ですね。久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。サンプルサイトを見るサンプルをダウンロード地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。今回作っておきたかったのは、センタリングさせたページ送りっす。とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg

jetta_swingin 2009/11/11

ページング、ページネーション、目次のHTML、CSS詳細付きの作例。

リンク

【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。

地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。 <ol id="topicPath"> <li class="home"><a href="hoge">ホーム</a></li> <li><a href="hoge">アニメ</a></li> <li><a href="hoge">ガンバの冒険</a></li> <li><em>ボーボ</em></li> </ol> サンプル1 とてもシンプルなパンくずリストとてもシンプルなパンくずリストのサンプルです。ホームアニメガンバの冒険ボーボ CSS はこちら ol#topicPath { margin: 20px 0;