2024
11
26
2010
11
12
google.visualization.Table もどきを作る。
google.visualization.Table は、HTML文書でテーブルを表示する時に、とても便利なツールです。今回は、google.visualization.Table に似せたコンストラクタを作成してみましょう。そうすることで、Google Visualization の世界が少しはわかるかもしれません。
Table コンストラクタの書式
table=new neta.vis.Table(container)
引数は、コンボボックスを配置する先の HTML 要素です。TABLE要素を生成します。実際に内容を配置するには draw メソッドを実行します。
draw メソッドの書式
table.draw(dataTable, options)
draw メソッドの引数
draw メソッドの第一引数は、後述する DataTable オブジェクトです。
draw メソッドの第二引数は、オプションオブジェクトです。現在、この指定は無効です。
DataTable コンストラクタの書式
dataTable=new neta.vis.DataTable(dataSource, version)
Google Visualization において DataTable は、取り扱うデータを格納するとともに、それらのデータの追加、変更、削除、取得に関するメソッドを提供するオブジェクトです。ここで真似る neta.vis.DataTable コンストラクタでは、メソッドは未定義です。カラムのデータは A プロパティに、行のデータは F プロパティに格納します。
第一引数は、データソースです。ここでは、次の書式のオブジェクトが有効です。
{cols:[
{type:'データタイプ'},
{type:'データタイプ'}
],
rows:[
{c:[{v:値},{v:値, f:表示値},
{c:[{v:値},{v:値, f:表示値}
]
}
第二引数は、Google Visualization のバージョンです。ここでは、無効です。なお、Google Visualization の現行バージョンは 0.6 です。
記述例
neta.addListener(function(){
var table = new neta.vis.Table(
document.getElementById('div20101112'));
var dat=document.getElementById('data20101112');
var d2=neta.toD2(dat.value||dat.innerHTML);
var dataSource=neta.vis.d2toDataSource(d2);
var dataTable=new neta.vis.DataTable(dataSource);
table.draw(dataTable);
});
ここにおいて、neta.addListener は、ロード時に実行する関数を登録する関数、neta.toD2 は、文字列を二次元配列に変換する関数です。また、neta.vis.d2toDataSource は、二次元配列から dataSource オブジェクトを生成する関数です。
実行例
次のデータは、id属性が"data20101112"であるPRE要素の内容です。
1,A 2,B 3,C
上記のデータを読みとって、次にテーブルとして表示しました。
ソースコード
if(!window['neta']['vis'])window['neta']['vis']={};
(function(){
var a=neta.vis;
var E=neta.elements;
// DataTable
a.DataTable=function(dataSource, version){
this.Rb=version||0.6;
this.A=dataSource.cols||[];
this.F=dataSource.rows||[];
this.Va=null;
}
// Table
a.Table=function(container){
this.container=container||document.body;
this.element=E.element('table');
var self=this;
self.draw=function(dataTable,options){
options={};//undefined now
self.element.innerHTML='';
self.element.thead=E.element('thead');
self.element.thead.tr=E.element('tr');
for(var j=0;j<dataTable.A.length;j++){
var th=E.element('td',{
innerHTML:dataTable.A[j].label?dataTable.A[j].label:
''});
self.element.thead.tr.append(th);
}
self.element.thead.append(self.element.thead.tr);
self.element.tbody=E.element('tbody');
for(var i=0;i<dataTable.F.length;i++){
var tr=E.element('tr');
for(var j=0;j<dataTable.F[i].c.length;j++){
var td=E.element('td',{
innerHTML:dataTable.F[i].c[j].f?dataTable.F[i].c[j].f:
dataTable.F[i].c[j].v});
tr.append(td);
}
self.element.tbody.append(tr);
}
self.element.append([self.element.thead,self.element.tbody]);
self.container.appendChild(self.element);
}
}
a.d2toDataSource=function(d2){
var data={cols:[],rows:[]};
var len=d2[0].length;
for(var j=0;j<len;j++){
data.cols.push({type:'string'})
}
for(var i=0;i<d2.length;i++){
data.rows[i]={c:[]};
for(var j=0;j<d2[i].length;j++){
data.rows[i].c.push({v:d2[i][j]})
}
}
return data;
}
})();
スクリプトの収録先
neta.js neta.elements.js neta.vis.jsPR
2010/11/12 (Fri.) Trackback() Comment(0) JavaScript
2010
11
10
コンボボックスを JavaScript で作る。
コンボボックスは、インプットボックスとリストボックスを組み合わせた入力ボックスです。リストから値を選択することも、直接、値を入力することもできます。今回紹介する neta.elements.ComboBox では、INPUT 要素と UL 要素を組み合わせています。
ComboBox コンストラクタの書式
combox=new neta.elements.ComboBox(container)
引数は、コンボボックスを配置する先の HTML 要素です。実際に配置するには draw メソッドを実行します。
DIV要素を生成して、その中に INPUT 要素、BUTTON 要素、UL 要素を子要素として配置します。ボタンを押すと、リストボックスが現れます。UL要素内のリストは、draw メソッドで指定します。
draw メソッドの書式
combox.draw(list)
draw メソッドの引数
draw メソッドの引数は、配列です。
['A', 'B', 'C']
記述例
neta.addListener(function(){
var container=document.getElementById('container');
var combox=new neta.elements.ComboBox(container);
combox.draw(['A','B','C']);
var container2=document.getElementById('container2');
var combox2=new neta.elements.ComboBox(container2);
combox2.draw(['E','F','G']);
});
実行例
ソースコード
if(!window['neta'])window['neta']={};
if(!window['neta']['elements'])window['neta']['elements']={};
(function(){
var a=neta.elements;
a.ComboBox=function(container){
this.container=container||document.body;
this.element=a.element('div',{style:{position:'relative'}});
var self=this;
self.ul =a.element('ul',{style:{
display:'none',
position:'absolute',
top:'15',
zIndex:10,
backgroundColor:'#ccc',
boder:'solid 1px #999'
}});
var copy=function(){
self.inp.value=this.innerHTML;
hide();
}
var show=function(){
self.ul.style.display='block';
}
var hide=function(){
self.ul.style.display='none';
}
self.inp=a.element('input',{
type:'text',onblur:hide
});
self.btn=a.element('button',{
innerHTML:'▼',onclick:show,style:{width:'2em'}
});
self.element.append([self.inp,self.btn,self.ul]);
self.draw=function(list){
list=list||[];
self.ul.innerHTML='';
for(var i=0;i<<list.length;i++){
var li=a.element('li',{innerHTML:list[i],onclick:copy});
self.ul.appendChild(li);
}
self.container.appendChild(self.element);
}
}
})();
収録先
neta.elements.js2010/11/10 (Wed.) Trackback() Comment(0) JavaScript
2010
11
09
リストボックスを JavaScript で作る。
前回の「JavaScript でHTML要素を生成する関数」の記事で JavaScriptでHTML要素を生成する関数として、neta.elements.element を作成しました。今回は、これを利用してリストボックスを作成しましょう。
リストボックスは、選択肢のリストを表示しその中から値を選ばせるものです。HTMLのフォーム部品では、SELECT がこれに当たります。今回紹介する neta.elements.ListBox でも、まず SELECT 要素を生成します。
ListBox コンストラクタの書式
listbox=new neta.elements.ListBox(container)
引数は、リストボックスを配置する先の HTML 要素です。実際に配置するには draw メソッドを実行します。
draw メソッドの書式
listbox.draw(list)
引数のリストから OPTION 要素を生成して SELECT 要素に追加します。そして、文書の指定した箇所に SELECT 要素を配置します。
draw メソッドの引数
draw メソッドの引数は、配列です。配列の要素には次の３種類を想定しています。
配列
配列の要素も配列の場合、その１番目の要素を OPTION 要素の value に、２番目の要素を innerHTML に割当てます。
[[1,'A'], [2,'B'], [3,'C']]
オブジェクト
配列の要素がオブジェクトの場合、v プロパティの値を OPTION 要素の value に、f プロパティの値を innerHTML に割当てます。
[[1,'A'], [2,'B'], [3,'C']]
文字列、数値
配列の要素が文字列か数値の場合、その値を OPTION 要素の value と innerHTML の双方に割当てます。
['A', 'B', 'C']
記述例
neta.addListener(function(){
var container=document.getElementById('container');
var listbox=new neta.elements.ListBox(container);
listbox.draw(['A','B','C']);
var container2=document.getElementById('container2');
var listbox2=new neta.elements.ListBox(container2);
listbox2.draw(['E','F','G']);
document.getElementById('btn').onclick=function(){
alert(
listbox.element.value +' と '
+listbox2.element.value +' が選択されました');
}
});
実行例
ソースコード
if(!window['neta'])window['neta']={};
if(!window['neta']['elements'])window['neta']['elements']={};
(function(){
var a=neta.elements;
a.ListBox=function(container){
this.container=container||document.body;
this.element=a.element('select');
var self=this;
self.draw=function(list){
list=list||[];
self.element.innerHTML='';
for(var i=0,val,formatted;i<list.length;i++){
if(typeof list[i]!='object'){
val=list[i];formatted=list[i];
}else if(list[i].length){
val=list[i][0];formatted=list[i][1];
}else{
val=list[i]['v'];formatted=list[i]['f'];
}
var opt=a.element('option',{value:val,innerHTML:formatted});
self.element.append(opt);
}
self.container.appendChild(self.element);
}
}
})();
収録先
neta.elements.js2010/11/09 (Tue.) Trackback() Comment(0) JavaScript
2010
11
08
JavaScript でHTML要素を生成する関数
JavaScript でHTML要素を生成するには、document.createElement を使用します。そして、そのHTML要素にさまざまな属性を追加していきます。HTML要素の生成と属性の追加が一度にできたら便利でしょう。そう考えて、作成したのが、neta.elements.element です。
書式
HTML要素=neta.elements.element(tagaName,propaties)
引数
neta.elements.element は２つの引数を取ります。第一引数は、生成するHTML要素の tagName です。第二引数は、生成されたHTML要素の属性を指定するオブジェクトです。
引数が１つで、それがオブジェクトである場合には、生成する要素はDIV要素で、そのDIV要素に対して指定した属性を適用します。引数が１つで、それが tagName である場合には、その生成する要素は tagName が示す要素です。
引数がない場合には、属性指定のないDIV要素を生成します。
属性指定オブジェクト
{innerHTML:'内容です。', onclick:func} のように記述します。各属性の間はカンマ(,)で区切ります。
スタイルの指定
{innerHTML:'内容です。', style:{backgroundColor:'#cc0000'}} のように記述します。style プロパティの値はオブジェクトで、そのオブジェクトにスタイルのプロパティを記述します。プロパティ名にはハイフン(-）を使用できませんので、ハイフン(-）を省略して続く文字を大文字にします。
属性の追加変更(attr)
HTML要素の属性は、必ずしも最初に指定する必要はありません。後で attr メソッドを実行することにより、追加変更が可能です。
子要素の追加(append)
子要素は append メソッドで追加できます。子要素が１つであれば、標準の appendChild と同じです。子要素の配列を引数に取れば、その子要素を順番に追加します。
文書への追加は?
生成したHTML要素を文書に追加するための特別なメソッドは用意していません。標準の appendChild や insertBefore を使用して下さい。
記述例
neta.addListener(function(){
var container=document.getElementById('container');
var div=neta.elements.element({
innerHTML:'この部分は neta.elements.element で生成しました。',
style:{color:'#33C'}
});
var span=neta.elements.element('span',{
innerHTML:'この部分は append メソッド追加しました。',
onclick:function(){alert('Hello!')},
style:{color:'#C33'}
});
var btn=neta.elements.element('button',{
innerHTML:'Click!',
onclick:function(){alert('Hello!')}
});
div.append([span,btn]);
container.appendChild(div);
btn.attr({style:{color:'#c00'}});
});
実行例
ソースコード
if(!window['neta'])window['neta']={};
if(!window['neta']['elements'])window['neta']['elements']={};
(function(){
var a=neta.elements;
a.element=function(tagName,propaties){
propaties=propaties||{};
if(typeof tagName=='object'){
propaties=tagName;
tagName='div';
}
tagName=tagName||'div';
propaties=propaties||{};
var elm=document.createElement(tagName);
var attr=function(propaties){
for(var k in propaties){
if(k=='style'){
for(var m in propaties[k]){
elm[k][m]=propaties[k][m];
}
}else{
elm[k]=propaties[k];
}
}
}
attr(propaties);
elm.attr=attr;
elm.append=function(elms){
if(elms.length){
for(var i=0;i<elms.length;i++){
elm.appendChild(elms[i]);
}
}else{
elm.appendChild(elms);
}
}
return elm;
}
})();
収録先
neta.elements.js2010/11/08 (Mon.) Trackback() Comment(0) JavaScript
2010
11
06
イベントリスナー
イベントリスナー用の関数です。FireFox と IE に対応。jQuery などの JavaScript ライブラリを利用するまでもない時に使ってます。
if(!window['neta'])window['neta']={};
neta.addListener=function(f,elm,type){
elm=elm||window;
type=type||(elm==window)?'load':'click';
if(elm.addEventListener){
elm.addEventListener(type,f,false);
}else if(elm.attachEvent){
elm.attachEvent('on'+type,f);
}
}
関数だけが引数の場合
window についてのロード(load)イベントとみなして、イベント登録します。window.onload を上書きしないので、何度でも登録できます。
関数とHTML要素が引数の場合
指定したHTML要素についてのクリック(click)イベントとみなして、イベント登録します。クリックイベントの使用回数が多いのでこういう設定にしました。
関数、HTML要素、イベントタイプが引数の場合
指定したイベントタイプで指定したHTML要素のイベント登録を行います。
収録先
neta.js2010/11/06 (Sat.) Trackback() Comment(0) JavaScript
