忍者ブログ

2018
05
21

[PR]

×

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

2018/05/21 (Mon.)

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
PR

2010/11/10 (Wed.) Trackback(0) Comment(0) JavaScript

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

04 2018/05 06
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア