jQuery
気がついたら3月もなかばでしたね。2月は一度もブログを書いてなかったことになるけど、気にしないよ。 さて、タイムライン系の画面でよくある画面が一番下までスクロールされたら次のページを読み込む的なものってあるよね。jQueryでさっくり書いてみたので…
昨日は、jQueryRotate2.2でIE対応をしてみたのですが、やりたいことによっては実現できないこともあるようで。 色々と原因を探ってみましたが、よーわからんと言うわけで、調べてみると、Issue登録された次のようなものがありました。 Issue 31 - jqueryrota…
jQueryRotate2.2を使ってみているのですが、IE7で確認しようとしたらエラーが出ました。 parentNodeなんて無いよ!って言うエラーですね。 Jquery Rotate Plugin IE7 - Stack Overflow StackOverFlowに答えがありましたので、貼り付けて起きます。Issueにも…
を読みました。実践 jQuery Mobile作者: Maximiliano Firtman,白石俊平(監訳),牧野聡出版社/メーカー: オライリージャパン発売日: 2013/01/19メディア: 大型本購入: 1人 クリック: 1回この商品を含むブログ (5件) を見る世間ではjQuery MobileのVersion1.3が…
画像を回転させようと思って、jQueryのプラグインを探してみたらあったのでやってみました。 jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting 特に解説の必要はないのですが、border-radius: 50…
こんなん出来るの?って聞かれたので、やってみた。 グラフを重ねて、山とか谷とかのパターンを視覚的に比較できないですかね?と。やってみればいいじゃないか。 使ったものは、jQuery UIのDraggableと、jqPlotの折れ線グラフです。CSSで透かして上げること…
jQueryMobileは便利ですよね。 少しのマークアップで、モバイルっぽいサイトが作れます。そのままでは簡素過ぎてつまらないといえばつまらないですけど。jQueryMobileでは、ボタン等にアイコンを設定することが出来るのですが、デフォルトにあるものが少ない…
ul liの要素で先頭だけ表示させておいて、クリックすると他の要素が次々にSlideDownで表示させるようなjQueryのプラグインを作ってみました。 本体のコードはこちら。 ;(function($) { $.fn.slideSequential = (function() { return function(option) { var …
jQueryMobileのダイアログの閉じるボタンのテキスト変更 - @thorikiriのてょりっき 前回のVersionは1.1.1で、先日1.2.0がリリースされましたが、変更出来ないようです。 4654行目のiconpos='notext'の部分を変更してもらえれば変更出来ます。 headerCloseBut…
http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/ 詳細は読んでいただくとして、気になったところをメモしておこうかなと思いますよ。 新しいポップアップウィジェット ポップアップのウィジェットが追加されたようです。 こ…
左上に閉じるボタンがありますよね。 でもこれって小さいので、テキストをつけたり、アイコンを変更したいなぁと思うじゃないですか。思いません?思いますよね。 色々がんばって見たのですが、簡単には出来ない。 公式のドキュメント(jQuery Mobile Docs -…
独自イベントを作って、ライブラリ側で発火させて、アプリ側ではそこでハンドリングしたくなるよね。 それをやってみようってことですね。 パターン1:イベントオブジェクトにパラメータをセットする eventsample.js(ライブラリ側) (function($) { // ボ…
iQueryMobileを使って2カラム、(2ペイン)をデザインしてきました。 単純な画面遷移まではそれなりに実装出来たかと思いますので、ひとまずこれでまとめて、終わりとしたいと思います。 その後も色々と変更していますが、githubに上げました。まだまだ発展…
前回まででメニューの画面遷移が実装出来たので、今度はコンテンツ部分の実装に入ります。 こちらは、ほぼメニューと同じですね。面白みが無いです。 コンテンツを読み込む コンテンツを読み込む処理ですが、メニュー側でボタンを押された場合は戻るボタンは…
前回はメニューの画面遷移を実装しました。しかしながら遷移しただけで戻れないと言う致命的な欠陥がありますので、戻るボタンを実装しようと思います。 jQueryMobileでは画面遷移をURLのハッシュで管理していますね。でも2カラムだとどうしようもないので、…
前回までで基本的なデザインは出来上がりました。と言うことにしておきましょう。 次は画面遷移をしたいと思うのですが、jQueryMobileのデフォルトの挙動ではメニュー部分だけとか、コンテンツ部分だけを画面遷移させることが出来ないですね。 という訳で、…
さて、2カラムのデザイン部分だけ作りましたが、横向きだけの実装になっています。 そこで、今回は横向きと縦向きの表示を変えてみたいと思います。 とは言うもの、MediaQuery?MediaQueries?で出来ますので、CSSだけを編集しましょう。 sample.css div.ipa…
前回はレイアウトを組むところまででした。今回は組んだレイアウトの中にコンテンツを入れていこうとおもいます。 メニューを作る まずは、jQueryMobileのListViewを入れます。 sample.html <ul data-role="listview"> <li><a href="#">Menu-1</a></li> </ul> これはこまった、スクロール出来ませんし、ヘッダは固定…
なるべくネイティブ感を出したいので、jQueryMobileを使っているのですが、現状では2カラムのデザインってあんまり無いようなんですよね。 参考にしているデザインはiPadの設定アプリの画面の感じです。 jQueryMobileのバージョンは、1.1.1です。 骨組みを作…
Documentation | jQuery Validation Plugin jQueryのプラグインでValidationプラグインがあります。クライアントチェックをする上で非常に便利なプラグインですね。 しかし、jQueryでAjaxなアプリを作っていると、画面遷移をしないようにするために、formタ…
ググったら、日本語の情報はiframe使うと良いよ!って書いてありまして、で、具体的にどうすんねん?と。 英語のページを見てったらコードが書いてありましたが、ココにAdsenseのコードを書きなねとしか書いてなかったので、試行錯誤しながらやってみた。 で…
Ajax Style Loading Animation in CSS3 ( no Images ) - nikesh.me と言うものがあって、使ってみました。他にもCSS Load.net - Loading CSS spinners and bars generator for AJAX & JQueryここでスタイルとか設定出来たりするみたいですね。すばらしい。 …
pagebeforecreateのイベントで、getJSONしてから、listview("refresh")してたんですが、getJSONの結果をlocalStorageに突っ込んで、次回以降はlocalStorageから取れば良いよね。 と思ってた時期が僕にもありました。いや、今もそう思ってるんですが、ハマっ…
jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)作者: 西畑一馬,鍋坂理恵出版社/メーカー: アスキー・メディアワークス発売日: 2012/02/02メディア: 大型本購入: 7人 クリック: 185回この商品を含むブログ (11件) を見るを読んだよ。 …
sessionStorageとlocalStorageって便利なんだけど、ちょっと不便なところがあるので、もっと便利にしてみようと思って作りましたよ。 不便な点は次の通り 有効期限の設定をすることが出来ない 暗号化・復号化をしてから出し入れしないとダメ 文字列形式でし…
を読んだよ。結構読み飛ばしたかも。 結構jQuery1.2とか1.3での知識で止まってるところがあったので、新鮮でした。 Ajax関連で言うと、jqXHRとか知らなくて、古い方法で結構実装してたけど、すごく便利になってるんだなって思いました。 イベント関連でも、b…
jQueryでURLのハッシュ(hogehoge.html#fugafugaの#fugafugaの部分)が変わった時に動作するイベントを設定したかったんですけど、無いよね? なので、プラグインを作ってみました。 これを使えばハッシュが変わったタイミングでAjax通信して中身を書き換えら…
jQueryのPOSTでJSON形式のリクエストを送信した場合の挙動ですが、連想配列の形式でリクエストされるようです。 例えば、 $.post("url", json, function() {alert("success");}, "JSON"); としたときにJSONが、 json = { "data" : { "id" : "001", "name" : …