jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
2011/09/29 に jQuery Mobile 1.0 RC1 がリリースされ、正式リリースが間近に迫った jQuery Mobile を利用している方も多いだろう。今回は jQuery Mobile 利用時のちょっとした TIPS を紹介させて頂く。 ファイルアップロードに失敗する jQuery Mobile を利用した Web アプリケーションで、以下の様な multipart/form リクエスト(ファイルアップロード)を行う場合に問題が発生する。まず、以下のサンプルコードを参照して欲しい。 <h3>画像のアップロード</h3> <form action="/imgpost" method="POST" enctype='multipart/form-data'> <dl> <dt>コメント: </dt> <dd><input type="text" name="comment
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
本日始めて知ったのですがmobile safariではCSSのposition:fixedは使えないそうです。 よって、画面の一部分にボタンを固定して置いておく、というUIが作れない。 もちろんそれでは困るので、各種対策を試みている先達たちがおります。 色々調べてみましたが、「fixedできない?なら、しないでも大丈夫なようにすればいいじゃん」ということで、iscrollというjqueryプラグインを使うのがよさそうです。 iScroll これは、本来画面をタッチして指を滑らすとウィンドウ全体がスクロールされるのですが、このイベントを乗っ取ってしまい、ウィンドウがスクロールするのではなくて特定のdiv内がスクロールされるように、差し替えてしまうjqueryです。 fixedしたいオブジェクトをスクロールされるdivの外に置いておけば、まるでfixedされているかのように画面のスクロールに関
jQuery mobileをベースに組んであるウェブサイトで デフォルトのテーマとは全く違うデザインにする場合の方法 jQuery mobile には、初期設定でA~Eの5種類のテーマが入っています。 一般的に、このテーマの色やグラデーションなどの装飾を取り外したいところには 装飾を無効にする data-role=”none” や 特定のテーマを部分指定する data-theme=”[a-z]” で、 初期設定では存在しないf以降を指定する方法がしられています。 ただ、この方法でも 角丸やドロップシャドウなど全テーマ共通のスタイルが残っており これらをリセットするスタイルを被せてから任意のスタイルを設定する事もあります。 そこで、もう根本的にオリジナルのデザインにする場合のもう一つの方法を紹介します。 デフォルトテーマなしの jquery.mobile.structure-x.x.x.c
Twitter Bootstrap jQuery Mobile ThemeはTwitterのBootstrapとjQuery Mobileを組み合わせて使えるテーマ集です。 TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。 Aデザイン。 Bデザイン。全体として青。 Cデザインは赤。 Dデザインは緑。 Eデザインは水色。 Fデザインはオレンジ。 Twitter Bootstrap jQuery Mobile ThemeはjQueryとBootstrapを組み合わせ使えるテーマ集です。面白いのはA〜Fまでカラーが用意されており、data-themeを変更
jQueryMobile標準UIのまるまるとした見た目が,デザインテイストに合わなかったのでざっくりと無効化してみます. それらしい初期化プロパティが見つからなかったので,CSSで工夫せずにJavaScript側で強引に角丸系クラスを除去します. .ui-corner-*を除去するスニペット 以下のスクリプトをどこかで動くようにしておけばOKです.自由に使ってください. $(document).bind('pagecreate', function(e) { $('[class*="ui-corner-"]', e.target).removeClass(function(i, klass){ var matches = klass.match(/ui-corner-\w+/g) || []; return matches.join(' '); }); }); pagecreateイベント
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
jQuery Mobileを利用するとスマートフォンサイトを手軽に制作できますが、基本テンプレートをベースに制作すると「いかにもjQuery Mobileらしい」デザインになってしまい、他のサイトと似通ってしまいます。 そこで今回はjQuery Mobileのテンプレートをフルカスタマイズし、オリジナルデザインのスマートフォンサイトを作成する方法を解説します。サンプルとして、次のようなカタログサイトを制作します。 トップページには新着商品のサムネイル画像が3つ並び、その下にはアコーディオンパネルでニュースを掲載しています。新着商品のサムネイル画像を選択すると詳細ページに遷移し、詳細ページで画像をタップすると画像を拡大して表示します。 HTMLの作成 デザインカンプを元にHTMLを作成します。head要素内は次のように記述します。 ■サンプル1[HTML] <!DOCTYPE html> <
jQuery Mobileにはこれまで紹介した以外にもさまざまな機能があります。サンプルの作成を通じて紹介した基本的な使い方をおさらいしつつ、そのほかの機能も併せてまとめておきましょう。 ページの作成 jQuery Mobileでは、1つのHTMLに複数のページのコンテンツをまとめて記述します。ページの区切りやページ内のレイアウトは、カスタムデータ属性のdata-role属性で定義します。 ページの作成 data-role="page" div要素などにdata-role属性「page」を指定すると、HTML内にページを作成できます。data-role="page"を指定した要素には他と重複しないページIDを付け、id属性に記述します。 ヘッダーの表示 data-role="header" ページ内にdata-role属性「header」を指定した要素を配置すると、ヘッダーが表示されます。
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します(2012/01/11頃まで)。 このエントリーで紹介する情報は2011年12月のものです。 1.ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
もう知らないでは許されない!!「これからはじめる」という人のためのjQuery Mobile情報まとめ Tweet 2011/5/27 金曜日 matsui Posted in Android, iPhone, 記事紹介・リンク | 4 Comments » モバイルサイト作成のためのフレームワーク「jQuery Mobile」が、すごい人気ですね。 当初は数ある選択肢の中の一ツールとして程度の扱いでしたが、AdobeのDreamweaverが本格対応するなど、その勢いは留まるところを知らず、根幹的な技術になりそうな気配すらあります。 今回は過去に当サイトで掲載させていただいた情報も含め、jQuery Mobileを学ぶ上で知っていた方が良さそうなリンクをまとめてみました。 本家サイト。英語が苦手な私は、主にダウンロード用途ぐらい。 → jQuery Mobile 本家サイト(英語) [j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く