HTMLのテーブル表示は色々な場面で使われます。ですが単に表示するだけで満足するケースは少なく、テーブル内のデータをもっとインタラクティブに変更したいと言う要望は多々聞きます。 そこで使ってみたいのが今回紹介するjQuery Dynatableです。そもそもHTMLのテーブルを描画するのではなく、JSONデータを使って動的にレンダリングします。その結果、面白いデータ操作が色々と実現できています。 早速見ていきましょう。 デモです。表示件数、ページネーション、フィルタリングといった機能が実装されています。 表示件数を変えれば動的に内容が変更されます。 フィルタリングもインタラクティブに行われます。 JSONからだけでなく、動的にテーブルを生成できます。例えば以下のコードはリストから読み取ってテーブルを生成します。 <ul id="my-list"> <li> <span class="nam
jQuery だけでサイトを作っているとちょっと規模が大きくなると見え辛くなってくるので Backbone.js を使おうと思い情報収集している。 以下自分の為のリンク集。 オフィシャルサイトのドキュメント http://documentcloud.github.com/backbone/ チュートリアル オフィシャルの ToDo アプリケーション http://documentcloud.github.com/backbone/docs/todos.html 上記の ToDo だと最初の一歩としては複雑すぎる。 こっちの方が分かりやすかった。 Hello Backbonejs – Artur Adib 日本語は Qiita のアドベントカレンダーが分かりやすい。 Backbone.js Advent Calendar 2011 - Qiita WebSocket というか SocketI
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
あけましておめでとうございます。Sencha Japan(Ext Japan)/株式会社ゼノフィの小堤です。 今回は、スマートフォン向けのJavaScriptフレームワークであるjQtouch, jQuery Mobile, Sencha Touchを簡単に紹介した後に、昨年正式リリースされたSencha Touchを利用してスマートフォン向けのコンテンツまたはアプリケーション開発を行っていく上でのポイントを解説します。 2011年のスマートフォン事情とOSプラットフォーム iPhoneをもつユーザーはかなり増えた感じがしますし、特別な感じもないくらいiPhoneは普及してきた感じがします。それに加えて、昨年末から各キャリアから続々とAndroid端末が発売され、そのバージョンも2.1/2.2がほとんどです。 スマートフォン自体の機種が増え、開発者としてはテストを行う苦労が増えていきそうな
ログインフォームや問い合わせフォームなどをWebページの遷移なしにダイアログボックスで表示する――。近頃、海外のECサイトやポータルサイ トなどでこうしたUI（ユーザーインターフェイス）を見かけます。もともと閲覧しているページの上にダイアログボックスがオーバーレイで表示されるので見栄えがよく、ページを移動せずに済むので、もとのページにすぐに戻れて便利です。 UIに特化したJavaScriptライブラリー「Query UI」を使えば比較的簡単に実装できますので、Webページ上にオーバーレイでダイアログボックスを表示する方法を紹介します。 jQuery UIのダイアログ機能を使うための準備 「jQuery UI」はjQueryのUI関連機能をまとめたライブラリー郡です。タブパネルやドラッグ＆ドロップ機能などでこれまでも何度か登場（関連記事1、関連記事2）しましたが、今回はダイアログボックスのコ
1. あえてECMAScript3.0以前の実行環境を使う あえてECMAScript3.0の実行環境を使うようにしましょう。そしてATNDで好みの男がいたらLT参加を告知し、わざとらしく発表準備段階でコンソールを出していじってみましょう。そして「あ～ん！ この実行環境本当にマジでチョームカつくんですけどぉぉお～！」と言って、男に「どうしたの？」と言わせましょう。言わせたらもう大成功。「ECMAScriptとか詳しくなくてぇ～！ ずっとコレ使ってるんですけどぉ～！ Object.keysが使えないんですぅ～！ ぷんぷくり～ん（怒）」と言いましょう。だいたいの男は新しい実行環境を持ちたがる習性があるので、ECMAScript5の実行環境を使っているはずです。 そこで男が「新しい実行環境にしないの？」と言ってくるはず（Object.prototypeの拡張を勧める男はその時点でガン無視OK）。
Lettering.jsはJavaScript製のフリーウェア（ライセンスはWTFPL）。Web2.0という単語が出回ったことに流行ったのがFlickrのロゴ風の画像を生成するジェネレータだ。透明感があって、ポップなデザインに見え、かつクールなロゴがたくさん（この時点でクールじゃなくなった）出回った。 今時代はJavaScript全盛だ。文字を画像化しても面白くない。文字をJavaScriptを使って装飾する、そんなロゴは今後流行るかもしれない。その可能性を感じさせるのがLettering.jsだ。 Lettering.jsを適用した文字は見ればすぐに分かる。あざやかな色合いで、ポップで可愛らしい文字になる。テキストなので画像に比べると軽量なのも利点だ。画像のように作成し直す手間もなく、システムと連携させるのも容易だ。 さらにマウスオーバーによるアクション設定ができるのも大きい。各文字はマ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く