@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQuery

画面が一番下までスクロールされたら処理をする

気がついたら3月もなかばでしたね。2月は一度もブログを書いてなかったことになるけど、気にしないよ。 さて、タイムライン系の画面でよくある画面が一番下までスクロールされたら次のページを読み込む的なものってあるよね。jQueryでさっくり書いてみたので…

jQueryRotate3を使ってみる

昨日は、jQueryRotate2.2でIE対応をしてみたのですが、やりたいことによっては実現できないこともあるようで。 色々と原因を探ってみましたが、よーわからんと言うわけで、調べてみると、Issue登録された次のようなものがありました。 Issue 31 - jqueryrota…

jQueryRotate2.2をIE7で使う

jQueryRotate2.2を使ってみているのですが、IE7で確認しようとしたらエラーが出ました。 parentNodeなんて無いよ!って言うエラーですね。 Jquery Rotate Plugin IE7 - Stack Overflow StackOverFlowに答えがありましたので、貼り付けて起きます。Issueにも…

実践jQuery Mobile

を読みました。実践 jQuery Mobile作者: Maximiliano Firtman,白石俊平(監訳),牧野聡出版社/メーカー: オライリージャパン発売日: 2013/01/19メディア: 大型本購入: 1人 クリック: 1回この商品を含むブログ (5件) を見る世間ではjQuery MobileのVersion1.3が…

jQueryRotateで画像を回転させる

画像を回転させようと思って、jQueryのプラグインを探してみたらあったのでやってみました。 jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting 特に解説の必要はないのですが、border-radius: 50…

jQuery UIとjqPlotでグラフを重ねて比較してみる

こんなん出来るの?って聞かれたので、やってみた。 グラフを重ねて、山とか谷とかのパターンを視覚的に比較できないですかね?と。やってみればいいじゃないか。 使ったものは、jQuery UIのDraggableと、jqPlotの折れ線グラフです。CSSで透かして上げること…

jQuery UIのアイコンをjQuery Mobileで使う

jQueryMobileは便利ですよね。 少しのマークアップで、モバイルっぽいサイトが作れます。そのままでは簡素過ぎてつまらないといえばつまらないですけど。jQueryMobileでは、ボタン等にアイコンを設定することが出来るのですが、デフォルトにあるものが少ない…

要素を順番にSlideDown, SlideUpするjQueryプラグインを作ってみた

ul liの要素で先頭だけ表示させておいて、クリックすると他の要素が次々にSlideDownで表示させるようなjQueryのプラグインを作ってみました。 本体のコードはこちら。 ;(function($) { $.fn.slideSequential = (function() { return function(option) { var …

jQueryMobileのダイアログの閉じるボタンのテキストが1.2でも変更出来なかった

jQueryMobileのダイアログの閉じるボタンのテキスト変更 - @thorikiriのてょりっき 前回のVersionは1.1.1で、先日1.2.0がリリースされましたが、変更出来ないようです。 4654行目のiconpos='notext'の部分を変更してもらえれば変更出来ます。 headerCloseBut…

jQueryMobile 1.2の主な変更点を簡単に

http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/ 詳細は読んでいただくとして、気になったところをメモしておこうかなと思いますよ。 新しいポップアップウィジェット ポップアップのウィジェットが追加されたようです。 こ…

jQueryMobileのダイアログの閉じるボタンのテキスト変更

左上に閉じるボタンがありますよね。 でもこれって小さいので、テキストをつけたり、アイコンを変更したいなぁと思うじゃないですか。思いません?思いますよね。 色々がんばって見たのですが、簡単には出来ない。 公式のドキュメント(jQuery Mobile Docs -…

jQueryで独自イベントを作るよ

独自イベントを作って、ライブラリ側で発火させて、アプリ側ではそこでハンドリングしたくなるよね。 それをやってみようってことですね。 パターン1:イベントオブジェクトにパラメータをセットする eventsample.js(ライブラリ側) (function($) { // ボ…

jQueryMobileでiPad向けの2カラムのWebページをデザインする まとめ

iQueryMobileを使って2カラム、(2ペイン)をデザインしてきました。 単純な画面遷移まではそれなりに実装出来たかと思いますので、ひとまずこれでまとめて、終わりとしたいと思います。 その後も色々と変更していますが、githubに上げました。まだまだ発展…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その6

前回まででメニューの画面遷移が実装出来たので、今度はコンテンツ部分の実装に入ります。 こちらは、ほぼメニューと同じですね。面白みが無いです。 コンテンツを読み込む コンテンツを読み込む処理ですが、メニュー側でボタンを押された場合は戻るボタンは…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その5

前回はメニューの画面遷移を実装しました。しかしながら遷移しただけで戻れないと言う致命的な欠陥がありますので、戻るボタンを実装しようと思います。 jQueryMobileでは画面遷移をURLのハッシュで管理していますね。でも2カラムだとどうしようもないので、…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その4

前回までで基本的なデザインは出来上がりました。と言うことにしておきましょう。 次は画面遷移をしたいと思うのですが、jQueryMobileのデフォルトの挙動ではメニュー部分だけとか、コンテンツ部分だけを画面遷移させることが出来ないですね。 という訳で、…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その3

さて、2カラムのデザイン部分だけ作りましたが、横向きだけの実装になっています。 そこで、今回は横向きと縦向きの表示を変えてみたいと思います。 とは言うもの、MediaQuery?MediaQueries?で出来ますので、CSSだけを編集しましょう。 sample.css div.ipa…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その2

前回はレイアウトを組むところまででした。今回は組んだレイアウトの中にコンテンツを入れていこうとおもいます。 メニューを作る まずは、jQueryMobileのListViewを入れます。 sample.html <ul data-role="listview"> <li><a href="#">Menu-1</a></li> </ul> これはこまった、スクロール出来ませんし、ヘッダは固定…

jQueryMobileでiPad向けの2カラムのWebページをデザインする その1

なるべくネイティブ感を出したいので、jQueryMobileを使っているのですが、現状では2カラムのデザインってあんまり無いようなんですよね。 参考にしているデザインはiPadの設定アプリの画面の感じです。 jQueryMobileのバージョンは、1.1.1です。 骨組みを作…

jQueryのValidationプラグインでformをサブミットしないようにする

Documentation | jQuery Validation Plugin jQueryのプラグインでValidationプラグインがあります。クライアントチェックをする上で非常に便利なプラグインですね。 しかし、jQueryでAjaxなアプリを作っていると、画面遷移をしないようにするために、formタ…

jQueryMobileでGoogle Adsenseを使う

ググったら、日本語の情報はiframe使うと良いよ!って書いてありまして、で、具体的にどうすんねん?と。 英語のページを見てったらコードが書いてありましたが、ココにAdsenseのコードを書きなねとしか書いてなかったので、試行錯誤しながらやってみた。 で…

Ajaxでロードしてる時のクルクルのあれをやってみた。

Ajax Style Loading Animation in CSS3 ( no Images ) - nikesh.me と言うものがあって、使ってみました。他にもCSS Load.net - Loading CSS spinners and bars generator for AJAX & JQueryここでスタイルとか設定出来たりするみたいですね。すばらしい。 …

jQueryMobileのpagebeforecreateでハマった

pagebeforecreateのイベントで、getJSONしてから、listview("refresh")してたんですが、getJSONの結果をlocalStorageに突っ込んで、次回以降はlocalStorageから取れば良いよね。 と思ってた時期が僕にもありました。いや、今もそう思ってるんですが、ハマっ…

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)作者: 西畑一馬,鍋坂理恵出版社/メーカー: アスキー・メディアワークス発売日: 2012/02/02メディア: 大型本購入: 7人 クリック: 185回この商品を含むブログ (11件) を見るを読んだよ。 …

jquery.storage.jsを作ってみた。

sessionStorageとlocalStorageって便利なんだけど、ちょっと不便なところがあるので、もっと便利にしてみようと思って作りましたよ。 不便な点は次の通り 有効期限の設定をすることが出来ない 暗号化・復号化をしてから出し入れしないとダメ 文字列形式でし…

jQuery本格入門 JavaScript開発・デザイン効率化の基礎から Ajax・QUnitまで

を読んだよ。結構読み飛ばしたかも。 結構jQuery1.2とか1.3での知識で止まってるところがあったので、新鮮でした。 Ajax関連で言うと、jqXHRとか知らなくて、古い方法で結構実装してたけど、すごく便利になってるんだなって思いました。 イベント関連でも、b…

jQueryでhashchangeイベントを設定する

jQueryでURLのハッシュ(hogehoge.html#fugafugaの#fugafugaの部分)が変わった時に動作するイベントを設定したかったんですけど、無いよね? なので、プラグインを作ってみました。 これを使えばハッシュが変わったタイミングでAjax通信して中身を書き換えら…

jQueryでJSON形式のリクエストが送信された場合の挙動

jQueryのPOSTでJSON形式のリクエストを送信した場合の挙動ですが、連想配列の形式でリクエストされるようです。 例えば、 $.post("url", json, function() {alert("success");}, "JSON"); としたときにJSONが、 json = { "data" : { "id" : "001", "name" : …