본문 바로가기
Web/Javascript

2차 완성된 DHTML 을 이용한 클라이언트 스크립트로 Element 생성

aucd29 2013. 9. 26. 21:31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language='javascript'>
//
// name : 객체명
// data : 배열정보 1차 |, 2차 :
//
// ----------------------------------------------------------------
// this.nType
// ----------------------------------------------------------------
//
//        _select [0] : value->number        text->array
//                [1] : value->array        text->array
//                [2] : value->array[0]    text->array[1]
//
//        _radio    [0] : value->number        text->array
//                [1] : value->array        text->array
//                [2] : value->array[0]    text->array[1]
//
//        _chkbox [0] : value->number        text->array
//                [1] : value->array        text->array    
//                [2] : value->array[0]    text->array[1]
//

//
// 내용을 시작
//
objElement = function(tag,name,data,f_field)
{
    //
    // 오류 메세지
    //
    var _ERROR = {
        nottag : "테그명을 넣어주세요",
        notname : "객체명을 넣어주세요",
        notdata : "데이터를 입력하세요"
    }

    //
    // 기본 설정 값
    //
    this.aData     = '';
    this.sOthers = '';                // 각종 이벤트(click.blur..)들을 위한 내용
    this.nType     = 1;
    this.sFirstField = '선택';
    this.sSelected = '';
    this.bRepeat = 0;
}

objElement.prototype.create = function(tag,name,data,f_field)
{
    this.sTag     = tag.toLowerCase();
    this.sName     = name;
    this.sData     = data;                        // data1|data2| or data1:data2|data3:data4
    if(this.bRepeat==0) this.sOthers='';
    if(f_field) this.sFirstField = f_field;

    if(!this.sTag) alert(this._ERROR['nottag']);
    if(!this.sName) alert(this._ERROR['notname']);
    if(!this.sData) alert(this._ERROR['notdata']);

    this.aData = this.sData.split("|");        // str => arr

    switch(this.sTag)
    {
    case "select"    : this._select();    break;
    case "radio"    : this._radio();    break;
    case "chkbox"    : this._chkbox();    break;
    }
    this.__free();
}

objElement.prototype._select = function()
{
    with(document)
    {
        write('<select name="'+this.sName+'" ');
        if(this.sOthers) write(this.sOthers);        
        write('><option value="">'+this.sFirstField);
        var j=1;
        for(var i=0; i<this.aData.length;++i)
        {
            switch(parseInt(this.nType))
            {
            case 0:
                write('<option value="'+j+'" ');
                if(j == this.sSelected) write('SELECTED');
                write('>'+this.aData[i]);
                ++j;
                break;
            case 1:
                write('<option value="'+this.aData[i]+'" ');
                if(this.aData[i] == this.sSelected) write('SELECTED');
                write('>'+this.aData[i]);
                break;
            case 2:
                var aDataT = this.aData[i].split(":");
                write('<option value="'+aDataT[0]+'" ');
                if(aDataT[0] == this.sSelected) write('SELECTED');
                write('>'+aDataT[1]);
                break;
            }
        }
        write('</select>');
    }
}

// ----------------------------------------------------------------

objElement.prototype._radio = function()
{
    if(this.bRepeat==0)
        aOthers = this.sOthers?this.sOthers.split("|"):'';

    with(document)
    {
        var j=1;
        for(var i=0; i<this.aData.length;++i)
        {
            write("<input type='radio' name='"+this.sName+"' ");
            if(this.bRepeat==0)
            {
                if(aOthers) write(aOthers[i]);
            }
            else
            {
                if(this.sOthers) write(this.sOthers);
            }
            write(" value='");
            switch(parseInt(this.nType))
            {
            case 0:                
                write(j+"' ");
                if(j == this.sSelected||!i == !this.sSelected) write('CHECKED');
                write(" />"+this.aData[i]);
                ++j;
                break;
            case 1:
                write(this.aData[i]+"' ");
                if(aData[i] == this.sSelected||!i == !this.sSelected) write('CHECKED');
                write(" />"+this.aData[i]);
                break;
            case 2:
                var aDataT = this.aData[i].split(":");
                write(aDataT[0]+"' ");
                if(aDataT[0] == this.sSelected||!i == !this.sSelected) write('CHECKED');
                write(" />"+aDataT[1]);
                break;
            }
        }
    }
}

objElement.prototype._chkbox = function()
{
    aOthers     = this.sOthers?this.sOthers.split("|"):'';
    aSelected = this.sSelected?this.sSelected.split('|'):'';        // 1|1|1
    with(document)
    {
        var j=1;
        for(var i=0; i<this.aData.length;++i)
        {
            write("<input type='checkbox' name='"+this.sName+"' ");
            if(this.bRepeat==0)
            {
                if(aOthers) write(aOthers[i]);
            }
            else
            {
                if(this.sOthers) write(this.sOthers);
            }

            write(" value='");
            switch(parseInt(this.nType))
            {
            case 0:                
                write(j+"' ");
                if(aSelected[i]) write('CHECKED');
                write(" />"+this.aData[i]);
                ++j;
                break;
            case 1:
                write(this.aData[i]+"' ");
                if(aData[i] == aSelected[i]) write('CHECKED');
                write(" />"+this.aData[i]);
                break;
            case 2:
                var aDataT = this.aData[i].split(":");
                write(aDataT[0]+"' ");
                if(aDataT[0] == aSelected[i]) write('CHECKED');
                write(" />"+aDataT[1]);
                break;
            }
        }
    }
}

objElement.prototype.__free = function()
{
    this.aData = '';
    this.sData = '';
    this.sSelected = '';
    if(this.bRepeat==0) this.sOthers = '';
    this.bRepeat = 0;
}
</script>

</HEAD>

<BODY>
<script>
var slt1 = new objElement();
slt1.nType = 2;
slt1.bRepeat = 1;
slt1.sOthers = "onclick='alert(this.value);'";
slt1.create('radio','helo','x:test|y:test2|z:test3');

document.write('<br><br>');

slt1.nType        = 0;
slt1.create('select','naro','test|test2|test3');

document.write('<br><br>');

slt1.nType        = 0;
slt1.sSelected = '1|1|1';
slt1.create('chkbox','naro','체크1|체크2|체크3');
</script>
</BODY>
</HTML>

'Web > Javascript' 카테고리의 다른 글

탭 페이지  (0) 2013.09.26
xmlhttp로 페이지 긁어와서 뿌려주기...흐흐  (0) 2013.09.26
주민번호 다음 form으로 이동  (0) 2013.09.26
코멘트용 js  (0) 2013.09.26
1차 완성된 DHTML 을 이용한 클라이언트 스크립트로 Element 생성  (0) 2013.09.26

'Web/Javascript' Related Articles

티스토리툴바