Design & Development

IxEdit 사용법

IxEdit is a JavaScript-based interaction design tool for the web.

  • http://ixedit.com
  • IxEdit is a JavaScript-based interaction design tool for the web.
  • The generated JavaSCript code is designed to run with jQuery and jQuery UI.
  • 브라우져의 Local DB 기능을 사용하므로 firefox, IE 에서 사용하려면 구글 Gears 설치 필요 ( chrome, safari 는 상관없음 )
사용법
  • IxEdit 다운로드한 후 압축 해제.
  • 테스트할 html 소스의 head 영역에 다음 라인 추가 ( 당연히 압축 해제한 디렉토리 경로에 맞춰서 … )
<script type="text/javascript" src="jquery/jquery-plus-jquery-ui.js"></script>   // ---- (1)
<script type="text/javascript" src="ixedit/ixedit.packed.js"></script>               // ---- (2)
<link type="text/css" href="ixedit/ixedit.css" rel="stylesheet" />
<link type="text/css" href="sample-style/ui-sui.css" rel="stylesheet" />
  • IxEidt 다운로드 버전에 포함된 (1)의 스크립트 대신 jQuery 와 jQueryUI 를 별도로 다운 받거나 해서 사용해도 된다.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  • html 페이지를 리로드하면 IxEdit List View가 나타난다.( IxEdit 버튼 표시되는 경우는 버튼 클릭 ) List View 에서 New 버튼 누르면 아래와 같은 Edit View 표시됨.
  • 작업 후 ‘Done and Reload’ 눌러서 동작 테스트
  • 이상없으면 List View 좌상단의 톱니바퀴 아이콘에서 ‘Deploy’  선택
  • 자동으로 생성된 javascript 소스가 표시된다. 이 스크립트를 html 소스에 복사해넣는다 ( 자바스크립트를 페이지 끝부분에 넣는 경우가 페이지 로드 시 좀 더 빠르므로 </body> 바로 앞에 넣는 것이 좋다 )
  • IxEdit 작업 위해 삽입했던 구문 중 (2)번 이하의 Javascript 와 CSS 구문을 삭제한다.
p.s : 내 PC 의 chrome 브라우저에서는 처음에 IxEdit 버튼이 나타나지 않았다. 원인 결국 못찾고 chrome 언인스톨 후 새로 설치 ㅜㅠ
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s