いまもっとも注目されているモバイルフレームワーク「jQuery Mobile」。jQuery Mobileの基本的な使い方から、実践的なデザインテクニックまで。iPhone/Androidなどのスマートフォンサイト制作にjQuery Mobileを活用する方法を具体的に解説します。<cj:inc template="792" element_id="673471" />
執筆させていただいた書籍『ポケット詳解 jQuery Mobile辞典』のサンプルサイトを作成いたしました。 ■書籍『ポケット詳解 jQuery Mobile辞典』サンプルサイト http://jquerymobile-memo.com/sample/ このブログの右のサイドエリアにもバナーをつけました。 タグ辞典は毎回自分で書かないといけないというのが面倒だなと自分もいつも思っているので参考になればと思って作成してみました。 またこちらでは jQuery Mobile1.1で作成しており、今後変更や追加などがありましたらこちらを反映させていきたいと思います。 スマートフォンでももちろん、cromeやsafariなどでも閲覧できますのでコードをコピペして使いたいなどの場合はPCサイトから見るのが便利です。 タグ辞典をご購入していただいて勉強している方はこちらもよかったら参考にしてください
大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権（見よ！ コレジャナーイアプリの数々を！）」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面
2. jQueryとjqMobiを単純比較してみる • jQuery minified 92kb • jqMobi min 15kb • jQueryMobile minified 89kb • jqUi min 71kb 全て圧縮/難読化済みのjsのプログラムサイズ 3. ところで みなさん、jQueryにおけるselector使ってますか？ • $(“#id”) • $(“.class”) • $(“div.music > spant.title”) • $(“div.class, span.class”) などなど 4. ところで みなさん、jQueryにおけるselector使ってますか？ • $(“#id”) • $(“.class”) • $(“div.music > spant.title”) • $(“div.class, span.class”) などなど これらがどうや
5. Kendo UI Mobile • data-*属性でビューの役割を指定 – data-role, data-title, data-layout, data-transition • jQuery Mobile知っていれ data-roleに指定できる役割 ば – view, button, header, footer, navbar… • 一瞬で理解可能 外部リンクはAjaxでページを取得され、 メインのDOMに統合される 6. Kendo UI Mobile • コード例 <div data-role="view" data-layout="overview-layout" id="overview-cities" data-title="Favourite Cities"> <ul data-role="listview" data-style="inset" data-t
3/15のWeb Cat Studio(リクルートエージェント)で行われた「jQuery Mobile 最新情報 & Tips」のセッション資料です。Read less
2012/07/19に行われたWeb Cat Studioでの講演資料です。jQuery Mobile 1.1.1の変更点や1.2の新機能、パフォーマンス・チューニングについて触れています。Read less
2. 自己紹介 株式会社オープンウェブ・テクノロジー代表 シーエー・モバイル株式会社 Web先端技術 フェロー HTML5とか勉強会主催、html5j.org管理人 Google API Expert (HTML5) Microsoft Most Valuable Professional 2011 (IE) 3. この資料について テキストとして、オライリー刊「jQuery Mobile」を使用します。 ハンズオンの部分は、オライリーのサイトか らサンプルをダウンロードして実践してくだ さい。 とはいえ、書籍が手元になくても、この資料 だけで学べることを目指しました。
jQuery Mobile スマートフォンサイト デザイン入門：Amazon 先日、アスキー・メディアワークスの小橋川さんより、２月３日に発売されたミニドーナツ本こと『jQuery Mobile スマートフォンサイト デザイン入門』を献本いただきました。 以前より心待ちにしていた一冊でしたので、どんな内容になっているのかとてもとても楽しみにしていました。 ようやく内容を一通り読み終えたので、ざっとご紹介したいと思います。 この書籍はASCII.jpでto-Rの西畑さんが連載していた『西畑一馬のjQuery Mobileデザイン入門』にいろいろと加筆修正がはいって、よりボリュームが増した内容の一冊です。 この書籍は、『jQuery Mobile スマートフォンサイト デザイン入門』同様に、HTMLとCSSが分かるデザイナー向けに書かれている本です。多少はJavaScriptやjQueryにつ
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
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
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
/*! * jQuery Mobile 1.4.5 * Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC * http://jquerymobile.com * * Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors * Released under the MIT license. * http://jquery.org/license * */ /* Globals */ /* Font --------------------------------------------------------------------------------------------
jQuery Mobileとは？ jQuery Mobileは、jQueryをベースとした、「スマートフォン向けフレームワーク」です。 もっと簡単に言うと、「スマートフォン向けコンテンツ制作の土台を作ってくれるソフトウェア」です。 スマートフォン向けの直観的かつ使いやすい、ネイティブアプリケーションさながらのページやUI※1が、瞬時にしてできあがります。開発者はわずかなHTMLやJavascriptを書くだけです。 「UI」 ※1ユーザーインターフェースの略。jQuery MobileはわずかなHTMLの記述のみで、リストやボタン、ナビゲーションバーなどのスマホ向けUIを自動構築してくれる。 2010 年10 月にアルファ版がリリースされ、2011 年11 月ついにjQuery Mobile 1.0正式版が公開されました。現在も、jQuery の開発者であるJohn Resig 氏（@je
jQuery MobileのテーマにMetroスタイルが登場。Microsoft Open Technologiesが発表 HTML5のタグを記述することで容易にモバイル対応のアプリケーションが開発できるフレームワーク「jQuery Mobile」に、マイクロソフトのタッチインターフェイスである「Metroスタイル」に対応したテーマが追加されたことがブログ「More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile」で明らかにされました。 このブログを投稿したAbu Obeida Bakhach氏は、先月マイクロソフトがオープンソースや標準規格などに対応するために設立した企業Microsoft Open Technologies,Incの一員です。 Metroスタイル
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
