jQuery Mobile Tips【Ajax無効化設定とブラウザの戻るバグ対策】 | WebNAUT by Beeworks
※この記事は2013年6月26日に執筆された記事です。現在は仕様が異なる可能性があります。 モバイル用WEBアプリケーションやスマートフォンサイト制作用のフレームワーク「jQuery Mobile」 手軽にリッチなコンテンツを構築できる事で人気のフレームワークですが、ページ遷移の仕様についていくつか注意点があります。 今回はその問題点や改善方法をご紹介します。 目次 jQuery Mobileの特徴 Ajaxによるページ遷移の問題点 一般的なAjax無効化の設定 ブラウザ「戻る」操作によるページ遷移の不具合と対処方法 ダイアログの併用について jQuery Mobileの特徴 スマートフォン向けのフレームワークは数多く存在していますが、jQuery Mobileの大きな特徴としては以下が挙げられます。 クロスプラットフォーム対応（iOS、Android、Windows Phone、Blac
jQuery Mobileでページ内リンク | まるwebデザイン
jQuery Mobileはスマートフォンページを簡単に作れるモバイルフレームワークで とっても便利なのですが、「#」を使ったページ内リンクができないという問題があります。 jsを使うことで、jQuery Mobile内でもページ内リンクを実現できます。 <script type="text/javascript"> $('.top').live('click', function() { $.mobile.silentScroll(); }); </script> <a class="top" href="#" data-role="button">Topへ</a> 上記コードを追加するとページトップに戻るページ内リンクが作れます。 特定の位置にページ内リンクで移動させたい場合は、「$.mobile.silentScroll();」にページ上からの座標を指定するする事で実現できます。
data-tap-toggle | jQuery Mobile リファレンス
data-tap-toggle属性はフルスクリーン時にタップでヘッダーやフッターを非表示にする機能を有効にするかどうか設定できる属性です。 data-fullscreen=”true”を指定した要素のヘッダーやフッターはページ上下に固定は位置され、画面をタップすることで非表示にすることができます。data-tap-toggle=”false”を指定することでヘッダーやフッターを非表示にせずずっと表示しておくことが可能になります。 <div data-role="header" data-position="fixed" data-position="fixed" data-tap-toggle="false"> .... </div> .... <div data-role="footer" data-position="fixed" data-position="fixed" data-
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので作業の流れをまとめました。 WordPressのプラグインKtai Styleを使ったjQuery Mobileスマートフォンサイトを制作する流れです。 前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので 作業の流れをまとめました。 やり方は人それぞれだと思いますが、 作業の参考になってくれたら幸いです。 ラフの作成 HTMLマークアップ デザイン（テーマ）のカスタマイズ WordPressテーマ作成 Tipsなど 1.ラフの作成 一般的なwebサイト制作と同様にまずラフを制作します。 また、jQuery Mobileの特徴でもある画面遷移時の効果や、 表示のされ方などもこの時点で決めて
jQuery Mobile例文辞典
書式 <a href="★URL★" data-role="button" data-corners="false">〜</a> 説明 jQuery Mobileで通常の角丸のボタンではなく、角が四角いボタン形状にするには要素にdata-corners="false"を指定します。 サンプル サンプルを実行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile例文辞典</title> <link rel="stylesheet" href="../../../lib/jquery.mobile.css"> <script src="../../../lib/jquery.js"></script> <script src="../../../lib/jquery.mobile.js"></scri
jQueryMobileで、aタグのリンク先が画像だったらAjaxを無効化する : Serverレッスン
9月11 jQueryMobileで、aタグのリンク先が画像だったらAjaxを無効化する カテゴリ:jQuery jQueryMobileのページ遷移はAjaxだから速くていいね！とか思っていたんですが、リンク先が画像だった場合にundefinedになってしまいます。 こちらを参考にさせていただきました。 jQueryでセレクタで指定するのとfilter()で絞るの、どっちがいいか。 解決したコードはこちら jQuery(document).on('pageinit', function(e){ var $ = jQuery; //画像などファイルへのリンクの場合はajaxを無効化 $('a').filter(function(){ return /\.(jpe?g|png|gif|pdf)$/i.test(this.href); }).at
jQuery MobileでWordPressブログのテーマを制作して、スマートフォン対応させる手順（私の場合）。
「検索フォーム」「カテゴリリスト」「アバウト」の3つについては、jQuery Mobieのページ構造を利用して、footer.phpに記述することにしました。 2.jQuery Mobileの「ThemeRoller」を使ってベースとなるテーマを作成 詳しい使い方は省きますが、jQuery MobileのThemeRollerを使うと、配色や角丸の値を簡単にカスタマイズすることが可能で、作成したデザインをCSSファイルでダウンロードできます。 使い方も解説いらずで、直感的にとても分かりやすくできているので、オリジナルのカラーテーマで手っ取り早くjQuery Mobileをセミカスタマイズしたい人にもおすすめです。 私はこれを利用して、まずベースとなるデザインを画像のように設定しました。PCサイト用に作成したカラーテーマを、Adobe Kulerにアップロードしておくと、ThemeRolle
jQuery MobileのテーマにMetroスタイルが登場。Microsoft Open Technologiesが発表
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スタイル
過去のjQuery Mobile使ってると、脆弱性が出たらしいので、試してみた - カイワレの大冒険 Third
Tweet 何かサービス利用している人向けというよりは、管理者向けかと思いますが、踏み台にされるといいものではないので、記しておきます。 （※もちろん被害あうのは両者です） 発端というか、僕が昨日見かけた記事はこちら。 https://github.com/jquery/jquery-mobile/pull/1789 このURLにサンプルコードも載っていますが、そのコードをブラウザ上で実行するとアラート画面が出ることが分かるかと思います。 このように任意のコードを実行できるようなことをざっくり言ってXSS（クロスサイトスクリプティング）と言います。定義とか詳しい説明はググればやまほどあるので、調べて見てください。個人的に何より困るのが任意のJSのコードが実行されてしまう、ということです。 条件は？ 今回発見されたのは「過去のjQuery Mobile」のバージョンということですが、2011
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
jQuery MobileにXSSの脆弱性が見つかったのでアルファ版からベータ版に変更する際の注意点
jQuery MobileにXSSの脆弱性が見つかったのでアルファ版からベータ版に変更する際の注意点 jQuery Mobileのベータ版が公開されました。夏ぐらいに正式版がリリースされるらしく待ち遠しいですね。 ただ、残念なことにこれまで公開されていたjQuery Mobileのアルファ版にXSSの脆弱性が見つかった為、これまでにjQuery Mobileで作成されたサイトは早急にベータ版にアップデートする必要があります。 アルファ版の挙動を維持したままベータ版にアップデートするには次のように記述する必要があります。 <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="http:/
CakePHP + jQuery Mobileでの注意点 - すたら日記
リンクとフォーム送信後のページ遷移にAjaxを使わない やるべきこと下記のように、jQueryライブラリを読み込んだ後、 jQuery Mobileを読み込む前に、初期値を設定すべし。 <script src="jquery.js"></script> <script> $(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; }); </script> <script src="jquery.mobile.js"></script> その理由 デフォルトでは、外部ページへのリンクがクリックされると、フレームワークはリンクを自前でパースし、遷移先をAjaxリクエスト(Hijax)で取得し、ロード中アイコンを表示します。【引用】ページ遷移 - jQuery Mobile 1.0b1 日本語リファレンス h
知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう | Lab by engineering@dwango.jp
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mochizblog.heroku.com/31
jQuery Mobileファーストステップガイド | Adobe Developer Connection
screw-axis.com
hima-j.in
jquery.mobile.structure.css - hokaccha memo
