jQuery Mobile 1.4の変更点と既存ページ対応のポイント（前編）
本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回と次回の2回にわたり、2014年1月に正式版がリリースされたjQuery Mobile 1.4について、前バージョンからの変更点や既存のWebページを対応させるための修正ポイントを説明していきます。 はじめに jQuery Mobileは、jQueryを用いたスマートフォン向けのUIライブラリです。jQueryとjQuery Mobileを活用することにより、スマートフォンに最適化されたWebページをシンプルなコーディングで作成することができます。 jQuery Mobileの最新版となる1.4では、Webページの外観と処理内容の両面で従来バージョンから変更が行われたため、jQuery Mobileを用いた既存のWebページをjQuery Mobile 1.4に
jQuery Mobile 1.4アルファ版が公開。DOMの削減による性能向上とSVGアイコン採用など
jQuery Mobile 1.4アルファ版が公開。DOMの削減による性能向上とSVGアイコン採用など バージョン1.1ではCSSを活用することで安定動作の充実を、バージョン1.2ではポップアップやフォームなど新しいコントロールを強化、前バージョンの1.3ではレスポンシブデザイン対応をしてきました。今回の1.4では、DOM操作を削減することによる性能向上、SVGアイコンの採用などが行われています。 1.4での主な変更点 現在のjQuery Mobileでは、元になるHTMLに対してjQuery Mobileが装飾や操作のために多数のDIVタグなどを実行時に自動的に追加しています。1.4ではこのDIVタグの追加などが抑えられるとのことです。ブログから引用します。 To improve performance we reduced DOM manipulation. Generation of
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSourcecmutoh
jQuery Mobile 1.3が今晩正式リリース予定。JavaScript MVCフレームワークのEmberは1.0RCが公開
jQuery Mobile 1.3が今晩正式リリース予定。JavaScript MVCフレームワークのEmberは1.0RCが公開 現在リリース候補版が公開されているjQuery Mobile 1.3は、レスポンシブなテーブルやグリッドに対応し、横幅に応じてレイアウトが柔軟に変化。レンジスライダーやパネルのような新しいユーザーインターフェイスの要素が追加されるなど、比較的大胆なバージョンアップとなります。 参考：jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化 そのjQuery Mobile 1.3の正式版が、日本時間で今晩公開される予定です。先週2月14日に行われたjQuery Mobile Team Meetingの議事録によると、「1.3.0 Final release still on track on Monday the
jQuery Mobile に関するおすすめの本4冊まとめてレビュー | 15VISION NOTE
jQuery Mobile もスマートフォンサイト制作やアプリ制作時の選択肢の1つとして、もうすっかり認知されているのではないでしょうか。2011年11月にjQuery Mobile 1.0正式版がリリースされたことで、実際の業務で使うようなったという方も多いと思います。今回は、jQuery Mobile をしっかり学びたい！という方のために正式版リリース後に出版された jQuery Mobile 関連書籍4冊をまとめてレビューします。目的にあった書籍選びの一助となれば幸いです。 「jQuery Mobile に関するおすすめの本4冊まとめてレビュー」の続きを読む
jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化
HTML5のマークアップだけでモバイル対応のWebアプリが構築できるJavaScriptフレームワークのjQuery Mobile。レスポンシブWebデザインにフォーカスし大幅に強化された新バージョンjQuery Mobile 1.3βが公開されました。 jQuery Mobile 1.3では、表示幅に対応して自動的にフォーマットが変化する「Responsive tables」や「Responsive grids」、1つのスライダーで値を2つ設定できる「Range Slider」、新しいウィジェットの「Panel」をはじめ、多くの機能追加が行われています。 ブログでは、今回のバージョンでレスポンシブWebデザインにフォーカスする経緯について、以下のように説明しています。 We’ve seen the question “What should I use: RWD or jQuery Mo
スマホアプリ開発はHTML5／jQuery Mobileとネイティブどっちがいいの？～第2回テックヒルズまとめレポート（1/2） - ＠IT
スマホアプリ開発は HTML5／jQuery Mobileとネイティブ どっちがいいの？ 第2回テックヒルズまとめレポート 柴田克己 2012/4/27 iPhoneやAndroid端末の急速な普及を受け、多くの開発者が近年関心を寄せているのが「HTML5で実現できるWebアプリと、各プラットフォーム向けに特化したネイティブアプリ。開発するならどちらがトク？」というテーマだ。 2012年4月13日に、このテーマについて実際にスマホやWeb向けのアプリ開発を手掛けている技術者たちが意見を戦わせる「第2回テックヒルズ『ネイティブアプリ』vs『Webアプリ』～これからのアプリ開発のトレンド～」と題したディスカッションイベントが、六本木アカデミーヒルズで開催された。 司会進行を務めたのは、同イベントを企画、運営するインターネットサービス企業「CROOZ」の技術統括本部取締役の小俣泰明氏だ。 小俣氏
Announcing jQuery Mobile 1.2.0 Final | jQuery Mobile
The jQuery Mobile team is excited to announce the final release of 1.2.0. This release brings a new popup widget, an autodivider and collapsible option for listviews, and over 100 enhancements and fixes throughout the library to make things smoother, faster, and more polished. Try it now! We’d like to thank the community, sponsors and most of all our amazing list of almost 200 contributors who hav
「jQuery Mobile 1.2.0」正式版リリース
jQuery Mobileの最新リリースとなる「jQuery Mobile 1.2.0」の正式版が10月2日に公開された。新機能として「ポップアップウィジェット」が追加されるなど、100以上の機能強化や修正を盛り込んでいる。 ポップアップウィジェットは、現在のページ上に重ねる形で任意のコンテンツやウィジェットを簡単に配置できるようにする機能。ツールチップ、メニュー、ポップアップフォーム、地図上のオーバーレイ、ライトボックスなどを同じウィジェットで作成できる。 また、リストビューのオプションとして、リストのコンテンツに基づいてアルファベット順の仕切りを追加できる「autodivider」、折り畳み可能なリストビューを作成できる「collapsbile」が加わった。 このほかにもコントロールグループのアイコンボタンやツールバーのボタンの改善、フォームエレメントの幅の調整などが行われている。jQ
jquery mobile を使ってるときのpost後のredirect - doorsideの日記
jquery mobileを使ったページでフォームデータのpost -> redirect後にリロードすると、再度postされる。 formに「data-ajax=false」を指定することで回避。 play view #{form @Foo.save(hoge.id), 'data-ajax':'false'} ... #{/form} play controller public static void save(Long hogeId) { ... redirect("Foo.list"); } aタグにはほぼ「rel="external"」つけてるし、jquery mobileを有効に使えてんのかな？
jQuery Mobile
TOPICS Programming , Web , HTML/CSS , JavaScript 発行年月日 2011年12月 PRINT LENGTH 192 ISBN 978-4-87311-526-9 原書 jQuery Mobile FORMAT PDF モバイルWebアプリ開発用のJavaScriptライブラリjQuery Mobileの解説書。jQuery Mobileの仕組みと使い方をチュートリアル形式で解説します。jQuery Mobileはスマートフォンやタブレット型PC向けのタッチアプリに最適化されたWebフレームワークです。jQuery Mobileを使えば、さまざまなデバイスで共通の表示と振る舞いをするモバイルWebアプリを簡単に開発できます。本書ではHTML5/CSS3/JavaScriptのコード例と画面例を使ってjQuery Mobileの使い方をステップバイ
jQuery Mobile – All Versions | jQuery CDN
jQuery Mobile - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery Mobile git build - uncompressed, minified, theme (minified) jQuery Mobile - All Versions jQuery Mobile 1.5.0-rc1 - uncompressed, minified, theme (structure only) jQuery Mobile 1.5.0-alpha.1 - uncompressed, minified, theme (structure only) jQuery Mobile 1.4.5 - uncompressed, minified, theme (structure only) jQuery Mobile 1.4.4 - uncompr
jQuery Mobile APIでもっとJavaScriptプログラミング ―（1/2） - ＠IT
連載：jQuery Mobile入門（最終回） 第6回 jQuery Mobile APIでもっとJavaScriptプログラミング 山田 祥寛 2012/06/14 本連載の初回では、jQuery Mobileは（jQueryのモバイル版というよりも）jQuery UIのモバイル版である、と述べた。実際、jQuery Mobileでは標準であまたのウィジェットを提供しており、マークアップのみでネイティブ・アプリ・ライクなスマホ・アプリを開発できてしまう。もっとも、その特長が故に、ともすると、jQuery Mobileではあらかじめ用意された範囲でしかアプリを開発できないと思われがちだ。 そのようなことはない。jQuery Mobileでは、豊富な独自のJavaScript APIを提供しており、これらを呼び出すことで、固有の仕組みをアプリに簡単に組み込める。そうした自由度の高さも、jQu
jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ - かちびと.net
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
jQueryMobileでページ遷移した際にJsを実行する | WebDelog
最近jQueryMobileを使う機会があり、つまづいたのでメモ。 jQueryMobileは１つのHTMLの中にrole属性を持ったdivを作成してあげることで、それらをページとして扱うことができるようになります。 ページ切り替えのアニメーションなんかもつけられるので 「おおっ！こりゃ便利！」 と余裕こいていたら、結局色々いじらなければならず… 色んな問題も後から後から…泣 まあそれは違う機会に書こうかなと思います… 今回はページ切り替え終わった時にイベントを起こす方法です。 jQueryMobileは先ほど書いたようにページ自体は一枚のHTMLなので、 コンテンツを切り替えた際にloadイベントを起こす ってことが出来なかったのです‥ それで遷移した際にJavascriptを実行するpageshowイベント なるものがあることを知りました。 $('[data-role="
いまから始める、jQuery Mobileの基本 (1/4)
jQuery Mobileを利用すると、簡単なHTMLを用意するだけでスマートフォンサイトを作成できます。今回はシンプルな会社案内サイトを実際に作りながら、jQuery Mobileの基本的な使い方を学習しましょう。 以下のような会社案内サイトを作成します。 トップページのメニューをタップすると各ページへスライドして移動するシンプルなスマートフォンサイトです。まずはトップページ部分から作ってみましょう。 jQuery MobileとHTML5 jQuery MobileはHTML5のカスタムデータ属性でさまざまな設定を定義するので、jQuery Mobileを利用するWebページはHTML5で記述します。HTML5と聞くとハードルが高そうですが、最低限の約束ごとさえ守れば決して難しくありません。 次のようなHTMLを雛形として用意します。 <!DOCTYPE html> <html> <h
jQuery Mobileのマークアップの基本とCSSの変更 (2/6)
見出しサイズと色の調整 続いて、見出し（h2要素）のスタイルを調整しましょう。data-role="content"内のh1〜h6要素の文字サイズはデフォルトでは大きすぎるので、少し小さめに変更します。 ■サンプル3[HTML] <h2 class="h1">to-Rについて</h2> ■サンプル3[CSS] .ui-content .h1{ color:#5E87B0; font-size:17px; text-shadow:1px 0 0 #FFF; } デザインを変更したいh2要素にclass属性「h1」を追加し、CSSでフォントサイズ、色、テキストシャドウを設定しています。.ui-contentは、カスタムデータ属性「data-role="content"」が付いた要素に対してjQuery Mobileが自動的に付加するclass属性です。 サンプル3を実行すると以下のように表示さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jquery-archive/jquery-mobile: jQuery Mobile Framework
builwing.info
jQuery Mobile: Demos and Documentation