綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」:phpspot開発日誌
jsTree Examples 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 次のようなWindowsのツリービューっぽいUIが実装できます。JSONやXMLデータをツリーとして表示することが可能です。 アプリケーションで使い慣れた機能をWEBでも簡単に使えるのはいいですね クリックでアイテムの選択も可能です。 実装は最低限次のコードで実現できます $("#demo1").tree(); 関連エントリ WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」
本当はそれなりに面倒くさいJavaScriptとhistoryとAjaxのお話 - 愛と勇気と缶ビール
口上 historyとAjaxといえば、JavaScriptからある程度任意でhistoryのエントリをpushできるhistory.pushStateとか、history.replaceStateは既に大分有名になった感がある。 素晴らしい未来では、全てのブラウザにpushStateが乗っていて「location.hashを使ったAjax遷移が許されるのは10年前のブラウザまでだよねー」というハッピーな世界が実現するのだろう。が、今現在ではまだpushStateに対応していないブラウザのシェアも多く、Ajaxによる擬似画面遷移をモリモリ行うようなサイトではpushStateのある環境、ない環境の両方を考慮してやる必要がある。 (ちなみに、要件によっては「pushStateがないブラウザは通常の遷移で我慢しろ！」という割り切りも全然ありだと思う) 先に言っておくと、この記事は長いです。 環
FacebookのJavaScript SDKの下品なコメントが格好良すぎて惚れた件 - kissrobberの日記
https://github.com/facebook/connect-js/blob/master/src/core/content.js#L113 // Dear IE, screw you. Only works with the magical incantations. // Dear FF, screw you too. Needs src _after_ DOM insertion. // Dear Webkit, you're okay. Works either way. var guid = FB.guid(), …続く 親愛なるIEへ、 死ね。 謎の呪文を使わないと動かない… 親愛なるFFへ、 お前も死ね。 DOM挿入後にsrc設定必要 親愛なるWebkitへ、 お前はいいだろう。 どっちでも動く。
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
イマドキのWebシステムに向けて - nemuzukaの「明日から本気出す」
最近のWebシステムは、クライアント依存しづらくしなきゃだめよねー、ということで、サーバサイドにはJava、クライアントはJSON+JavaScriptでレンダリングという構成でシステム構築を考えております。そんな中で気づいた事をメモっとこうかなぁ、と。 なんでそんな構成にするの？ PCのWebブラウザだけでなくスマフォのブラウザやネィティブなアプリに対応しやすくするためです。サーバサイド処理を変えることなくクライアント側の処理で対応させちゃおうということです。サーバサイドの処理はJavaでなくてもPHPやRubyでもなんでも良いわけです。クライアント側と会話さえできれば。 サクサク感がたまらない 今まではsubmitして画面表示しなおすという方式が当たり前だったのですが、この方式に慣れてしまうと、画面遷移がモサく感じます。何か、ボタンを押すたびに画面が切り替わってスクロールバーが一番上に
Google JavaScript スタイルガイド - 日本語訳
このサイトは Google JavaScript Style Guide(Revision 2.93) を私的に日本語訳したものです。 この翻訳の内容について、翻訳者は一切の責任を負いません。ご利用は自己責任でお願いします。 以下のコーディングルールは、最終的にコードをClosure Compilerにかけて完成させることが暗黙の前提となっている点に注意してください。Closure CompilerはGoogle自身が提供しているJavaScript圧縮・最適化ツールです。（こちらの日本語の解説も参考にしてみてください。） JavaScriptコードがこのスタイルガイドに適合しているかどうかを検証する、Clisure LinterというツールがGoogleから提供されています。使い方はこちらを参照してください。
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis
新卒入社2年目で、フロントエンドエンジニアをしています。阿部です。 いろいろなサイトのソースを見ていて、最近見るなぁと思った要素を勉強がてらにまとめてみました。 「IE対策」、「キャッシュ対策」、「高速化」、「ソーシャルメディア要素」、「スマートフォン要素」の5つに分けて、広く浅くですがご紹介します。 IE対策 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> IEで閲覧している場合、Google Chrome Frameで表示します。 Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。 Google Chrome Frame（GCF）とは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインで
Excelの表（QA表, 不具合表... etc）を、すごく検索しやすくするツールを作りました。 - 地平線に行く
最近、仕事でやたらExcelを使うようになったので、こういうツールを作ってみました。 Excelインクリメンタルサーチ Excelの表を、すごく検索しやすくするツールです。 （QA表, 不具合表... etc） サンプルはこちら！ このツールを使うと、Excelの表をブラウザ上で素早く、わかりやすく検索できます。 データの自動変換スクリプトがついているので手間はほとんどかかりません。 また、複数のファイルにまたがるような場合でも、簡単に検索できるようになります。 日頃、Excelでバリバリ仕事をこなさなきゃいけないSIerの方にうってつけのツールです。 ぜひ、ご利用ください！ ダウンロード：ダウンロード - 地平線に行く 紹介ページ：Excelインクリメンタルサーチ - 地平線に行く 経緯 お客様とのやり取りは、どうしてもExcelで情報をやりとりしなくてはいけません。 しかし、Excel
JavaScriptで履歴管理 - tkkochanの日記
最近、jsでメニューを開けたり閉じたりした操作や、AJAXやJavaScriptによる動的差し替えを行った際に、ブラウザの戻る・進むボタンが使えず、直感的な操作でないような気がしたので、いろいろ調べつつ、クロスブラウザなライブラリを作ってみた。 （とりあえず、現時点でIE6/7・FireFox2・Safari3.1・Opera9.23で検証） （2008.06.14追記。Opera9.50でも動いた。） とりあえず、ぐぐったりなんかして、断片的に調べてみたところ、以下のようなことがわかる。 ■ページ内のアンカージャンプを利用して履歴を残す。 ページ内に存在しないアンカーに対してジャンプさせることで、ページ移動せずに履歴を残すことができる。 ＜この方法の問題＞ ・IEの場合、アンカージャンプでは履歴が残らない。 ■上との組み合わせ、アドレスの変化を監視して、変更時にアクションを起動。 win
私はいかにしてソフトバンク端末60機種のJavaScriptを検証したか - ockeghem's blog
昨日のソフトバンクの非公式JavaScript対応の調査結果 | 徳丸浩の日記で報告したように、昨年5月に、ソフトバンク60機種の検証を行い、JavaScript対応の状況などを調査しました。当時はまだ公式なJavaScript対応機種はない状態でしたが、既にほとんどの端末が *非公式に* JavaScriptに対応していました。 このエントリでは、検証の様子を報告します。 なぜJavaScript対応状況を調査したか http://www.hash-c.co.jp/info/20091124.htmlを公表した前後に、とある方（この方）から、ソフトバンクのケータイでもJavaScriptが動作すると伺いました（参考のやりとり）。XMLHttpRequestも含めてJavaScrptが動くと教えていただいた932SHを私も購入して調べたところ、以下が判明しました。 確かにJavaScrip
ユーザが入力した値を使ってSeleniumを実行する方法 - Enjoy*Study
先日、ユーザが入力した値を使ってSeleniumを実行できるかって話があって、Selenium IDEじゃなくても出来ますよーって言ってみたけど、実際試したことがなかったので、確認してみました。 Selenium IDE限定ってのは、下記のnitoyonさんの記事からだと思います。 Selenium IDE でテストにパスワードを埋め込まない方法 - てっく煮ブログ nitoyonさんの記事では、パスワードってこともあって、FirefoxのXPCOM使ってパスワード形式のプロンプト出してますが、パスワード形式にこだわらなければ、JavaScriptのpromptでも同じようなことが出来るので、Selenium IDEに限定されないはず。 prompt使って、ユーザが入力した値を変数(下記だと"value")に格納する場合は コマンド 対象 値 store javascript{prompt
複数のSubmitボタンがあるときにEnterキーで押すボタンを設定するスクリプト - カタヤマンがプログラマチックに今日もコードアシスト
ブラウザのフォーム入力を行う時、テキストボックスやチェックボックスにフォーカスがある状態でEnterを押すと、ブラウザが勝手にサブミットします。 便利っぽい機能ですが、テキストボックスが１つの場合は動作しないとか、押すボタンを決められないとか、若干の不都合を抱えていることは周知の通り。 特にSubmitボタンのname属性を元にしてサーバサイドの呼び出しロジックを決めているような場合は、結構致命的です。 で、その不都合を解消すると共に、Enterキーを押した時に押してほしいSubmitボタンを指定するためのスクリプトを探しましたがいいの見つからず、作成することにしました。 スクリプトはこんな感じです。 /** * Enterキーを押した場合に押したいボタンを設定する. * @param targetButtonId 押したいボタンのid * @mara formName フォームの名前 値
ノンプログラマーのためのjQuery入門
The document discusses Assembly Definition (asmdef) files in Unity. It begins by explaining that asmdef files are used to define Assembly configurations in a project. It notes some key points about asmdef files, including that they allow defining assemblies that can be referenced from other parts of a project. It also discusses different ways asmdef files can be structured, such as having one per
ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」:phpspot開発日誌
ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 2011年02月16日- jQuery plugin: jQuery.FixedTable - Nova download ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」。 テーブルは便利ですが、左から2番目のカラムは何を意味するんだっけ？という時に下の方にスクロールしていると上まで戻らないといけなかったりしますね。 そこでテーブルヘッダを固定位置にして分かりやすくできるというもの。 テーブルの最左部を固定にしてテーブルを横長にすることも出来ます。 テーブルのヘッダを固定にして通常のテーブルっぽくすることも出来ます。 デモページ 実装も基本的に $(element).fixedTable( options ) で簡単実装
Tim Bray: 「URLに#!入れるな」 - karasuyamatenguの日記
Tim Bray(GoogleのAndroid応援団長)が「#!」の入ったajax用URLを使用を批判している。 http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch new: さらならる「#!」URL批判 例にtwitterのtwitter.com/#!/timbrayを挙げている。 #!の働き サーバ側は#!の前までしか見えない。上の例だとサーバはtwitter.com/のリクエストを受ける #!以降はブラウザの中のジャバスクリプトが解釈する 何故#!を使うのか ajaxのアプリは古いブラウザでは基本的にURLを変更することができない… ただし#(フラグメント)以降はブラウザ内のJavaScriptからでも変更可能 なので、ajaxアプリケーションが自分の状態をURLバーに表示するために使われるようになった。 つまり
Introducing jQuery
jQueryって何 JavaScriptのフレームワーク みんな超使ってる ややこしいことが超簡単にできる John Resigってすげー人が作ってる とにかくイケてる なぜjQueryはイケてるのか 超短く書ける。そう作られてる。 Write Less, Do More. たくさんプラグインがある。使うの簡単。 DOM操作周りにめちゃ強い。 JavaScript始めるのにもオススメ。 ブラウザごとの差異も吸収してくれちゃう ブラウザ上でなんかするのに必要な機能が詰まってる プログラム書く流れ JavaScriptに限らず、大体こんな感じ。 こんなん作りたい APIを調べる それをどーやって使うのか調べる なんか難しそうだったらフレームワークとか調べる 文法を知る（大体どれも大きくは変わらない） 書いてみる APIとかフレームワークとか知らん 大丈夫です。 そんなん普通、調べないと知りませ
jQueryを使い始めたときに感じる13の疑問 : tech.kayac.com - KAYAC engineers' blog
来週は私が夏休みなので更新はない予定です。agoです。 最近、人にjQueryを解説する機会があったので、昔を思い出してjQueryを使い始めた頃に感じる疑問を書いてみたいと思います。 1 そもそも何で使うの？いまでも困ってないよ 作成する内容にもよりますが、慣れると使用しない場合に比べて記述するコード量が3分の1程度まで減ります。 また、変数、条件分岐、繰り返しが減るのでバグが発生しにくくなります。 2 何か特殊なことができる？ 結局できることは変わりません。 jQuery自体JSで書かれてますし、記述の自由度もJSの制約に制限されます。 3 何が難しいの？ 文法がややjQuery的になります。 参考 jQuery言語入門 jQuery自体のコード量は少ないのですが、独特の記述法が多く慣れるまで多少時間がかかるかもしれません。 また、CSS Selectorの知識はほぼ必須です。 特にマ
jQueryでoption要素を追加した際の諸問題 - むつらつれづれ
jQueryで任意のoption要素を追加するには、append()やprepend()を利用するのが手軽。 $('#target').append($('<option>').attr({ value: 'xxx' }).text('xxxxxxx')); だが、この操作はIEの場合に問題が生じる。v1.1.3.1以前ではoption要素を追加しても幅が調整されない不具合があり*1、v1.2.3ではoption要素を増やした直後にそのvalue値をval()で設定しようとすると、 「selected プロパティを設定できませんでした。 未定義のエラーです」 というスクリプトエラーが発生する*2。これらの問題はselect要素ごと作り直してしまうことで回避できる。 $('#target').after($('#target').clone()); $('#target').remove()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.yuku-t.com/entry/20110823/1314111340
5509.me