30042012 jqm

jQueryMobileのListviewでテキストを折り返す

ググるとcssを編集するパターンが多いような気がするが、Google Ajax APIを使っているのでどうしたもんかと。

$list.find('.ui-li, .ui-btn-text, a.ui-link-inherit').css('white-space', 'normal');

参考

ProductName jQueryクックブック
jQuery Community Experts
オライリージャパン / 3780円 ( 2010-08-18 )


20032012 jqm

jQuery Mobileを読んだ

@ishisakaに速攻読み終わるって言われたので、暇な時にでも読むかと積んであったが、読み始めたらさくっと読み終わった。

実際手を動かすところは6章しかなかったし、一通り読めば一通りjQuery Mobileを使えるようになると思う。その後はドキュメント読みながら書いていけばいいのかな。

実際書いてみるとデバッグがめんどくさかったが、テストはQUnit使えばいいのかね？あとSeleniumかなぁ。

jQuery Mobileアプリケーション開発のアプローチ

  1. アプリケーションの施策としてシンプルなページ群を用意します。これがプロタイプの作成につながります。
  2. ページとデータの提供元との間を接続します
  3. 段階的にアプリケーションを改善していきます。結果の表示を修正し、機能を追加し、バグフィックスを行います。

1332235293

jadeで書きなおした6-4のjQuery Mobileで作ったtwitterアプリ。

モバイル用のUIをちゃっちゃと用意するのにJQueryを使うのは良い選択肢だと思う。

ProductName jQuery Mobile
Jon Reid
オライリージャパン / 1995円 ( 2011-12-22 )


19032012 jqm

jQuery Mobileがなかなか面白い

jadeで書いてる。data-*のカスタム属性で指定すればアイコンなんかも勝手に表示されて、さくっと作るのに向いてそうな感じ。

1332070152

!!! 5
html
  head
    title jqm test
    link(rel="stylesheet", href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css")
    script(src="http://code.jquery.com/jquery-1.7.1.min.js")
    script(src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js")
    meta(name="viewport", content="width=device-width, initial-scale=1")
  body
    section#page1(data-role="page")
      header(data-role="header")
        h1 jQuery Mobile
      .content(data-role="content")
        h3 さまざまなアイコン
        div(data-role="controlgroup", data-type="horizontal", data-inline="true")
          a(href="#", data-role="button", data-icon="home", data-iconpos="left") ホーム
          a(href="#", data-role="button", data-icon="gear", data-iconpos="left") 設定
          a(href="#", data-role="button", data-icon="search", data-iconpos="left") 検索
      footer(data-role="footer")
        h1 K'zfm

ProductName jQuery Mobile
Jon Reid
オライリージャパン / 1995円 ( 2011-12-22 )