JavaScript 썸네일형 리스트형 fancy tree에서 커스텀 아이콘 추가하기. fancy tree를 최초 initailize 할때, icon이라는 함수를 사용해서 icon을 변경할 수 있다. icon 함수는 event와 data를 argument로 받고, data의 data.node.data에서 트리의 데이터에 접근할 수 있다. node.data에서 특정값을 확인하고 icon을 변경하고 싶으면, 클래스명을 return 하면 되고, return 값이 없다면.. 기본 icon이 적용된다. 클래스명이 리턴되면, fancy트리는 해당 노드의 span 태그에 fancytree-custom-icon 와 내가 리턴한 클래스명을 클래스로 추가한다. 그리고 나는 아래와 같이 해당 클래스를 추가하면 된다. span.fancytree-custom-icon.fancytree-use-yn-no { bac.. 더보기 AngularJS를 이용한 From Validation. 지금까지 프로젝트를 진행하면서, 많은 유효성 검사 함수를 만들어서 썼다. 아무래도, 내가 너무 시대에 뒤떨어져있었던게 아닌가 생각된다. AngularJS를 활용하면 간편하게 유효성 검사를 할 수 있는데, 아래 간단한 예제를 소개한다. User name: Required! Show Example on Plunker. AngularJS에서는 사용자의 입력에 따른 From Validation을 기본적으로 몇가지 제공한다. Attribute Type Detail ngRequired boolean 필수 입력 체크. ngMinlength number 최소길이 설정. ngMaxlength number 최대길이 설정. ngPattern string 패턴설정. 정규표현식 사용. AngularJS에서 Form의 Prope.. 더보기 HighCharts 모듈 사용하기. 아직 AngularJS에 대해서 많은것을 알지는 못하지만, AngularJS의 커스텀 디렉티브는 굉장히 유용할 것 같다. 그 중, HighCharts를 AngualrJS를 통해서 쉽게 사용할 수 있는 HighCharts 모듈을 소개해볼까 한다. 아래 주소에 더 많은 정보가 있다. http://ngmodules.org/modules/highcharts-ng 예제를 확인해보자. HTML HighCharts - angularModule ReLoad JavaScript app.controller('ngCtrl', function($scope) { $scope.loadChart = function() { var rnd = []; for (var i = 0; i < 10; i++) { rnd.push(Math.fl.. 더보기 JavaScript Object 비교. 프로젝트를 진행하다가 보니.. 서로 다른 JSON Object의 키와 값이 동일하게 들어있는지 비교해야할때가 있다. 예를 들어, 아래와 같은 JSON Object가 두개 있을때, 서로 동일하다는 리턴값을 받으려면 어떻게 해야할까? var obj = { id: 1, name: "myName" }; var obj2 = { name: "myName", id: 1 }; obj == obj2 // false 리턴. obj === obj2 // false 리턴. 만약, AngularJS를 사용한다면, 아래와 같이 간단하게 비교할 수 있다. var obj = { id: 1, name: "myName" }; var obj2 = { name: "myName", id: 1 }; angular.equals(obj, obj2.. 더보기 jQuery 속성 선택자. jQuery의 속성 선택자. 형식 설명 $(Selector[attr]) attr 속성값을 가지는 요소를 선택한다. $(Selector[attr="value"]) attr 속성의 값이 value와 동일한 값인 요소를 선택한다. $(Selector[attr!="value"]) attr 속성의 값이 value와 같지 않은 요소를 선택한다. $(Selector[attr^="value"]) attr 속성의 값이 value와 같은 값으로 시작하는 요소를 선택한다. $(Selector[attr$="value"]) attr 속성의 값이 value와 같은 값으로 끝나는 요소를 선택한다. $(Selector[attr*="value"]) attr 속속의 값이 value와 같은 값을 포함하는 요소를 선택한다. $(Select.. 더보기 jQuery 필터 선택자. jQuery의 필터 선택자. 형식 설명 :odd 홀수 요소를 선택한다. :even 짝수 요소를 선택한다. :first 첫번째 요소를 선택한다. :last 마지막 요소를 선택한다. :contains(문자) 특정 문자를 포함하는 요소를 선택한다. :eq(index) index번째 요소를 선택한다. :gt(index) index뒤 요소를 선택한다. :lt(index) index앞 요소를 선택한다. :has(태그명) 태그명을 가지고 있는 요소를 선택한다. :not(선택자) 선택자와 일치하지 않는 요소를 선택한다. :nth:child(3n+1) 3n+1번째에 위치하는 요소를 선택한다. (예: 1, 4, 7) 더보기 AngularJS 양방향 데이터 바인딩 AngularJS에서는 ng-model 디렉티브를 사용하여, 양방향 데이터 바인딩이 가능하다. 먼저 jQuery를 사용한 아래 예제를 확인해보자. InputText Element에 값을 입력할때 마다, p Element의 값을 변경해주는 예제이다. HTML 파일. Javascript 파일. $(function(){ $("#txtText").keyup(function() { $("#p").text($(this).val()); }); }); 예제 확인 소스를 확인해보면, txtText Id를 가진, InputText Element의 keyup 이벤트시, p Id를 가진 pElement의 text를 InputText 엘리번트의 값으로 변경해주고 있다. 물론, 이렇게 보면 이 소스 또한 그리 복잡하지는 않을 수.. 더보기 AngularJS와 jQuery의 간단한 비교.. 요즘 시간이 날때마다, AngularJS를 조금씩 공부하고 있다. AngularJS는 보통 자바스크립트 MVW(Model View Whatever) 프레임워크라고 하고, jQuery는 자바스크립트 Library라고 한다. 예전부터 AngularJS에 대한 궁금증을 가지고 있었는데.. 드디어 시간을 내서 AngularJS에 대해서 공부를 했다. 아래 소스를 보면, 간단하게 AngualrJS와 jQuery의 차이점에 대해서 파악해 볼 수 있다. 동일한 결과를 가져오는 두가지의 소스이다. 먼저, jQuery를 이용한 방법이다. 먼저, HTML에는 TABLE과, TBODY를 설정했다. 이어서, Javascript 파일에서 아래의 ArrayData를 $.each를 사용해서 반복한다. $(function() { v.. 더보기 jQuery Select Box 전체선택, 해제 전체선택 1 2 3 4 5 6 7 당신이 선택하신 값은 입니다. [출처] [jQuery]checkbox 전체 선택|작성자 빽사장님 더보기 JQuery IMG 태그 onerror 처리 image.onerror = function (evt) { this.src = "이미지 경로"; } 더보기 이전 1 다음
