■ ガジェットの背景色をリストから選んで自由に設定できるようにします。
■ ユーザー設定 mycolor のデータ型は enum です。
■ サンプルです。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="ユーザー設定-Step-2" title_url="http://www5d.biglobe.ne.jp/~pog/" height="250" />
// ”title_url=”を指定すると、ガジェットトップに表示されるタイトル名に関連サイトへのリンクを設定できます。
<UserPref name="mycolor" display_name="Color" default_value="Yellow" datatype="enum" >
// ユーザー設定編集ボックス内のドロップダウン メニューに表示される選択肢を指定します。
<EnumValue value="Red" />
<EnumValue value="Aqua" />
<EnumValue value="Lime" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Orange" />
<EnumValue value="White" />
</UserPref>
<Content type="html">
<![CDATA[
<div style="text-align:left;font-size:13px;padding:10;" id="content_div">
【ステップ-5】
<script type="text/javascript">
var prefs = new gadgets.Prefs();
var element = document.getElementById('content_div');
element.style.height=250;
element.style.backgroundColor=prefs.getString("mycolor"); //背景色の設定
</script>
<p />
ここがお約束の Hello, world!です。
<p />
このガジェットは【ガジェットの作り方】をまとめています。
ここにはHTMやJavaScriptの記述ができます。
<p />
もちろん下のように画像の表示もOKです。
<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>
■ 編集用リンク
