「jQuery Mobile」を活用したスマートフォンサイト作成（中編）
はじめに 今回も、簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobileを紹介します。今回は2月に正式リリースされたばかりの最新バージョン1.3.0の新機能を紹介します。 対象読者 jQuery mobile、スマートフォンに興味があり、使ってみたい方 必要な環境と準備 執筆時点のjQueryの最新版は、1.9.1です。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。 また、執筆時点でのjQuery Mobileの最新版は、1.3.0です。こちらからzipファイルでダウンロードできます。サンプルでは、htmlファイルと同じ階層にmobileというフォルダを作成しています。zipファイル中のimagesフォルダ（cssファイルが呼び出す画像ファイルが格納されたフォルダ）と、jquery.mobil
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 1.3.0 Betaがリリース！変更点まとめ - へっぽこプログラマーの日記
先日ついにjQuery Mobile 1.3.0 Betaのリリースがありました！ Announcing jQuery Mobile 1.3.0 Beta http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/ ここでは、jQuery Mobile 1.3の変更点を簡単にまとめたいと思います。 画面のサンプルやAPIなどについては、本家のBlogポストもしくはDocsを参照してください。 jQuery Mobile 1.3では、従来の予告通りResponsive Web Designにフォーカスしたアップデートになりました。Widgetの大きさにwidth: 100%などの指定をするように変更されており、画面サイズやグリッドなどにフレキシブルになるように設計されています。 これまでは、jQue
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
はじめての jQuery Mobile 1.0 〜その2：ページ遷移〜 - A Memorandum
blog1.mammb.com からの続きです。 ページ遷移時のイベント jQuery Mobile では、1つのHTMLファイルに複数のページビューを定義できます。外部ページも非同期リクエストにて取得したページビューを、既存の DOM に挿入することでページ遷移を実現します。 これによりページ遷移の度にサーバへのリクエストを行うこと無く、通信帯域の制限されたモバイル環境においてスムーズなページ遷移を可能にしています。 このような特徴があるため、jQuery Mobile では $(document).ready() といった、ページロード時のイベントと、ページ遷移(表示)時のイベントを区別して扱う必要があります。 ページの初期化には pageinit イベントを使う ディスクトップ向けに jQuery を利用する場合は、$(document).ready() にて DOM の読み込み完了
jQuery Mobileでサンプルサイトを作ってみた | 美Deブ（美美美コムデベロッパーブログ）
jQuery Mobileをつかって、コーポレートサイトを作成してみました。cssをカスタマイズするのに苦戦しますね。ソースコードがかなり長いので、sampleをご覧ください。 sample：jQuery Mobileでコーポレートサイトを作成 ダウンロード：jQuery Mobileでコーポレートサイトを作成をダウンロード ※実際のコードは下記になります。 ▼htmlソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>jQuery Mobileを使ってコーポレートサイトを作成：美Deブ</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" hr
jQuery Mobileでボタンやリストビューを動的に追加する - Qiita
を追加してもただのanchor要素が追加されるだけだった。以下のようにbutton関数を呼べばボタンになった。 参考: http://forum.jquery.com/topic/how-to-dynamically-add-data-role-button <script> (function($){ $(window).load(function(){ var $content = $('#content'); $('<a/>').text('Label') .data('icon','home') .appendTo($content) .button() ; }); })(jQuery); </script>
jQuery Mobile リストサンプル
JQM リストドラッグサンプル ↓の+のあたりでリサイズ可能 リスト01 リスト02 リスト03 リスト04 リスト05 かちびと.net 記事へ
スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ:phpspot開発日誌
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 １から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます（デモ）。 こんなことできるんっ、という声が出てしまうかも（Androidはドラッグのみ） jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ＆ドロップが可能 Jquery Swipe スワイプイベン
jQueryMobileでdata-ajax="false"をリンクに使うとアプリではなくSafariでリンクを開いてしまう件 | CHECKO Developer's Blog
そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか http://d.hatena.ne.jp/pikotea/20120405/1333631161 確かにAjax有効にしていると「あれっこれダメなの？」ということが多々あって心折れそうになりますよね。 私も途中で心折れてリンクで data-ajax=”false” を多用した時期があったんですが、それはそれでiOSのWebアプリモード（フルスクリーンモード）の場合にアプリではなくSafariでリンクを開いてしまう問題がありました。 ipad/iphone opening the data=ajax=false links in safari instead of app window http://forum.jquery.com/topic/ipad-iphone-opening-the-data-a
jQueryMobileでブラウザ戻るを使うとバグが発生する
目次：jQueryMobileでスマートフォンサイトを作ろう jQueryMobileはJavascriptのライブラリで有名なjQueryベースで作られたスマートフォンサイト制作用のフレームワークのことです。 最大の特徴はAjax、Javascriptの知識がほとんど無くても、HTMLさえ理解できれば誰でもカッコイイスマートフォンサイトが作れるところ！ そんな魅力たっぷりなjQueryMobileをインストール時の注意点から細かく解説していきます。 今すぐあなたもjQueryMobileでスマートフォンサイトを作ってみましょう！ jQueryMobileでブラウザ戻るを使うとバグが発生する jQuery Mobileで確認画面付のフォームでSessionが消える問題 .htaccessでPCサイトとスマートフォンサイト切り替え jQuerymobile×WordPressでスマートフォン
そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか - へっぽこプログラマーの日記
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
jQuery Mobileのページ系イベントを再確認する | もしもワークス
jQuery Mobileを使ったアプリを作ってみてイベント周りでこんがらがってしまった経験から、複数ページテンプレートと単一ページテンプレートそれぞれで、ページ系イベントの挙動を確認してみました。 準備 まずページを3つ用意。 複数ページテンプレなら#page1, #page2, #page3。 単一ページテンプレならpage1.html, page2.html, page3.html という具合。 参考：ページ機構 | jQuery Mobile リファレンス そしてイベントを受けてconsole.logでイベント名を吐くだけの共通スクリプトを用意。 イベントを$(‘div[data-role="page"]‘).live(function(){…})で受ける。 ※ただし、pagebeforeload, pageload, pagebeforechange, pagechan
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
企業サイトをスマホ向けに作り込むのに役立つテク11選
pageshow | jQuery Mobile 1.1.0 日本語リファレンス
screw-axis.com
http://www.android-group.jp/conference/ictera-abc/files/2012/10/slide-kokubun121020.pdf
Swipe to Delete
jQuery Mobile Docs - Popup panels
screw-axis.com