JavaScript　寝太郎の江戸風呂。ね！

2024
04
26

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/26 (Fri.)

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.js

2010/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.js

2010/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.js

2010/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.js

2010/11/06 (Sat.) Trackback() Comment(0) JavaScript

2010
09
24

前回の「iframe と親ページのロード、アンロードのタイミングを調べる。」では、あらかじめ親ページに iframe を埋め込んだもので、それぞれのロード、

アンロードのタイミングを調べました。そして、iframe ページ内のフォームが submit されたとき、いったん、iframe 　がアンロードとなり、その後、

iframe　のロード、アンロードを捉えることができないことを確かめました。

今回は親ページの読込み時に、iframe 要素を生成して親ページに追加した場合に、iframe のロードを捉えることができるかどうか確かめたいと思います。
実験用のページは、次のものです。

■　親ページの読込後に生成した iframe のロード、アンロードを捉える。

結果は、前回とは違って、iframe ページ内のフォームが submit されて、新しいインラインページがロードされた時に、そのロードイベントを捉えることが

できました。
この動きを利用すれば、新しいインラインページの読込み時に何らかのスクリプトを実行させることができます。次回は、これを用いて、簡易掲示板「Public

Message Board」を改良してみましょう。