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

jQueryMobileは便利ですよね。
少しのマークアップで、モバイルっぽいサイトが作れます。そのままでは簡素過ぎてつまらないといえばつまらないですけど。jQueryMobileでは、ボタン等にアイコンを設定することが出来るのですが、デフォルトにあるものが少ないです。アイコンファイルとCSSを書けば、カスタムのアイコンを定義することは可能ですが、予めあると便利と言えば便利ですね。
一方で、jQueru UIには、豊富なアイコンがあらかじめ用意されていますので、これを使えるようにしてみました。基本的な使い方は簡単で、data-iconを指定すれば良いです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1, user-scalable=no" />
    <title>jQuery UI アイコンを使う</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css"></link>
    <link rel="stylesheet" href="css/jquery.ui.icons.css"/>
    <script type="text/javascript" src="js/jquery-1.8.1.min.js" ></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
  </head>
  <body>
    <section data-role="page">
      <header data-role="header">
        <h1>jQuery UI Icons for jQuery Mobile</h1>
      </header>
      <div data-role="content">
        <div>
          <div>元になる画像</div>
          <img src="css/images/ui-icons_256x240.png" alt="css/images/ui-icons_256x240.png" />
        </div>
        <div class="ui-grid-b">
          <div class="ui-block-a">
            <div>1段目</div>
            <a href="#" data-role="button" data-icon="carat-1-n">data-icon="carat-1-n"</a>
            <a href="#" data-role="button" data-icon="carat-1-ne">data-icon="carat-1-ne</a>
            <a href="#" data-role="button" data-icon="carat-1-e">data-icon="carat-1-e"</a>
            <a href="#" data-role="button" data-icon="carat-1-se">data-icon="carat-1-se"</a>
            <a href="#" data-role="button" data-icon="carat-1-s">data-icon="carat-1-s"</a>
            <a href="#" data-role="button" data-icon="carat-1-sw">data-icon="carat-1-sw"</a>
            <a href="#" data-role="button" data-icon="carat-1-w">data-icon="carat-1-w"</a>
            <a href="#" data-role="button" data-icon="carat-1-nw">data-icon="carat-1-nw"</a>
            <a href="#" data-role="button" data-icon="carat-2-n-s">data-icon="carat-2-n-s"</a>
            <a href="#" data-role="button" data-icon="carat-2-e-w">data-icon="carat-2-e-w"</a>
          </div>
          <div class="ui-block-b">
            <div>2段目</div>
            <a href="#" data-role="button" data-icon="triangle-1-n">data-icon="triangle-1-n"</a>
            <a href="#" data-role="button" data-icon="triangle-1-ne">data-icon="triangle-1-ne"</a>
            <a href="#" data-role="button" data-icon="triangle-1-e">data-icon="triangle-1-e"</a>
            <a href="#" data-role="button" data-icon="triangle-1-se">data-icon="triangle-1-se"</a>
            <a href="#" data-role="button" data-icon="triangle-1-s">data-icon="triangle-1-s"</a>
            <a href="#" data-role="button" data-icon="triangle-1-sw">data-icon="triangle-1-sw"</a>
            <a href="#" data-role="button" data-icon="triangle-1-w">data-icon="triangle-1-w"</a>
            <a href="#" data-role="button" data-icon="triangle-1-nw">data-icon="triangle-1-nw"</a>
            <a href="#" data-role="button" data-icon="triangle-2-n-s">data-icon="triangle-2-n-s"</a>
            <a href="#" data-role="button" data-icon="triangle-2-e-w">data-icon="triangle-2-e-w"</a>
          </div>
          <div class="ui-block-c">
            <div>3段目</div>
            <a href="#" data-role="button" data-icon="arrow-1-n">data-icon="arrow-1-n"</a>
            <a href="#" data-role="button" data-icon="arrow-1-ne">data-icon="arrow-1-ne"</a>
            <a href="#" data-role="button" data-icon="arrow-1-e">data-icon="arrow-1-ne"</a>
            <a href="#" data-role="button" data-icon="arrow-1-se">data-icon="arrow-1-se"</a>
            <a href="#" data-role="button" data-icon="arrow-1-s">data-icon="arrow-1-s"</a>
            <a href="#" data-role="button" data-icon="arrow-1-sw">data-icon="arrow-1-sw"</a>
            <a href="#" data-role="button" data-icon="arrow-1-w">data-icon="arrow-1-w"</a>
            <a href="#" data-role="button" data-icon="arrow-1-nw">data-icon="arrow-1-nw"</a>
            <a href="#" data-role="button" data-icon="arrow-2-n-s">data-icon="arrow-2-n-s"</a>
            <a href="#" data-role="button" data-icon="arrow-2-ne-sw">data-icon="arrow-2-ne-sw"</a>
            <a href="#" data-role="button" data-icon="arrow-2-e-w">data-icon="arrow-2-e-w"</a>
            <a href="#" data-role="button" data-icon="arrow-2-se-nw">data-icon="arrow-2-se-nw"</a>
            <a href="#" data-role="button" data-icon="arrowstop-1-n">data-icon="arrowstop-1-n"</a>
            <a href="#" data-role="button" data-icon="arrowstop-1-e">data-icon="arrowstop-1-e"</a>
            <a href="#" data-role="button" data-icon="arrowstop-1-s">data-icon="arrowstop-1-s"</a>
            <a href="#" data-role="button" data-icon="arrowstop-1-w">data-icon="arrowstop-1-w"</a>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>