jQuery とか jQuery Mobile とか全然わかんないせいでめっちゃはまった・・・。 ネット上を検索すると、有益な情報がたくさん出てくるんですけど、jQuery Mobile の公式通りに <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> とすると、ネット上の情報は使えません・・・。なぜなら、jQuery のバージョンが上がり、関数が
こんにちは。 jQueryMobileの1.2でwebアプリの開発を行なっているときに、 独自のJavaScriptを書く必要があったので、jQueryのように という風に書けばいいのかと思ったら、見事にハマったので対応策をメモします。 jQueryMobileのページ初期化について ページ初期化以外の説明についてはこのエントリでは省略します。 重要：$(document).ready()ではなく pageinit() を使う jQueryを学んで最初に覚えることは、コードを $(document).ready() に記述することでしょう。 DOMが読み込まれ使用可能になると、この関数は真っ先に呼ばれます。しかしながらjQuery Mobileにおいては、Ajaxによって各ページが読み込まれてコンテンツがDOMに追加されます。 そのため、DOMの ready ハンドラはサイトの最初のページ
jQuery は機能が豊富なので、しばらく使わないと忘れてしまう。 ここでは、jQuery と配列の関係に絞って目的別に逆引きできるようにしておく。 配列から jQuery オブジェクトを作成 $ 関数に渡せばOK $([1,2,3]) NodeList のような配列っぽいものを渡しても解釈してくれる。 $(document.getElementsByTagName("div")) // $("div") と同じ ※内部的には setArray メソッドが呼ばれてるが、外から使うことは稀。 jQuery オブジェクトを配列のように扱う 要素数を取得する length プロパティを使えばOK。 $("div").length // document.getElementsByTagName("div").length と同じ jQuery のメソッドを使って操作する限りは、適切に lengt
jQuery Mobileと動的なページ生成 jQuery Mobileは、デフォルトでリンクがクリックされた際の動作を乗っ取り、ページを動的にDOMへ挿入するようにしています。あるいは手動で $.mobile.changePage() 関数が呼ばれた際も同様です。これはサーバ側でHTMLを出力する場合には非常に優れていますが、時にはJSONなどで取得したデータをクライアント側でジェネレートしたいような場合もあるでしょう。それは通信量やパフォーマンス的な問題かもしれませんし、連携するサービスのフォーマットによる問題かもしれません。 クライアント側でページのマークアップを作成する必要がある場合、$.mobile.changePage()関数による通知の仕組みについて知っておくことが重要です。それによって、ナビゲーションの流れの適切なタイミングで処理をフックすることが出来るようになります。 c
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
jQuery Mobileをつかってスマートフォン対応をしたときにはまったこと。 前提jQuery Mobileのcss、javaScriptは以下のように利用 cssはダウンロードし自分のサーバにアップjavaScriptはCDNを利用また、自前としては 一部、自前のcssを用意設定用の自前のjavaScriptを用意上記から以下のような感じになってます。 <link href="/jquery/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> <link href="/css/jquery-custom.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <
今回調べたjQuery Mobileのヘッダに関する覚え書き。ヘッダ(data-role=”header”内)に’a要素’を記述すると自動的にボタンが生成される。リンクが1つのときはヘッダの左端にボタンが、2つ目のリンクに対しては右端にボタンが配置される。 戻るボタンを実装する <!-- HTML --> <div data-role="header"> <h1>header title</h1> <a href="" data-rel="back">Back</a> <!-- hrefの内容は無視される --> </div> ‘data-rel=”back”‘を指定すると、hrefの内容に関わらず「戻る」ボタンが生成される。ラベルを省略すると’Back’が表示される。 ホームボタンを実装する <div data-role="header"> <h1>header title</h1> <
■やりたいこと 検索フォームで入力し、結果をcheckboxのリストとして追加 jQueryMobileのスタイルも反映したい！ ■対策 検索の結果をcheckboxリストとしてlistviewに表示、checkboxを画面に追加する場合、 jQueryMobileのスタイルがうまく反映されず、標準UIのまま表示されました。 しかも、タップしてチェックが付く範囲がlabelになってしまうため、 一見ボタンがデバイスの横幅いっぱいに広がっていてもラベルの表示部分でしかチェックしてくれませんでした。 そういう時にcreateイベントをtriggerすると、初期化を行ってくれます。 ・HTML ... <div id="checkList" data-role="fieldcontain"></div> ... ・JavaScript var str += '<fieldset data-rol
jQuery MobileでマークアップHTMLを動的に作成するときに使うメソッドまとめ
普通jQuery Mobileを利用するときは、枠はhtmlで書きます。 例：JQueryのlistviewの使い方 <ul data-role="listview"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul> なかなか必要に迫られないかもしれないけど、上記のコードをjavascriptで動的に作成したいときは以下のようにします。 ——————————————————————– 本ブログは移転しました。記事の全文はこちら↓↓↓ http://www.infoscoop.org/blogjp/2013/02/12/jquery-mobileでマークアップhtmlを動的に作成するときに使う/ ———
※この記事は2013年6月26日に執筆された記事です。現在は仕様が異なる可能性があります。 モバイル用WEBアプリケーションやスマートフォンサイト制作用のフレームワーク「jQuery Mobile」 手軽にリッチなコンテンツを構築できる事で人気のフレームワークですが、ページ遷移の仕様についていくつか注意点があります。 今回はその問題点や改善方法をご紹介します。 目次 jQuery Mobileの特徴 Ajaxによるページ遷移の問題点 一般的なAjax無効化の設定 ブラウザ「戻る」操作によるページ遷移の不具合と対処方法 ダイアログの併用について jQuery Mobileの特徴 スマートフォン向けのフレームワークは数多く存在していますが、jQuery Mobileの大きな特徴としては以下が挙げられます。 クロスプラットフォーム対応（iOS、Android、Windows Phone、Blac
jQuery MobileでAjaxで取得したページでスタイルシートを反映させる リクリのセミナーでjQuery MobileでAjaxで取得したページのスタイルシートが反映されないとの質問を受けました。 イメージとしてはこんな感じだと思います。 index1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2
I am using latest jQuery for jQuery.masonry its throwing following error: on line 47 in jquery-1.9.1.min.js TypeError: $.event.handle is undefined if any one is having same error ? MyCode: <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/jquery-1.9.1.min.js"></script> <script language="javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"></script> <scri
The latest version 1.2 of the jQuery Migrate plugin is here! It can be used with either jQuery 1.9 or jQuery 2.0 to provide diagnostics and remedial help for plugins that haven’t been updated since jQuery 1.9 was released earlier this year. Believe me, this plugin can really make your life easier; if you’ve been afraid of upgrading jQuery, this plugin can cure that irrational software phobia. The
$.event.handle() 【 ver1.2.2では可読性を高める変更以外の変更なし 】 解読 このメソッドはあるイベントが発生した時に、それに対応するイベントハンドラー関数をイベントハンドラーリストから選択／抽出し、かつ実行させるメソッドです。なお、このメソッドの起動は次のように複雑な過程を辿ります。 イベント発生時には、(1) addEventListner() メソッド 又は attachEvent() メソッドから add() メソッドによって定義された地域変数 handle が呼び出され、(2) この handle に data()メソッドによって代入された関数（ jQuery.event.handle.apply(element,auguments)……1620行 ）が起動され、そこから jQuery.event.handle() メソッドが呼び出されます。 2025:
jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。 しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにajaxを無効にする方法というのは、以下のようなものを指します。 a要素やform要素に data-ajax="false" を指定する。 グローバル設定で $.mobile.ajaxEnabled = false; を設定する。 もちろん、このajaxの挙動を理解した上で、ajaxを無効にするという方法を取ることは何ら問題ないのですが、とにかく困ったらajaxを無効にするということが多いようです。 具体的には以下のようなケースが挙げられるで
jQuery Mobileに待ちに待ったベータ版が登場しました。ここでは自分でも後から使えるjQuery Mobileの設定・構築メモをエントリしていこうと思っています。 最初はAJAXの無効化について。あちこちのサイトでjQeury MobileではじめにやることにAJAXの無効化が挙げられています。デフォルトで有効になっているjQuery MobileのAJAX機能は、リンクやフォームサブミットのアクションで対象のページを現在のページ内に読み込みます。一見便利そうでスマートフォンらしく見えますが、読み込んだページのURLは#で繋がれ実際にはページ遷移しないため、画像パスの設計やPHPなどの動的サイト作成時は煩雑になりがちです。 <script language="JavaScript"> // ajax の無効化 $.mobile.ajaxEnabled = false; </scri
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
