Google画像検索の様なUIを実装する実験（レスポンシブ対応） | BlackFlag
Googleさんの画像検索で使われているサムネイルをクリックすると すぐ下にアコーディオン形式で詳細エリアが広がるUI。 このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが 画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので 実験がてらjQueryを使ってGoogle画像検索のUIを試しに作ってみたので紹介してみたいと思います。 レスポンシブ動作などブラウザ枠を目いっぱいで表示するタイプなので まずは別枠表示で動作サンプルから。。 jQueryでGoogle画像検索の様なUIを実装する実験（レスポンシブ対応） サンプルでは25枚の画像を一覧で並べて ウィンドウサイズに合わせて、 １行に並べられる画像数等がリキッドレイアウトされます。 サムネイルをクリックすると すぐ下に詳細エリアが展開されます。 詳細エリアにはNE
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
jQueryでリストなどの高さが違う複数の要素のheight値を揃える方法｜BLACKFLAG
＜li＞リストや連続したブロック要素を並べる際に、 中に入る要素の内容によって、個々の高さがまちまちになってしまった場合、 高さが揃わないことで、レイアウトを整えるのが意外と面倒になったりします。 そんな際に使える、jQueryを使っての、 連続した要素の高さを（最大値に）揃える方法を紹介してみます。 サンプルはfloatで横に並べた＜li＞リスト要素の高さを揃えるやり方。 まずはHTMLから。 ◆HTML <ul> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
