カテゴリー別アーカイブ: jQuery

jQuery MobileでマークアップHTMLを動的に作成するときに使うメソッドまとめ

| 2件の返信

普通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で動的に作成したいときは以下のようにします。

$('<ul/>')
 .attr("data-role","listview")
 .append($('<li><a href="acura.html">Acura</a><li/>')
 .append($('<li><a href="audi.html">Audi</a><li/>')
 .append($('<li><a href="bmw.html">BMW</a><li/>');

でもこれだけだと、CSSのスタイルが適用されません。
上記に加えてlistview()メソッドを呼ぶとスタイルが適用されます。

$('<ul/>')
 .attr("data-role","listview")
 .append($('<li><a href="acura.html">Acura</a><li/>')
 .append($('<li><a href="audi.html">Audi</a><li/>')
 .append($('<li><a href="bmw.html">BMW</a><li/>');
 .listview('refresh'); // <- ここ!

※2013/10/25追記
K.Ueda 様よりの情報で、listviewメソッドに引数refreshを入れるとエラーが出て動かなかったとのこと。
その場合は下記のように一旦引数なしでlistviewメソッドを読んでから続けて引数ありのlistviewメソッドを呼ぶと良いようです。

$('要素').listview().listview('refresh');

 

jquery mobileには上記のようなメソッドがいくつかあります。
結構公式ページでもその辺が全て一箇所でまとまってないので、まとめておきます。

あらゆる要素に対して

$('</div>').appendTo( ".ui-page" ).trigger( "create" ); // div 以外に対しても可

navbarに対して

公式ドキュメント内には使い方が載ってないのですが、できてしまいます。非公式なのかな。。

$('<div data-role="navbar"/>')
    .append($('<ul/>')
        .append($('<li><a href="a.html">One</a></li>'))
        .append($('<li><a href="b.html">Two</a></li>'))
    ).navbar(); // <- ここ!

select に対して

$("#selectfoo").selectmenu("refresh") ;

チェックボックスに対して

$("input[type='checkbox']").checkboxradio("refresh");

ラジオボタンに対して

$("input[type='radio']").checkboxradio("refresh");

スライダーに対して

$("input[type='range']").slider("refresh");

参考

http://jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.html

jQuery tablesorterプラグイン 現在のsortListを参照する

| コメントをどうぞ

jQueryのtablesorterプラグインは簡単なコーディングでHTMLのテーブルにソート機能を追加できる便利なプラグインです。

初期状態でソート順を指定するためにはsortListオプションを指定します。

$("#yourtableId").tablesorter({sortList: [[0,0]]});

上記の例では0列目を昇順でソートすることを意味します。
ではこのsortListオプションの現在の値を取得したい場合はどうすればよいでしょうか。

例えばAjax処理によりテーブルのデータが動的に更新される場合が考えられますが、その際現在のソート順を維持したままテーブルの更新を行う為には以下の様に現在のsortListが必要になります。

$("#yourtableId").trigger("update"); //データの更新

var sorting = [[0, 0]]; //現在のsortList
$("#yourtableId").trigger("sorton",  sorting}); //ソートの実行
 

しかし、どうも標準ではオプションを取得するためのファンクション等は用意されていないようです。

で、結局以下の様にsortEndイベントをバインドすることで現在のsortListオプションを参照することができるようになりました。

var currentSort;
$("#yourtableId").tablesorter({
    // initialization
}).bind("sortEnd",
        function(sorter) {
            currentSort = sorter.target.config.sortList;
        }
);

 

jQuery UIのCDNを利用するときのURLまとめ

| 2件の返信

jQuery UIをCDN経由で利用する場合のjs、cssファイルの指定方法のまとめです。
まずは結論です。以下のようにURLを記述することで、それぞれのjs、cssファイルを読み込むことができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/i18n/jquery-ui-i18n.min.js"></script>

ここから、ソースのサンプルを使いながら上記について説明します。

jQuery UIのCDNについて

今回はすべてGoogleのCDN(Libraries API)を使っています。
https://developers.google.com/speed/libraries/devguide?hl=ja#jquery

他にもjQueryとMicrosfoftから提供されています。
jQuery: http://code.jquery.com/
Microsoft: http://www.asp.net/ajaxlibrary/cdn.ashx

jQuery UIのDatepickerを使って日本語でカレンダーを表示する

jQuery UIをCDNから読み込んで、Datepickerを動かしてみます。
ソースは以下です。jQueryとjQuery UIのライブラリを読み込んでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery UI - Datepicker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
    <script>
        $(function(){
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
    <div>
        <label for="datepicker">Datepicker</label>
        <input id="datepicker" type="text">
    </div>
</body>
</html>

カレンダーを表示することができました。

カレンダーのテーマを変える

下記サイトの左側のThemeRoller内のGalleryタブで、テーマの一覧を確認することができます。
http://jqueryui.com/themeroller/

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css

URLの ui-lightness の部分を利用したいテーマに置き換えます。
置き換える際に、テーマの名前の大文字は小文字に、スペースはハイフンに変換してください。
例)Ui lightness → ui-lightness

8行目のURLを以下のように書き換えて、Ui darknessのテーマのカレンダーを表示することができました。
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-darkness/jquery-ui.css

カレンダーを日本語で表示する

下記のデモで、日本語のカレンダーを表示することができます。

jQuery UIのデモ
http://jqueryui.com/demos/datepicker/#localization

これを実現するためには、i18nのjsファイルの読み込みが必要でした。
下記のURLにi18nのjsファイルがあります。
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/i18n/jquery-ui-i18n.min.js

サンプルソースに9行目と12行目を追記しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery UI - Datepicker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-darkness/jquery-ui.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>
    <script>
        $(function(){
            $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
    <div>
        <label for="datepicker">Datepicker</label>
        <input id="datepicker" type="text">
    </div>
</body>
</html>

日本語でカレンダーを表示できました。

おまけ

Googleでは下記のようにURLを指定することで、バージョン1台の最新版のjsファイルを読み込むことができます。
これにより、ライブラリのバージョンが新しくなった場合でも自動的に、最新版を参照することができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>