HOME
サイトマップ
営業日カレンダー
お問い合わせ
HOME
サイトマップ
営業日カレンダー
お問い合わせ
csstest:jQueryプラグインlivesearch.jsを使ってインクリメンタル検索
IDを'main'に指定したdiv要素内のすべてのli要素から検索します。検索入力欄にテキストを入力すると同時にリアルタイム検索を開始して、ヒットした数を赤色文字で表示、ヒットした項目以外を隠します。全角、半角、大文字、小文字を区別します。「
webページ制作担当者用CSS、jQuery等のテストページ
」のトップに使用しています。
ページ内インクリメンタル検索
現在の検索対象項目数:
個
検索対象リスト
パーセントに対応するcss棒グラフ / 打ち消し線サンプル
overflow: hidden; を使った画像置換 / リストマークを背景画像で代替え
リストマークを背景画像(アニメーションgif)で代替え
CSSのみで、入力フォームのフォーカス(IE非対応)
CSSとcsshover3.htcで、入力フォームのフォーカス(IEにも対応)
CSSを使った角丸ボタン。コメントの囲みにも利用可能
opacityで画像の透明度を変化させて、下の画像を表示する
Ultimate CSS Gradient Generatorで作成したグラデーションを利用したボタン(画像不使用)
target属性の確認(JS不使用)
target属性の確認(JS不使用)2・指定フレームの内容を換える
IE8の罫線が意図したように表示されないバグの対処
[CSS]
div要素内にある横並びブロックに、div要素の幅に合わせてマージンをつける
min-heightの確認・指定ブロック要素の最小の高さを指定
空白文字(半角スペース、改行、タブ)の表示に関わるwhite-spaceのふるまい
PIE.htcなどを使わず、css3のみでデコレーション(グラデーション)をIEに適応させる
半透明のpng画像を利用した角丸カラーボタン(横サイズ可変)
入れ子の親要素と子要素のoverflow:hidden;を使って画像をトリミング表示
javascriptを使わず、HTML5とCSS3で作成した登録フォームサンプル
html5の基本形サンプル
IEのブラウザモードとドキュメントモードの確認
CSS3だけで作るドロップダウンナビゲーションメニュー
CSS3だけで作るブログポストなどに貼付けるカレンダーアイコン
画像を使わず、CSSだけで作る角丸ボタン(その2)
IE9のみに対応するIEハックのテスト
HTML5とCSS3で作るFlexible Boxのテスト
HTML5とCSS3で作るFlexible Boxのテスト(2)
CSS3で動かすアニメーションテスト
CSS3のborder-imageを使って、画像でボーダーを描く
CSS3のmedia queryを使ったデバイスの方向確認、振り分け
CSS3のmedia queryを使って、デバイスとブラウザ画面の横サイズ確認、振り分け
CSS3のmedia queryを使って、デバイスの解像度にあわせたレイアウト変更
CSS3に未対応のIE8以下に、filterを使って不透明度を実装するテスト
CSSだけで、補足情報を表示するツールチップを表示
CSSだけで、IE6、IE7、IE8、IE9を判別する条件付きのHTML classとハック
CSS floatで横並びさせたリストで構成するページネーションのセンタリング
CSS floatした画像とそのまわりのテキストの動き
CSS3で、フォトアルバムなどに使えそうなポラロイド風写真表示
CSS3で作るアニメーション・バナー
CSS3で作るヘアライン加工風ボタン
CSS3の映像効果と変換による回転するボタン
jQueryでローディングインジケーター(activity indicator)画像不使用
jQuery Spinで、数値入力にスピンボタン
jQueryで、縦スクロールニュースティッカー(ticker)・IEうまく動作せず
jQueryで、li要素を順に表示するニュースティッカー(ticker)2
jQueryで、li要素を順に表示するニュースティッカー(ticker)3・一文字ずつ表示
jQueryで、li要素を順に表示するニュースティッカー(ticker)4・fadeIn、fadeOut
jQueryのeachで個別処理(ループ)、すべてのp要素の前に「→」+文字数、バック色変更
jQueryを使ってレイティング・星で段階評価(例は5段階評価)
jQuery UIを使ったタブ切り替え
jQuery UIのDatepickerでカレンダーを表示して日付入力
jQueryで、要素にクラスを追加する
jQuery.data(elem)で、主に内部的な処理に用いられるIDを表示
jQuery.hover(over, out)で、オンマウス時にspan要素を追加
jQueryで、セレクタの要素ごとにプロパティを変更
jQueryの:not(selector)で指定以外の要素のプロパティ変更
jQueryの:contains(text)で、指定の文字を含む要素のプロパティを変更
jQuery・Annotation Overlay Effectで、説明画像に注釈文表示
jQuery・Jcropで、画像トリミングサイズチェック
excanvas.jsで、html5<canvas>をIE8以下にも対応させる
jquery.jqchart.jsで折れ線グラフ表示
jQuery・jqtransform.jsでフォームを整形
jQueryの animate 、toggleを使って、要素の表示、非表示
jquery.qrcode.min.jsを使って、記載した文字列をQRコードで表示
qrtip-1.0-jquery.jsを使って、リンク部分にオンマウスでその場にQRコードを表示
jQuery toggleClassを使って、要素のcssクラスの有り無しを切り替える
jQuery 階層関係を指定してエレメントを選択。子孫の要素
jQuery 配列の各値を関数で処理して、新たな配列を作成
code.google.comのuuppaプロジェクト・uuCanvas.jsのオーバーレイデモ
Better Check Boxes with jQueryを使ったチェックボックス
jQueryでゆっくりフェードするボタン画像
jquery.mobile.jsを利用して携帯用ページをhtml5対応のスマホ用に変更
jQuery innerHeightを使って、要素の内部の高さを取得、レイアウト確認用サンプルに
jQuery innerWidthを使って、要素の内部の幅を取得、レイアウト確認用サンプルに
jQueryを使って、clickイベントにファンクションをbindする
jQueryを使って、classを切り替えた要素のクローンを作成する
jQuery contents()を使って、要素内の子要素の内容を取得して、操作
jQuery change(fn)を使って、Eventオブジェクトを取得
jQuery css(name)を使って、style属性から指定スタイルの値を取得、表示
JSでサブウィンドウを画面中央に表示、+window.closeの比較
jQuery csv2tableとjqchartで、外部のCSVデータを読み込み、グラフ作成
jQuery csv2tableで、外部のCSVデータを読み込み、表を作成
jQuery slideToggleとtoggleで、要素の表示、非表示切り替えの比較
jQuery loadで、各種外部ファイル読み込み
jQuery inArrayで、カンマ区切り配列データからインデックスを取り出す
jQuery の is(expr)とif文で、要素集合のプロパティを判別
jQuery show(speed)で、ファイルの表示時間を変更
jQuery UIを使って、アコーデオン表示
jQuery UI を使ってフォーム入力の注意ダイアログ表示
jQuery simplemodal.jsを利用した確認ダイアログ表示
jQuery switchClassで、cssを変更
※参照元:
Amazon.co.jp ウィジェット
banner画像(sサイズ) include-set07
株式会社コニファのSaaS、ASP