Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
Datepicker (日付関連)|リッチなサイトを作ろう
デフォルトでは当日がマークされて表示され、月を自由に移動することができます。 本来、フォームに日付を簡単に入力するためのプラグインですが、 単純なカレンダーとしても使用可能です。 jQuery ui オフィシャルサイトで、 デフォルトのままダウンロードすると、Datepickerを含むjQuery uiのフルオプションがダウンロードされます。 ダウンロードしたファイルは圧縮されていますので解凍します。 バージョンにより多少ファイル名が異なりますが、 jquery-ui-1.8rc3.custom.min.js のような形式だと思いますが、スタイルシートなど添付のファイルは全て必要ですので、 サイトのルートにjquery_ui等のディレクトリを作成して置きます。 もちろん、jqueryも必要ですがダウンロードしたjquery uiのバージョンにより必要なjqueryのバージョンがあります。
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
○○番目の○○という指定をするjQueryの「:eq(index)」や「:odd」などの動作について。再びバグ！？
jQueryのSelectorsで、「:odd」や「:even」などがあるけど、 以前「jQuerの｢:even｣｢:odd｣の動作についてを詳しく」で書いたように、 jQuery1.2の時は｢:even｣｢:odd｣の動作がおかしかったが、 「jQuery1.3リリース!!Selector面の変化で速度向上!?」で書いたように、 jQuery1.3でSelectorの動作が問題なく動作するようになっていた。 ところが、ｊQuery1.3.1になって、 なんと1.2の時と同じ動作に戻ってしまった。 もう一度指定の仕方やその動作の違いをまとめておこうと思う。 今回動作を見るサンプル サンプルとしてliが３つ入ったulを３つのサンプルを用意した。 これは以前1.2でulが複数あったときでも、 :oddや:evenはulに関わらずliの数で動作したりしていたので、 それを確かめるためでもある。
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
