古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
JQueryを使ったスライド表現を集めた「10 Best jQuery Sliders」
一枚のページにたくさんの情報をまとめたい時に便利なのがスライド表現。今日紹介する「10 Best jQuery Sliders」はコンパクトで高機能なAjaxライブラリjQueryを使って実装するスライド機能を紹介するエントリーです。 loopedSlider いくつかのスライド表現のサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Easy Slider 様々なタイプのスライドを制御できるスライド表現。用途に応じて使い分けができそうです。 ■ Introducing Coda-Slider スタンダードなタイプのスライダー。応用が利きそうなつくりになっています。サンプルをダウンロード可能。 ■CrossSlide – A jQuery plugin to create pan and cross-fade ani
JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌
GX - Full-Featured Javascript Animations Framework JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。 jQueryと組み合わせて使うアニメーションライブラリです。 jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。 勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。 以下でその凄さが分かるはず $('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開:phpspot開発日誌
現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開 2009年03月09日- 現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開しました。 「 トップページ | リンク | 掲示板 」といったナビゲーションメニューがあると思いますが、アクティブな場合に、太字にして<a>を消すっていう処理をphpなどで書いている場合があると思いますが、非常にコードが見づらくなって、メニューが増えるたびに面倒な分岐処理を追記しなければなりませんでした。 （面倒な分岐の例） <?php if ($current_url == "link.php") { ?> <strong>リンク集</strong> <?php } else { ?> <a href="link.php">リンク集</a> <?php }
2008年に注目を集めた使えるJavaScriptライブラリ集:phpspot開発日誌
Best of 2008 - JavaScript | Design Shack 2008年に注目を集めた使えるJavaScriptライブラリ集が紹介されていました。 どれも非常に便利でサイト構築に役立ってくれるでしょう。 sIFR Lite Javascriptでテキスト文字列を綺麗な画像にしてくれるライブラリ。 画像部分にはFlashを採用している。検索クローラーフレンドリ。 <h3>How is this different than the original sIFR?</h3> ↓ DD_belatedPNG IE6でも透過PNGに簡単に対応させられるライブラリ The EqualHeights jQuery Plugin 異なる高さのブロックを統一してくれるライブラリ ↓ DD_roundies 角丸の簡単実現ライブラリ jQuery.popeye ポップアップではなく、サイト
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
Flickr風スライドショーをJavaScriptで再現 (1/5)
Webサイトで写真画像をいかに美しく、魅力的に見せるか――。そう考えたときに参考になるのが、多くのユーザーが利用しているオンライン・フォトアルバムです。中でも、世界中のブロガーが愛用する「Flickr（フリッカー）」は、思わずため息をつくような美しい写真が大量にアップロードされている代表的なサービスです。 Flickrが多くのユーザーに支持されている理由は、コミュニティ機能の充実や外部利用のしやすさなどいくつもありますが、1つにはユーザーインターフェイス（UI）の美しさ、使い勝手のよさがあげられます。今回は、このFlickrのUIの一部を参考に、自分のWebサイトをブラッシュアップしてみましょう。 今回のお手本サイト：『Flickr』 米ヤフーが運営するオンライン・フォトアルバムサービス。特に他のユーザーが自由にコメントをつけたり、タグをつけて分類したりできるコミュニティ機能や、使い勝手の
[JS]設置も簡単なテーブルのデータをソートする超軽量のスクリプト | コリス
leigeberから、既存のテーブルにも簡単に設置できる、データをソートする超軽量（1.7KB）のスクリプトを紹介します。 jQueryやPrototypeなど他のスクリプトは必要ありません。 JavaScript Table Sorter demo 動作確認ブラウザは、IE 6/7/8, Fx2/3, Op, Safari, Chromeとなっています。 設置方法は簡単で、既存のものにも簡単に組み込めます。 「script.js」と「style.css」を外部ファイルとして記述します。 tableに「class="sortable" id="sorter"」を記述します。 テーブルの下に下記のスクリプトを記述します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript">
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました
こんにちは。Windowsの最大の発明はゴミ箱の標準装備だと思っている亀本です。 追記：Mac信者の某氏にゴミ箱はWindowsの発明じゃないと突っ込まれてしまいました。すみません<(｡_｡)> 昨日はグリーさんのオープンソース勉強会に参加してきました。 今回の講師はDeNAの川崎さんで、わりとモバイル屋さんな自分としてはぜひともチェックしておきたいなと思って参加してきました。 勉強会・懇親会ともなかなか面白い話が聞けたり、変な人がいっぱいしたりしてとても面白かったです。 モバイルをやっているといつも面倒なのは、テンプレートの扱いです。 そのあたりのまとめは以前このブログでうちの高橋さんが超まとめてくれた記事があるので、そちらをご参照ください。 とくにDoCoMoのCSS(i-CSS)は開発者泣かせですね。インラインのみに対応とか、開発しにくくて涙ちょちょぎれそうです。 さてさてそんなDo
PHPでクールなグラフを描画できるクラスライブラリ「pChart」:phpspot開発日誌
pChart | a PHP Charting library pChart is a PHP class oriented framework designed to create aliased charts.PHPでクールなグラフを描画できるクラスライブラリ「pChart」。 次のようなグラフが描画できます。（円、棒グラフなど） 色々と、グラフ描画ライブラリは存在しますが、こうした描画スタイルもいいですね。 関連エントリ GoogleChartsAPIをPHPから簡単に使える「GoogChart」 jQueryベースの滑らかなグラフ描画ライブラリ「Flot」 CSSだけで円グラフを表示するサンプル
Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナル
GoogleからGoogle AJAX APIを拡張する新しいサービス「The AJAX Libraries API」が公開された。The AJAX Libraries APIはGoogleのサイトで人気のある有益なJavaScriptライブラリを提供しようというもの。これまでYUIであればYahoo!、DojoであればAOLなどが同類のサービスを提供していたが、特定のJavaScriptライブラリに限定することなく有益であれば配布に追加するというポリシーをもっている点が新しい。 JavaScriptライブラリを活用するタイプのWebアプリケーションは数多くある。結果として、何度も似たようなJavaScriptライブラリをダウンロードしていることになり、このままいけば今後ライブラリ自体のサイズの巨大化や多くのサービスの登場でライブラリダウンロード総量は増加することになる。 The AJAX
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプト | コリス
leigeberのエントリーから、ドロップダウンメニューをスムーズに開閉する、1.8KBの軽量のスクリプトを紹介します。 Sliding JavaScript Dropdown Menu デモページ スクリプトはjQueryやPrototypeなどの他のスクリプトに依存せず、単独で動作するもので、対応ブラウザはIE6, IE7, IE8, Firefox, Opera and Safariとなっています。 ドロップダウンメニューはリスト要素で実装されており、項目はテキストなので日本語で実装することも可能です。
シンプルなスクロール機能
It's quite often, when navigating through a long document, confusing or disorienting for users to click a link which immediately jumps them to somewhere else in that document. Are they on the same page, on a different page, should they scroll more from here, what's going on? Smooth link scrolling alleviates this a little, by scrolling the page to the new link rather than jumping there directly. Tr
jQueryでテーブルをかなり便利にフォーマットしてくれる『Flexigrid』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FPDF-J - FPDF ファンの集い処
JavaScriptでカレンダーを実現するための38のスクリプト | IDEA*IDEA
jQueryを使ってファイルツリーを表示できる『jQuery File Tree』
