71. (html/css/javascript/jquery) 동적으로 콘텐츠 div 레이아웃 생성 실시 페이지 page 이동 처리 실시

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

---

[요약 스크립트 소스코드]

​

        /* [페이지 생성 부분] */
        var pageName_Array = new Array(); // 생성된 페이지 이름 저장 배열
        
        function createContentLayOut() {            
            console.log("");            
            console.log("[createContentLayOut] : [start]");
            console.log("");


            // [for 반복문을 수행하면서 div 생성 실시]
            for(var i=1; i<=3; i++){ 

                // [Main 레이아웃 생성 실시]
                var create_Main_LayOut = document.createElement("div");
                var create_Main_Id = "page_" + String(i) + "_container"; // id 값 지정
                var create_Main_Class = "content_overflow"; // 스크롤 동작 클래스 값 지정
                create_Main_LayOut.setAttribute("id", create_Main_Id);
                create_Main_LayOut.setAttribute("class", create_Main_Class);

                var create_Main_Style = "width:100%; height:100%; margin:0 auto; padding:0; border:none;"; // 스타일값 지정              
                if(i== 1){ // 1번 페이지 배경색상 (빨강)
                    create_Main_Style = create_Main_Style + " background-color:#ff0000;";
                }
                if(i== 2) { // 2번 페이지 배경 색상 (초록)
                    create_Main_Style = create_Main_Style + " background-color:#00ff00;";
                }
                if(i== 3) { // 3번 페이지 배경 색상 (파랑)
                    create_Main_Style = create_Main_Style + " background-color:#0000ff;";
                }
                create_Main_Style = create_Main_Style + " float:top; position:relative; top:"+String(0)+"%; left:"+String(0)+"%;";
                create_Main_Style = create_Main_Style + " display:none;"; // 메인 display none 처리 안할 시 세로 쭉 표시됨
                create_Main_LayOut.setAttribute("style", create_Main_Style); // 스타일 저장


                // [최종 부모에 담기 실시]
                var parent_Div = document.getElementById("content_container");
                parent_Div.appendChild(create_Main_LayOut); //최종부모 


                // [페이지 이름 관리 배열 데이터 추가 실시]
                pageName_Array.push(create_Main_Id);
            }

            // [1번 페이지만 우선 표시 실시]
            console.log("");
            console.log("[createContentLayOut] : [save pageName] : " + JSON.stringify(pageName_Array));             
            console.log(""); 
            document.getElementById(pageName_Array[0]).style.display = "block"; // 한개 페이지만 우선 표시 위함
        };

---

[결과 출력]

​

---

[파일 첨부]

​

소스코드.txt

0.01MB

 

a_test_divCreate_tab.html

0.01MB

---