「sandbox」(2008/10/21 (火) 16:39:38) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
* sandbox
** HTML編集
#html2(){{{ }}}
- tableタグを書いてみる
#html2(){{{
<table border="1" id="myData">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>num1</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>鈴木</td>
<td>10</td>
</tr>
<tr>
<td>0002</td>
<td>佐藤</td>
<td>20</td>
</tr>
<tr>
<td>0003</td>
<td>小林</td>
<td>30</td>
</tr>
<tr>
<td>0004</td>
<td>中村</td>
<td>40</td>
</tr>
<tr>
<td>0005</td>
<td>高橋</td>
<td>50</td>
</tr>
</tbody>
</table>
}}}
** javascript編集
#javascript(){{<script type="text/javascript"><!-- //--></script>}}
- 上記テーブルデータを使用してYahooUIのデータテーブルとチャートを使ってみる。
-- DataTable
#html2(){{{
<div id="myDataTable"></div>
}}}
-- Chart
#html2(){{{
<div id="myChart" style="width:300px;"></div>
}}}
#javascript(){{
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/charts/charts-experimental-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js"></script>
<!-- ここでは適用されない -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady(init);
function init() {
var cssLink = document.createElement("link");
cssLink.type = "text/css";
cssLink.rel = "stytlesheet";
cssLink.href = "http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css";
document.getElementsByTagName("head")[0].appendChild(cssLink);
document.body.className = "yui-skin-sam";
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("myData"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [
"id",
"name",
{key:"num1",parser:"number"}]
};
var myColumnDefs = [
{key:"id",label:"ID"},
{key:"name",label:"氏名"},
{key:"num1",parser:"number"}
];
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
var myChart = new YAHOO.widget.ColumnChart( "myChart", myDataSource, {xField: "name", yField: "num1"});
}
-->
</script>
}}
** ソースコードの表示
#highlight(linenumber,javascript){{ }}
- javascriptの色をつけてみる
#highlight(linenumber,javascript){{
//チャート用swf設定
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
//データ作成
var myData = [{name:"鎌田", num1:10},
{name:"福田", num1:20},
{name:"城", num1:30},
{name:"吉田", num1:40}
];
//データソース作成
var myDataSource = new YAHOO.util.DataSource(myData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: [
"name",
"num1"
]
};
//チャート作成
var myChart = new YAHOO.widget.ColumnChart("myChart", myDataSource, {xField: "name", yField: "num1"});
}}
#comment()
* sandbox
** HTML編集
#html2(){{{ }}}
- tableタグを書いてみる
#html2(){{{
<table border="1" id="myData">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>num1</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>鈴木</td>
<td>10</td>
</tr>
<tr>
<td>0002</td>
<td>佐藤</td>
<td>20</td>
</tr>
<tr>
<td>0003</td>
<td>小林</td>
<td>30</td>
</tr>
<tr>
<td>0004</td>
<td>中村</td>
<td>40</td>
</tr>
<tr>
<td>0005</td>
<td>高橋</td>
<td>50</td>
</tr>
</tbody>
</table>
}}}
** javascript編集
#javascript(){{<script type="text/javascript"><!-- //--></script>}}
- 上記テーブルデータを使用してYahooUIのデータテーブルとチャートを使ってみる。
-- DataTable
#html2(){{{
<div id="myDataTable"></div>
}}}
-- Chart
#html2(){{{
<div id="myChart" style="width:300px;"></div>
}}}
#javascript(){{
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/charts/charts-experimental-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js"></script>
<!-- ここでは適用されない -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady(init);
function init() {
var cssLink = document.createElement("link");
cssLink.type = "text/css";
cssLink.rel = "stylesheet";
cssLink.href = "http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css";
document.getElementsByTagName("head")[0].appendChild(cssLink);
document.body.className = "yui-skin-sam";
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("myData"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [
"id",
"name",
{key:"num1",parser:"number"}]
};
var myColumnDefs = [
{key:"id",label:"ID"},
{key:"name",label:"氏名"},
{key:"num1",parser:"number"}
];
var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
var myChart = new YAHOO.widget.ColumnChart( "myChart", myDataSource, {xField: "name", yField: "num1"});
}
-->
</script>
}}
** ソースコードの表示
#highlight(linenumber,javascript){{ }}
- javascriptの色をつけてみる
#highlight(linenumber,javascript){{
//チャート用swf設定
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
//データ作成
var myData = [{name:"鎌田", num1:10},
{name:"福田", num1:20},
{name:"城", num1:30},
{name:"吉田", num1:40}
];
//データソース作成
var myDataSource = new YAHOO.util.DataSource(myData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: [
"name",
"num1"
]
};
//チャート作成
var myChart = new YAHOO.widget.ColumnChart("myChart", myDataSource, {xField: "name", yField: "num1"});
}}
#comment()
表示オプション
横に並べて表示：
変化行の前後のみ表示：
