MdN Design｜総合情報サイト
第8回「最近注目を集めているJavaScript/jQueryのツール・テクニック45」 2010年04月09日 今回は、JavaScriptやjQueryを使ったテクニックやツールなどを紹介しよう。これまで同様の記事を何度か掲載してきたが、今回は海外で多くの注目を浴びたものを厳選している。フォームやボタン、カレンダー、ナビゲーション、デバッグ関連などさまざまな記事を紹介するので、ぜひチェックしてほしい。また、後半ではJavaScriptに関するリファレンスサイトなども紹介している。 余談だが、Smashing Magazineのページ上部にネットワークタブがあることをご存知だろうか。こちらでも記事を紹介しているので、ぜひご覧いただきたい。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：45 Fresh Usefu
jQuery.jsを使ってhtmlを外部読み込み
htmlの作成時に各ファイルで共通している部分がありますね。 ・ヘッダとか ・フッタとか ・グローバルナビとか そんな時、どうしてますか？ 1.各ファイルに同じ記述をしてますか？（変更掛かったらめんどくさいですね） 2.SSI（サーバーサイドインクルード）してますか？（できればいいけどちょっぴり敷居が高い？） 3.avascriptでdocument.writeつかってますか？（ソースが長いとめんどくさいですね） ざっくりリストアップすると以上のような方法が考えられます。 僕も上記のどれかをケースバイケースで使ってました。 そこにもうひとつ選択肢を追加します。 jQuery.jsを使って外部のhtmlファイルをまるごとインクルードしちゃいましょう。 方法 1.何はともあれjQuery.jsをダウンロード http://jquery.com/ 2.htmlのheader要素内で読み込む <s
CROSS 『iPhone × Android』 iPhone用タイムテーブルの作り方 | H2O Space. BLOG
2009年 10月 10日に開催が迫りました、CROSS 『iPhone × Android』。 今回、せっかくのスマートフォンイベントと言うことで、ちょっとスマートフォン向けのコンテンツも作ってみましょうということで、iPhone向けのタイムテーブルを作成してみました。 CROSS 『iPhone × Android』タイムテーブル for iPhone iPhoneで開いていただくと、次のような画面が表示されます。 時間をクリックすると、横にスライドするアニメーションと共にセッションの詳細が表示されます。 もどるボタンをクリックすれば、タイムテーブルにもどります。これだけのコンテンツですが、見た目やアニメーションが iPhoneっぽくなっているでしょ？ さらに、ホーム画面に登録をすると、次の画面のようにCROSSのアイコンが登録されます。 格好良いでしょ？（笑 といっても、これの制作時
フィードからタイトルやエントリを取得 - Google AJAX Feed API入門
APIを使ってフィードの取得に成功した後は、フィードからタイトルやエントリなど必要なデータを取り出して利用します。ここではフィードから必要なデータを取り出す方法について解説します。 1.フィードに含まれるプロパティの種類 2.フィードに関する情報 3.エントリに関する情報 4.サンプル フィードの取得に成功した場合、デフォルトの値であるJSON形式を指定していた場合は「feed」プロパティの値の中にフィードの内容が含まれています。「feed」プロパティの値は次のような構成となっています。 feed feedUrl title link description author entries[] mediaGroup title link content contentSnippet publishedDate categories[] では順に各値を取得してみます。
外部HTMLファイルを表示する「Sprinkle.js」
twitter facebook hatena google pocket 外部のHTMLを表示したい時にはiflame、object、SSIなどを使用する必要があります。 Sprinkleはそれをjavascriptで実現しました。 sponsors 使用方法 Sprinkleからsprinkle.jsをダウンロードし、以下の様に書き込みます。 <script type="text/javascript" src="http://yourdomain/sprinkle.js"></script> あとは以下の通り、読み込みたいファイルを指定します。 <div src="読み込みたいファイル"></div> ＊なお当方ではローカルファイル（相対パス）のみで、外部ファイル（http://www.yahoo.co.jp/）は読み込めませんでした。 また読み込むファイルは文字コードUTF-8でな
[JS]ブラウザの幅に合わせてレイアウトを最適化するスクリプト -Dynamic Layout
Dynamic Layoutは、ユーザーのブラウザの幅を認識し、それに適したスタイルシートでページのレイアウトを最適化するスクリプトです。 Dynamic Layout デモ Dynamic Holy Grail 1～3カラムのシンプルなレイアウト、ブラウザ幅600, 800, 1000に設定 Fortes ブラウザ幅600, 800, 1000, 1200, 1400に設定 fil-ter ブラウザ幅600, 1000に設定 Dynamic Layoutの設置方法は、body直下に外部ファイルとして指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
