play-Google: 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>

■　編集用リンク

play-Google

ページ

2011年3月7日月曜日

iGoogle Gadget -8