Skip to content

엑시스제이 #
Find similar titles

Structured data

Category
Programming

자바스크립트 기반 UI 스크립트 - 엑시스제이 (axisj) #

엑시스제이(axisj)란? #

Image

axisj 그리드 예시 (출처)

엑시스제이(axisj)의 목적 #

  1. 우리는 대한민국에 불모지나 다름없는 오픈소스 문화를 정착시킨다.
  2. 소프트웨어 개발에 필수 요소인 자바스크립트 UI의 해외 의존을 벗어나 대한민국의 소프트웨어 개발 주권을 바로 세우고 더 나아가 발전된 대안을 해외에 제시한다.
  3. 다양한 스타일의 사용자 인터페이스 (UI) 템플릿 제공 뿐 아니라, 사용자 경험 (UX) 을 고려한 정보 설계 (IA) 를 통해 UI를 제작하고 개발자를 위해 이에 대한 가이드라인을 제시함으로써 보다 궁극적인 사용자의 경험을 증진시킨다.

엑시스제이(axisj)의 비전 #

  1. 세계유일의 대중적인 오픈소스 자바스크립트 UI 프레임워크를 구축
  2. 실력있는 오픈소스 컨트리뷰터를 육성 (UI개발교육 등 다양한 교육진행)
  3. AXU, UI빌더등의 사업을 기반으로 안정적인 오픈소스 개발 환경 마련

사용법 #

셋팅 #

  • 액시스제이를 사용하시려는 페이지의 HTML 코드 안에 아래의 CSSJS파일을 로드하는 코드를 작성
  • 다음 필요한 경우 원하는 UI용 CSS와 JS파일을 추가

    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <!-- 공통요소 -->
        <link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXJ.css" />
        <script type="text/javascript" src="/axisj/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="/axisj/lib/AXJ.js"></script>
    
        <!-- 추가하는 UI 요소 -->
        <link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXInput.css" />
        <link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXSelect.css" />
        <link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXGrid.css" />
        <script type="text/javascript" src="/axisj/lib/AXInput.js"></script>
        <script type="text/javascript" src="/axisj/lib/AXSelect.js"></script>
        <script type="text/javascript" src="/axisj/lib/AXGrid.js"></script>
    </head>
    

타켓 지정 #

  • 해당 UI가 위치할 HTML 엘리먼트에 id를 지정한다. 이는 나중에 UI 환경 설정 항목에서 해당 ID를 사용
  • id는 유일한 요소이므로 하나의 HTML 문서 안에는 오직 한 개만 존재 요망

    </head>
    <body>
        <h1>AXGrid RWD</h1>
        <div id="AXGridTarget"></div>
    </body>
    </html>
    

스크립트 사용 예 ( 그리드 ) #

</body>
</html>
<script type="text/javascript">
var myGrid = new AXGrid(); // instance
var fnObj = {
    pageStart: function(){

        myGrid.setConfig({
            targetID : "AXGridTarget",
            theme : "AXGrid",
            autoChangeGridView: { // autoChangeGridView by browser width
                mobile:[0,600], grid:[600]
            },
            colGroup : [
                {key:"no", label:"No.", width:"40", align:"center", formatter:"money"},
                {key:"title", label:"Title", width:"200"},
                {key:"writer", label:"Writer", width:"100", align:"center"},
                {key:"date", label:"Date.", width:"100", align:"center"},
                {key:"desc", label:"Etc.", width:"*"}
            ],
            body : {
                onclick: function(){
                    toast.push(Object.toJSON({index:this.index, item:this.item}));
                }
            },
            page:{
                paging:false
            }
        });

        var list = [
            {
                no:1, title:"AXGrid 첫번째 줄 입니다.AXGrid 첫번째 줄 입니다.", writer:"장기영", img:"img/1.jpg", desc:"많은 글을 담고 있는 내용 입니다. 자연스럽게 줄이 넘어가고 표현되는 것이 관건 입니다.", category:"액시스제이", date:"2014-04-05"
            },
            {
                no:2, title:"AXGrid 두번째 줄 입니다.AXGrid 첫번째 줄 입니다.", writer:"장기영", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07"
            },
            {
                no:3, title:"AXGrid 세번째 줄 입니다.AXGrid 첫번째 줄 입니다.", writer:"장기영", img:"img/3.jpg", desc:"많은 글을 담고 있는 내용 입니다. 자연스럽게...", category:"액시스제이", date:"2014-04-09"
            }
        ];

        //setList
        myGrid.setList(list);
        /* ajax way
        myGrid.setList({
            ajaxUrl:"...",
            ajaxPars:"",
            onLoad:function(){},
            onError:function(){}
        });
        */
    }
};
jQuery(document).ready(fnObj.pageStart.delay(0.1));
</script>

AXCore #

  • AXJ - UI 클래스 원형
  • AXReq - AJAX 통신처리 클래스
  • AXMask - 애플케이션 사용자 화면 입력금지 / 통신중 상태표시
  • AXNotification - 애플리케이션 상태 변경 알림처리
  • AXScroll - 레이어안에 레이어 스크롤
  • AXCalendar - 달력 테이블 생성
  • AXMultiSelect - 레이어 안에 아이템 다중선택 지원
  • AXResizable - 레이어 리사이즈 지원
  • AXContentMenuClass - 컨텍스트메뉴 타입 UI
  • AXPopOverClass - 팝오버 타입 UI
  • AXMobileModal - 모바일 페이지용 모달
  • jQuery extends - 제이쿼리 확장 함수

참고 #

0.0.1_20140628_0