jQueryで擬似フレーム - 高密度商業地域
かなり前に作成していた擬似フレームですが、この度、大いにやる気が出たので作成しなおしてみることにします。 前回は特にJavaScriptのライブラリを使わず実装しましたが、今回はjQueryを使用してみたいと思います。 以下の３点を実現することを目標とした擬似フレームを作成します jQueryを使うことでコードを簡単にする。ヘッダー、フッター、メニューが指定可能。JavaScriptのみで制御しているため、実装が簡単（別途のCSSファイル不要）。 １．どうすれば擬似フレームとなるか 擬似フレームそのものはJavaScriptを使えば特に難しいことはなく、body要素の箱にヘッダーなどのdiv要素を適切なサイズにして置いていくだけです。 その際、positionはabsoluteで各divを絶対座標で配置します。また、メニュー（menu）と本文（main）はスクロール可能（overflow:
jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル:phpspot開発日誌
jQuery HTML5 Drag-and-Drop File Upload | LearnComputer jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル。 jQueryのfiledropプラグインを使いつつサーバにファイルをアップロードするためのJavaScriptとPHPコードの例が掲載されています。 JS部分のコード例。アップ先のPHPエントリポイント、アップ開始、終了時のイベントハンドラが指定できます。 PHP側では $_FILES を使ってファイルを受け取るという簡単な物になっています。 関連エントリ ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」 ファイルアップロード関連のjQueryプラグイン１０ PHPを使ったAjaxファイルアップロードサンプル１０
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
動画・音楽再生 jQuery プラグイン「jPlayer」を使う - メモ用紙
jPlayer は動画や音楽を再生する jQuery プラグインです。HTML Audio に対応していること、HTML + CSS + JavaScript で UI を細かく作り込めることが特徴です。 現時点での最新バージョンは2.0.0。jQuery 1.3.2 以降で使えます。 jPlayer : HTML5 Audio & Video for jQuery 動作サンプル 音を鳴らす まず jPlayer をダウンロードし、jquery.jplayer.min.js および Jplayer.swf を適当なディレクトリに配置します。 HTML 側は空の div を用意します。（中に何か書いても置き換えられる） <div id="player"></div> JavaScript は次のように書きます。swfPath には Jplayer.swf のあるディレクトリを指定、setMe
10分でわかる！ jQuery Mobileのキホン (1/2)
スマートフォンサイトの制作でいま注目を浴びているのが「jQuery Mobile」です。jQuery Mobileを利用すると、CSSやJavaScriptの知識がない人でも簡単に本格的なスマートフォンサイトを作成できます。そんな“jQuery Mobileのキホン”が10分でわかるように、要点をギュッと絞って解説しましょう。 ※本記事は、jQuery Mobile 1.0をもとに執筆しています。 0分目： jQuery Mobileのダウンロードと利用方法 jQuery Mobileは、HTMLのhead要素で、（1）jQueryのスクリプトファイル、（2）jQuery Mobileのスクリプトファイル、（3）jQuery MobileのCSSファイルを読み込むだけで利用できます。 それぞれのファイルはjQueryのサーバーから呼び出せるようになっているので、わざわざ手元にダウンロードし
jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ
jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では なく、参考サイトなど一貫性無い感じですが。 整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。 ページ移動にAjaxを使わないようにするプラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/
jQpie – javascriptからphpの関数(function)を呼び出すjQueryを使用したライブラリ | maxar quartz
今回、JQueryを用いたjavascriptからphpの関数を呼び出すライブラリ jQpie を試してみたので書いてみます。 比較的用途が限られていますが、表側で見せたくないようなものをphp側で処理してjavascriptへ出力するなどに向いていると思います。 以下の順に記述していきます。 ダウンロードと導入 使用方法 a. JSON形式で値を受け取る b. html形式で値を受け取る c. jQuery APIを用いエフェクト付きで値を受け取る なお PHP5以上で動作 するため、使用する前にPHPのバージョンに注意が必要です。 ※PHP4では jQpie.php 及び jQpie_response.php において static変数 の記述方法が異なるためシンタクス・エラーを返します。 以下のリンクの Downloading jQPie よりダウンロードを行います。 http://
jQueryとHTML5でジオロケーションするデモ:phpspot開発日誌
Geo Location with HTML5 and Jquery jQueryとHTML5でジオロケーションするデモとサンプルがダウンロード可能になっています。 特にスマートフォン向けの機能として実装する際に参考にできそうです。 いざ実装するという段階になったときにサクっと実装できそうなので覚えておいて損はなさそうですね。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」 jQueryとCSS3、HTML5でここまで出来るホバーインタフェース
jQueyを使う場合に覚えておくと便利なChrome拡張:phpspot開発日誌
jQueyを使う場合に覚えておくと便利なChrome拡張が２つほどありましたのでご紹介。 マニュアルを検索する際にクイックに目的のものにアクセスし、開発スピードを上げられます。 jQuery API Browser ツールバーにボタンを追加してマニュアルをインクリメンタル検索。サンプルコードまでをChrome上で出せます。 インストールするとボタンが表示されます。 インクリメンタル検索が可能。 クリックすればサンプルコードも表示されます。 これは便利。 jQuery API Search 標準の検索窓に「jq ajax」などをタイプすればjqueryのマニュアル検索に飛べます Chrome上でインクリメンタルな検索が可能。 結果はjQueryのサイトにて閲覧 とりあえずどちらかいれておいて損はなさそうです。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-
第2回 jQueryの基本（お題編） | gihyo.jp
はじめに 第2回の今回からは本格的にjsdo.it -Share JavaScript,HTML5 and CSS-（以下、jsdo.it）を使ってJavaScriptを勉強していきたいと思います。毎回お題編と回答編に分けてやる予定で、お題編では基礎知識を解説してそれに関連した課題を出し、それをjsdo.itでつくってもらい、回答編で解説するというかたちで連載を進めていきます。 今回はjQueryの基本のお題編ということで、jQueryの基礎を解説したあと最後にお題がありますのでそちらを次回までにやっておくとより理解が深まるはずです。 jQueryってなに？ そもそもjQueryとはなんでしょう。まったく知らないという人もいれば名前くらいは聞いたことがある、いつもJavaScriptを書くときは使っている、さまざまだと思います。今回は初回なので念のためjQueryとな何なのかというところ
HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい
結構便利だったのでシェア。Web制作 に関する日本語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日本語のスライドのみを集約 集められたスライドは全
a-01 はじめてのProcessing - Proessing 学習ノート
Processingとは オープンソースのプログラミング言語 無料で利用できる ダウンロード → http://processing.org/download/ 描画やインタラクションをプログラミングで表現したい人向けの開発環境 学生、アーティスト、デザイナーが扱いやすいように配慮されている 詳しくは公式サイトを参照 → http://processing.org/ Processingの特徴 短いソースコードで動いてくれる Processing を扱えるようになることで、iPhone や Android の「アプリ」をつくることもできる Processingを使った作品の紹介 Exhibition Archives \ Processing.org Aaron Koblin - Flight Patterns Mary Huang :: portfolio Solar, with lyr
画像を効果的に見せるjQueryプラグイン
はじめに 第4回「手軽に扱えるjQueryプラグインを使ってみよう」では、jQueryのユーザーインタフェースを拡張するjQueryプラグインの中から、メニューバー、タブ、画像のスライダー、ズーム機能、Twitterのタイムライン表示を紹介しました。第5回では、画像の切り替えや見せ方をテーマに以下のようなプラグインを解説していきます。 画像のスライドショー（Simple Fade SlideShowプラグイン） 画像の円形スライド（MobilyBlocksプラグイン） 画像上にポップアップを表示する（MobilyMapプラグイン） パノラマ画像の表示（panorerプラグイン） 対象読者 jQueryプラグインに興味があり、使ってみたい方 必要な環境と準備 jQueryのダウンロード 執筆時点のjQueryの最新版は、1.4.4です。第1回を参考に、ダウンロードしてください。また、jQue
http://flowplayer.org/tools/demos/tabs/index.html
Õ\mwÛ6²þ,ý Ù8»hÙM_dY»Þt{Ýî¶wíÞÞ D$| _츹ùïûÌ AYÊ/×u f g C°ã1ý þ{4Þñ³øì ^þòãßDÒdé 5N&b»[óÚi ßÚ &ñNÝ ï9«¥soE#n¶ N) &§ØI¯·¹ÞPÖ ¼ÃdL §-w÷IåÿXkÙ©Õ # Vu?VpY©+OÁ Sùª-NÅ_eô 0müê l 3ô yì=. £ i9jj·Y ¨´³j ´/X¼ Ê _²BH±3 ÙàéãéÜ."vÍE¾Ù[§´Ùýs tOÅz »² xB {Ü y -Es øPUFNOÎBò\ Ö5 V zÜ sW©Êx 9«&÷ãcJX0 ÁBõCh è @e&Ë Wac Ô TD kô\7A ëûädùÝå?¿Ç¨ -îhZ 6(ÌIX îd¥ë Å¢ kjâ
Interface elements for jQuery - About Interface
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commerci
jQueryでcheckboxがcheckされてるかの値をとる - Webtech Walker
checkboxがcheckされてるかどうかを判別するメソッドってjQuery側に用意されてないんですよね。 twitterでも色々教えてもらったけど方法としては3つくらいかなー。 https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 素のHTMLエレメントから取得 var checked = $('#elem').get(0).checked; せっかくjQuery使ってるのにという感じがいなめない。。これはないかな。 is()で取得 var checked = $('#elem').is(':checked'); これが一番直感的ではある。これでいいっちゃいい気もする。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログ | 無料ブログを作成しよう
jQuery Mobile 1.1.0 日本語リファレンス
jQuery・Ajax実践サンプル