ページ

2011年3月7日月曜日

iGoogle Gadget -8

■ ユーザーがカスタマイズできるようにする-4

■ ユーザーが任意の値リストを動的に入力できるようにします。

■ リストデータ型のユーザー設定は、実行時にユーザーから動的に入力される値の配列です。

■ ユーザー設定編集ボックスに値を入力すると、それらの値がリストに追加されます。

■ サンプルです。 


ガジェット上にリストの表示ができるようにします。 ちょっとしたToDoリストや買い物リストのメモとして使えます。
友人や家族と共有すれば利用法がさらに広がりそうです。




<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="ユーザー設定-Step-4"
            title_url="http://www5d.biglobe.ne.jp/~pog/" height="400" scrolling="true"/>
  <UserPref name="mylist" display_name="Add Terms" datatype="list" />
         // datatype="list" を使用して宣言

  <Content type="html">
  <![CDATA[
  <div id=content_div></div>

  <script type="text/javascript"> 
    var prefs = new gadgets.Prefs(); //ここはいつもの通り
    var terms = prefs.getArray("mylist"); //今回は配列になってます 
    var html = "";


    if (terms.length == 0)
    {
      html += "買い物リストを作ります。"; //未入力の場合のためのコメント
    }
    else {
      html += "【買い物リスト】:<p />";
      for (var i = 0; i < terms.length ; i++) {
        var term = (terms[i]);
        html += "<font size='2'>" + "* "+ term + " :" + "</font>";
      }
    }
    document.getElementById("content_div").innerHTML = html; 


  </script>

<div style="text-align:left;font-size:13px;padding:10;">
【ステップ-7】
<p />
【ガジェットの作り方 : ユーザー設定-4】

<p />
ガジェット上にリストの表示ができるようにします。
          ちょっとしたToDoリストや買い物リストのメモとして使えます。
<br />
友人や家族と共有すれば利用法がさらに広がりそうです。
<p />
このガジェットはiGoogle用ガジェットの作成方法をまとめています。
<p />
step1~step6までは下記のリンクで。
<p />
<p align="right" />
<a href="http://www5d.biglobe.ne.jp/~pog/" alt="Googleを追いかけろ!"
            title="Googleを追いかけろ!" target="_blank">
                 <img src="http://www5d.biglobe.ne.jp/~pog/img/gapps.png" border="0"></a>

</div>
  ]]>
  </Content>
</Module>

■ 編集用リンク