prototype 1.6에서 SelectBOX 생성

2009. 3. 7. 23:26ㆍ코드 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
   
    var DPSelectbox = Class.create();
    var DPArr = []; // Common
   
    // Common Func
    function getKey(key) {
        if(DPArr.length > 0) {
            for(var i = 0; i < DPArr.length; i++) {
                if(DPArr[i].key == key) {
                    return DPArr[i];
                }
            }
        }
        return null;
    }
    
    DPSelectbox = {
    maxNode: 100,
        create: function(div, callback, data) {
            this.key = div;
            DPArr.push(this);
            var mobj = getKey(div);
            mobj.div = div;
            mobj.turnkey = callback;
            mobj.data = data;
            mobj.depth = 0;
            var code = mobj.data[1];
            mobj.makeLayer(div, code);

    },
        makeLayer : function(div, code) { // public
            var mobj = getKey(div);
            if (!mobj.isLast(div, code)) {
                var layer = document.createElement("DIV");
                mobj.depth++;
                layer.setAttribute("id", "DP_div_" + mobj.div + "_" + mobj.depth);
                layer.appendChild(mobj.makeSelect(div, code));
                $(mobj.div).appendChild(layer);
            }else {
                eval("mobj.turnkey($('DP_select_' + mobj.div + mobj.depth));");
            }
        },
        makeSelect : function(div, code) { // private
            var mobj = getKey(this.div);
            var obj = document.createElement("select");
      var selName = "DP_select_" + mobj.div + "_" + mobj.depth;
            obj.setAttribute("id", selName);

    var opt = document.createElement("option");
    var txt = document.createTextNode("-All-");
    opt.setAttribute("value", "");
    opt.appendChild(txt);
    obj.appendChild(opt);

    for(var i = 0; i < mobj.data.length; i+=3) {
     if(code == mobj.data[i+1]) {
      var opt = document.createElement("option");
      var txt = document.createTextNode(mobj.data[i+2]);
      opt.setAttribute("value", mobj.data[i]);
      opt.appendChild(txt);
      obj.appendChild(opt);
     }
    }

    $(mobj.div).appendChild(obj);
            $(selName).observe("change", function(event) {
               mobj.childNodeExist(div, code, $(selName).id);
               mobj.makeLayer(div, this.value); 
            } );
            return obj;
        },
        isLast : function(div, code) {
            var mobj = getKey(div);
            var cnt = 0;
            for(var i = 0; i < mobj.data.length; i+=3) {
                if(code == mobj.data[i+1]) cnt++;
            }
            return (cnt == 0 ? true : false);
        },
        childNodeExist : function(div, code, tSel) {
            var mobj = getKey(div);
    var pos = tSel.lastIndexOf("_") + 1;
    var noStr = tSel.substring(pos + div.length);
    var no = parseInt(noStr) + 1;
    var flag = true;

    for(var i = no; i < DPSelectbox.maxNode; i++) {
     if($("DP_div_" + div + "" + i) != null) {
      $(mobj.div).removeChild($("DP_div_" + div + "_" + i));
      flag = false;
     }
    }
            
    if(!flag) {
     mobj.depth = no-1;
    }
        }
    };
    
    function init() {
        DPSelectbox.create("sel",
                   function(obj) {
                       $("code").value = obj.value;
                   },
                   ["1", "0", "프로그래밍",
       "2", "1", "윈도우",
       "3", "1", "리눅스",
       "4", "1", "모바일",
       "5", "2", "C/C++",
       "6", "2", "VB",
       "7", "2", "C#",
       "8", "3", "GCC/GPP",
       "9", "3", "Shell",
       "10", "9", "Perl",
       "11", "9", "Python",
       "12", "9", "Ruby"]
        );


/*
     DPSelectbox.create("sel1",
                   function(obj) {
                       $("code1").value = obj.value;
                   },
                   [
       "1", "0", "프로그래밍",
       "2", "1", "윈도우",
       "3", "1", "리눅스",
       "4", "1", "모바일",
       "5", "2", "C/C++",
       "6", "2", "VB",
       "7", "2", "C#",
       "8", "3", "GCC/GPP",
       "9", "3", "Shell",
       "10", "9", "Perl",
       "11", "9", "Python",
       "12", "9", "Ruby"
       ]
        );
*/
    }
   
    Event.observe(window, "load", function() { init(); } )
    </script>

</head>

<div id="sel"></div>
<div id="sel1"></div>
<input type="text" id="code" name="code" value="">
<input type="text" id="code" name="code1" value="">

'코드' 카테고리의 다른 글

TrayIcon - TaskbarCreated 신호시....  (0) 2009.07.12
JSTL - customTag를 만들어 보자.  (0) 2009.03.16
ServletFilter를 통한 URI 재구성 (Blog처럼)  (1) 2009.02.22
printStackTrace  (0) 2008.09.02
DoCapture(IHTMLElement *ele, IViewObject2 *vObj, int width, int height, int cwidth, int cheight, int wd, int hd)  (0) 2008.08.19

관련글

티스토리툴바