티스토리 뷰

웹프로그래밍/js

Scriptaculous SelectBox

공허공자 2009. 8. 25. 14:50
기존의 스크립트를 prototype 1.6.3 의 Class 생성에 맞게 직접 패치했다.
스크립트
?
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// Copyright (c) 2006 Gabriel Lanzani (http://www.glanzani.com.ar)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// SEE CHANGELOG FOR A COMPLETE CHANGES OVERVIEW
// VERSION 0.3.1
 
/* USAGE:
 
1 - include prototype.js
<script src="javascript/prototype.js" type="text/javascript"></script>
 
2 - include scriptaculous.js
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
 
3 - include select.js
<script src="javascript/select.js" type="text/javascript"></script>
 
4 - include autocomplete styles
<link rel="stylesheet" href="styles/autocomplete.css" type="text/css" media="screen" charset="utf-8">
 
5 - write a selec control with a valid id and name and its options
<select id="options" name="options">
    <option value="1" selected="selected">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
</select>
 
6 - just add this script in page
<script type="text/javascript">
    new Autocompleter.SelectBox('options');
</script>
*/
 
Autocompleter.SelectBox = Class.create(Autocompleter.Base, {
  initialize: function(select, options) {
    this.element = "<input type="\"text\"" id="\""" +="" $(select).id="" "_combo\"="">"
    $(select).insert({ before:this.element });
    var inputClasses = $(select).classNames();
    inputClasses.each(function(inputClass) {
        $($(select).id + "_combo").addClassName(inputClass);
    });
 
    this.update = "<div id="\""" +="" $(select).id="" "_options\"="" class="\"autocomplete\""></div>"
    $(select).insert({ before:this.update });
 
    this.baseInitialize($(select).id + "_combo", $(select).id + "_options", options);
    this.select = select;
    this.selectOptions = [];
 
    $(this.element.id).addClassName(this.options.initClass);
    $(this.element.id).setAttribute('readonly','readonly');
    this.element.readOnly = true;
    if(this.options.debug) alert('input ' + this.element.id + ' and div '+ this.update.id + ' created, Autocompleter.Base() initialized');
    if(!this.options.debug) $(select).hide();
 
    var optionList = $(this.select).getElementsByTagName('option');
    var nodes = $A(optionList);
 
    for(i=0; i<nodes.length;i++){ this.selectoptions.push("<li="" id="\""" +="" nodes[i].value="" "\"="">" + nodes[i].innerHTML + '');
        if (nodes[i].getAttribute("selected")) this.element.value = nodes[i].innerHTML;
 
        if(this.options.debug) alert('option ' + nodes[i].innerHTML + ' added to '+ this.update.id);
    }
 
    $(this.element).observe("click", this.activate.bindAsEventListener(this));
 
    if ($(select).selectedIndex >= 0) this.element.value = $(select).options[$(select).selectedIndex].innerHTML;
 
    var self = this;
    this.options.afterUpdateElement = function(text, li) {
        var optionList = $(select).getElementsByTagName('option');
        var nodes = $A(optionList);
 
        var opt = nodes.find( function(node) {
            return (node.value == li.id);
        });
        $(select).selectedIndex = opt.index;
        if(self.options.redirect) document.location.href = opt.value;
        if(self.options.autoSubmit) $(self.options.autoSubmit).submit;
    }
  },
 
  getUpdatedChoices: function() {
        this.updateChoices(this.setValues());
  },
 
  setValues : function() {
        return ("<ul>" + this.selectOptions.join('') + "</ul>");
  },
 
  setOptions: function(options) {
    this.options = Object.extend({
        //MORE OPTIONS TO EXTEND THIS CLASS
        redirect    : false,  // redirects to option value
        debug       : false,  // show alerts with information
        autoSubmit  : '',     // form Id to submit after change
        initClass   : 'combo' // set css class
    }, options || {});
  }
});
</nodes.length;i++){>

스타일쉬트
?
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
32
33
34
35
36
div.autocomplete {
  position:absolute;
  width:200px;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  padding:0px;
  font-size: 9pt;
  text-align:left;
  max-height:200px;
  overflow:auto;
}
div.autocomplete ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.autocomplete ul li.selected {
  background-color: #EAF2FB;
}
div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}
input.combo /* look&fell of scriptaculous select box */
{
    background: url('/images/bg_select.jpg') right;
    width: 10em; height: 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    text-align:left;
    font: normal 9pt sans-serif;
}
저작자표시 동일조건

'웹프로그래밍 > js' 카테고리의 다른 글

Stereotabs: Prototype 과 Scriptaculous 로 구현한 탭  (0) 2009.11.05
Prototype JS로 Checkbox들 모두 선택 구현  (1) 2009.11.05
마우스 오버 스크롤 메뉴  (2) 2009.07.07
모든 자바스크립트 오류를 디버그 콘솔에 던지기  (0) 2009.06.01
Shadowbox.js  (0) 2009.05.07
공유하기 링크
댓글