値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」:phpspot開発日誌
EditableGrid - Make your HTML tables editable 値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」。 ベタ書きのテーブルタグや、XMLを読み込んでテーブルにすることも可能です。 カラムに型を定義することが出来て、編集時は単純なテキストエリアはもちろんですが、ドロップダウンメニューから選べるようにすることも出来ます。 テーブルヘッダーをクリックすればソートされます。 １から実装しようとするとかなり大変そうですが、ライブラリで比較的簡単に複雑でリッチなテーブルが実現出来ますね。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」
[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion
テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど高性能な上、超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ jQuery plugin: Easy Accordion デモページ [ad#ad-2] Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。 自動スライド、手動スライドの切り替えが可能。 同一ページに複数のアコーディオンを配置可能。 初期表示に任意のスライドを指定可能。 画像を使用しないで設置可能。 カスタマイズが容易（高さ・幅・ボーダー・背景画像など） アクセシブルで、SEOにもフレンドリー。 さまざまな
JQuery UI Tabsでタブ表示 « BPS株式会社 開発ブログ Beyond Perspective Solutions LTD.
こんにちわ芝原です。 始めてのJavascript関連の投稿です。 お手柔らかにどうぞ。 たくさんのコンテンツをすっきり表示させるための方法として、タブという手法がよくつかわれると思います。 今回は、この便利なタブ表示をJQueryを使って実現する方法を解説します。 動作はこんな感じになります。 http://jqueryui.com/demos/tabs/default.html 必要なファイルのダウンロード jquery本体とui.core.js、ui.tabs.jsが必要です。 こちらから簡単にダウンロードできますが余計なファイルも多分に入っているので、こちらからファイルを選択してダウンロードしてもいいと思います。 スクリプトの読み込み 必要なファイルを読み込みます。 head内に記述するのが一般的です。 <script type="text/javascript" src
ソートが無駄にアニメーションしてカッコいいテーブル実装jQueryプラグイン:phpspot開発日誌
MITYA.CO.UK | Scripts | Animated table sort (REGEXP friendly) ソートが無駄にアニメーションしてカッコいいテーブル実装jQueryプラグイン。 どこからどこに移動するというのが目視で確認できるので、無駄に、というのは言い過ぎかもで便利かもしれません。 テーブルの内容が、「ほげほげ(111)」のような文字を含む値であっても、正規表現で数値をマッチさせることでソートするなんて機能もあるみたいです。 比較テーブルなんかで使うと分かりやすい比較のUIが作れそうです。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 CSV形式のデータを簡単にテーブルに出来るjQueryプラグイン「csvtotable」 ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMe
iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでダブルタップをJavaScriptで実装する iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。 次のように記述するとjQueryで擬似的にダブルタップを実装することが出来ます。 $("p").data("dblTap",false).click(function(){ if($(this).data("dblTap")){ //ダブルタップ時の命令 console.log("ダブルタップ"); $(this).data("dblTap",false); }else{ $(this).data("dblTap",true); } setTimeout(function(){ $("p").data("dblTap",false);
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。 iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。 使い分けとしてはだいたい次のようになります。 ontouchstart = onmousedown ontouchmove = onmousemove ontouchend ≒onmouseup ですのでjQueryを利用した場合、 var ua =navigator.userAgent; if(ua.indexOf('iPhone'
[JS]フォームの入力欄にテキストを表示するスクリプト -Textbox Hinter
設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。 表示するテキストにはclassを付与できます（Demo 3参照）。 jQuery Textbox Hinter Plugin デモページ 主な特長 シンプルで軽量 スクリプトの知識は不要 表示するテキストにclassを付与できる textareaにもテキスト表示が可 クロスブラウザ対応 カスタマイズが簡単 デモと実装方法 実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。
大きな絵がアニメーションする絵本作家さんのサイト – creamu
写真や絵をテーマにしたサイトを作りたい。 そんなときに参考になるのが、『絵本作家 谷口智則さんのWEBサイト』。大きな絵がアニメーションするサイトです。 最近よく紹介していますが、ブラウザサイズいっぱいに背景画像を敷いてアニメーションしています。supersized.jsが使われていますね。 メニューにマウスオーバーするとフェードしますが、fade.jsの中のシンプルなJavaScriptで制御されています。 中ページは余白が大きく取ってあって、すっきりした美しいデザインになっています。画像のポップアップにはfancyboxが使われていたり、JavaScriptが効果的に使われていますね。 すっきりとしたデザインが好きな方は、一度見てみてください。 絵本作家 谷口智則さんのWEBサイト 三宿でまったり中。仕事を落ち着かせて引越しの作業をがんばるぞ。
第5回 タブ切り替えで快適に読めるインターフェースを作るには | gihyo.jp
見せたいもののメリハリをつけるのがコツ 「限られたスペースに複数の情報を入れたい。でも別ページにするほどでもない……」 そんなとき、タブでコンテンツを切り替えられると便利です。タブ切り替えは、Yahooのトップページで使われているように、かなり浸透してきています。 このUIを使うポイントは、以下のように重点的に見せたいコンテンツとそうでないもののメリハリをつけて使うことです。 特集などの一部のコンテンツに使う ニュースであれば一番見せたいカテゴリーのものをはじめに見せておいて、重要度の低いものは別のタブコンテンツとする サイドバーに置いたトピックスを、アーカイブと最新のもので分ける また、以下のようなデメリットがあるので、UIの見栄えとのバランスを念頭に置いて使う必要があります。 ソースが1ページに書かれるため、ページを分ける場合と違ってSEO効果が薄れる場合がある タブを移動してもページ
24種類の多彩な表示方法が楽しめるフリーの画像ギャラリー -Slideshow Box
HTML+JavaScript, HTML+swf, Flashで動作する、24種類の多彩な表示方法が揃った画像ギャラリーを紹介します。 HTML slideshows & Flash photo gallery templates _ Slideshow Box ※キャプチャは「24. Wall 3D」 まずは、その24種類の多彩な表示方法を紹介します。 特に目を惹いたのは、9, 12, 20, 22, 24です。
画面遷移なしにAjaxでシームレスに実装できるコメントシステム作成チュートリアル:phpspot開発日誌
Simple AJAX Commenting System ? Tutorialzine 画面遷移なしにAjaxでシームレスに実装できるコメントシステム作成チュートリアル。 書き込むと内容がそのままDOMツリーにアニメーションしながら追加されるという、よくありそうなコメントシステムの実装チュートリアルとサンプルプログラムです。 似たようなものを実装したい場合に参考にできるかもしれません。 フォーム部分もそれなりにスタイルされており、JavaScriptによるブラウザ上バリデートも効いてます。 改善の余地がありますが１から作るよりサクっと実装したい場合に使えそうです。 関連エントリ PHPとjQueryで作るAjaxなグループチャットスクリプト PHP+Ajaxなチャットスクリプト：YShout
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
[JS]表組みのヘッダを固定し、表示する列も選択できるスクリプト
左上のアローをクリックすると、チェックボックスが表示されます。 スクリプトはクッキーにも対応しており、選択した列をクッキーに保存することも可能です。 スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。 オプションでは、テーブルの幅と高さ、列選択の有無、クッキーの有無を設定できます。基本の書式は下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie) </textarea>
DOM Ready前にイベントを設定する方法（jQuery.liveの紹介） - KAYAC engineers' blog
健康診断で身長伸びてました。agoです。 今開発中のサイトで$().liveを中心にした実装を行っているので簡単にまとめてみました。 $().liveって？ jQuery 1.3系からサポートされた、イベントハンドラの設定用methodです。 $().bindとどこが違うの？ $().bindは指定されたhtml elementsに対して直接ブラウザの機能を使ってイベントを設定しますが、$(selector).liveは一旦document objectでイベントをキャッチした後、jQueryが発生元の要素とselectorをつきあわせて一致した場合イベントハンドラを呼び出します。 何がいいの？ 以下のような利点があります。 DOM Readyを待たずにイベントを設定できる。 通常jQueryでは$(function () {});（DOM Ready）内で初期化を行いますが、htmlの量
[JS]ドラッグベースのいろいろなインターフェイスが実装できるスクリプト -Dragdealer JS
Dragdealer JS デモ スクリプトはjQueryなど他のスクリプトに依存せずに動作し、圧縮版は12KBと軽量なものになっています。 以下に公開されているデモを紹介します。 シンプルなスライダー
物体のドラッグ＆ドロップ時に勢いをつけられる「towel.js」:phpspot開発日誌
towel.js 物体のドラッグ＆ドロップ時に勢いをつけられる「towel.js」。 ドラッグして勢いよく話せば、そのままズズズっとテーブルホッケーのように要素がすべるような効果をつけられます。 どんな場面に使うかはアイデア次第ですが、面白いのでご紹介させて頂きました。 ドラッグ＆ドロップというと、ピタッと止まるものが多いなかでこうした効果を実現しようというアイデア自体もなかなか面白いですね。 関連エントリ ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」 対象をドラッグ＆ドロップしてtwitter等にシェアできるプログラムと作成チュートリアル ドラッグ＆ドロップできるサイトマップ作成チュートリアル
ボックス内をスクロールすると自動でコンテンツをロードするjQueryをちょっと変えてみた
この記事は11年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。ボックス内をスクロールすると自動でコンテンツをロードするjQuery – かちびと.net を読んで、ちょっとやってみたくなったので作った。 言ってもたいしたことやってませんがｗ かちびと.netのシロさんには許可を頂いてます。 詳細は以下。 上記記事では、下までスクロールしたあとにワンテンポ置いてから（タイマー処理で）コンテンツがロードされる形になってます。 しかし、IEで見てみるとわかるのですが、内側のスクロールが完了した時点で外側のスクロールも動いちゃうんですね。 なので、ロードされる前にページの下に行ってしまう。 これをちょっと改善できないかなーと思って作ったのがこちら。 Auto Scroll Test コードは以下。 <script type=”text/javascript”> $(functio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ボックスのシャドウをアニメーションさせるスクリプト -Shadow animation
jQueryの基本的な書き方 [Javascript] All About![jQueryの基本的な書き方 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
本当にiPad“だけ”にCSSを読み込ませるには。