원인
스크립트 로딩 순서 문제
이 지도들은 로딩타이밍에 다이내믹하게 지들 사이즈를 조정하는데
$(“~”).show()
뭐 이런식으로 스크립트로 안보이던걸 보이게 하거나
$(‘~’).(‘width: 100px’)대강 이런거 하면 발생
이런 상태에서 윈도우 크기를 변경 해 보면 스크립트 리로딩되면서 지도가 제대로 표시된다.
해결
1 미리 사이즈를 설정 해 놓는다.
또는
2 사이즈 조절 후 지도를 로딩한다
원인
스크립트 로딩 순서 문제
이 지도들은 로딩타이밍에 다이내믹하게 지들 사이즈를 조정하는데
$(“~”).show()
뭐 이런식으로 스크립트로 안보이던걸 보이게 하거나
$(‘~’).(‘width: 100px’)대강 이런거 하면 발생
이런 상태에서 윈도우 크기를 변경 해 보면 스크립트 리로딩되면서 지도가 제대로 표시된다.
해결
1 미리 사이즈를 설정 해 놓는다.
또는
2 사이즈 조절 후 지도를 로딩한다
Javascript에서 기본 오브젝트 정보를 가져올 때는 DOM구조를 타고 내려가는게 중요한데
location.href 라고 쓰는것은
window.document.location.href 와 동일하다.
1 2 3 4 5 6 |
예) http://memo.polypia.net/archives/2183 location.href http://memo.polypia.net/archives/2183 .host memo.polypia.net .protocol http: .pathname /archives/2183 |
요즘은 디버거가 잘 되어 있어서 location만 치면 객체구조를 확인가능하다.
최근 트렌드로 제시되고 있는놈들하고 기존 사용되던놈들…
여기없거나 설명이 매우 적은것들은 아주최신이라 서비스로 쓰기 좀 안좋을정도거나
오래되서 사용하지않는것들일 가능성이 높음.
PrimeFaces
게시판이나 이런거 등등 다양한 UI제공
ICEFaces
PRIME이랑 비슷한것?
http://www.icesoft.org/java/projects/ICEfaces/overview.jsf
RichFaces
Prime이랑 비슷한것역시..
http://www.jboss.org/richfaces
jQuery thermeroller
아코디언모양 메뉴
http://jqueryui.com/themeroller/
960-Grid-System
twitter 직원이 만든듯 싶다. 포토샵이랑 fireworkd에 설치해서 쓰는 템플릿?
대강 이렇게 만들어놓은건 파이어웍스에서 CSS를 자동생성해주는 기능이 아닐까 하는 느낌
http://code.tutsplus.com/tutorials/which-css-grid-framework-should-you-use-for-web-design–net-25
http://960.gs/
AngularJS
구글에서 나온 JS프레임워크
http://angularjs.org/
지원사이트 : http://angular-ui.github.io/
모듈모음 : http://ngmodules.org/
예제 : https://github.com/angular/angular.js/wiki/JsFiddle-Examples
Bootstrap연동 : http://angular-ui.github.io/
Tstacular JS 테스팅프레임웍 : http://testacular.github.io/
AngularJS 팁 : http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED
한국유저그룹 : http://angularjs.co.kr/
페이스북그룹 : https://www.facebook.com/login.php?next=https%3A%2F%2Fwww.facebook.com%2Fgroups%2FKorea.AngularJS.User.Group%2F
Backbone.js
https://github.com/jeromegn/Backbone.localStorage
언더스코어 : http://underscorejs.org/
튜토리얼 : http://backbonetutorials.com/
관계형모델 : http://backbonerelational.org/
페이징 : https://github.com/backbone-paginator/backbone-pageable
폼생성 : https://github.com/powmedia/backbone-forms
Mustache템플릿엔진 : http://mustache.github.io/
Bootstrap연동GRID : http://direct-fuel-injection.github.io/bbGrid/
Backbone.js기반 프로젝트 시드 : https://github.com/backbone-boilerplate/backbone-boilerplate
Backbone.js기반 MVC프레임웍 : http://chaplinjs.org/
Prototype
jQuery
다른것들 쓰는데 jQuery만 빼놓을수 없어서…
UI : https://jqueryui.com/
kendoui라던가 뭐 이래저래 jquery기반으로 만들어진 유료라이브러리도 꽤 된다. 역사도 오래되서 버그도 많이없고… 또 익숙하고. SI에 특히 유용.(유지보수관점)
Bootstrap
요즘 거의 대세인 웹디자인 템플릿
http://getbootstrap.com/
템플릿 : https://wrapbootstrap.com/
예제제작도구 : http://bootsnipp.com/
한글사이트 : http://webdesigncss3.com/bootstrap/
적용사례 : http://builtwithbootstrap.com/
테마 : https://wrapbootstrap.com/
테마 : http://www.templatemonster.com/properties/features/bootstrap-templates/
테마 : http://themeforest.net/search?term=bootstrap
테마제작도구 : http://stylebootstrap.info/
blueprint
CSS프레임워크
http://blueprintcss.org/
Foundation
http://foundation.zurb.com
Skeleton
http://getskeleton.com
HTML KickStart
http://99lime.com
HTML5 BoilerPlate
http://html5boilerplate.com
Initializr
http://www.initializr.com
GLYPHICONS
아이콘 사이트.유료무료
http://glyphicons.com/
http://glyphicons.getbootstrap.com/
1 2 |
alert("확인되었습니다."); window.location.reload(); |
그냥 이렇게 써놓으면 된다.
확인 후 재시작… ajax같은거 사용후에 적용해놓으면 좋다.
상황에 따라 재로딩을 하는 방식이 달라져야한다.
ajax로 추가되는 리스트인 경우는…. 다른방법인데 지금은 생각이 안난다.
1 2 3 |
$("#divNo1,#divNo2").click(function(){ alert("됐다"); } |
http://blog.anyframejava.org/?p=344
요기보고 해결…
자바스크립트 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//삭제버튼 클릭 function deleteButtonOnClick() { // deleteCheckBoxClass라는 클래스명을 가진 체크박스중 체크된 체크박스 확인 var checkedValues = $('.deleteCheckBoxClass:checked').map(function () { return this.value; }).get(); //배열의 널체크는 이런식으로 해야됨..[0]번값 if (!checkedValues[0]) { alert('체크박스를 선택하고 클릭하거라'); return; } if (confirm('선택한 값을 지울까?')) { var param = { topicIds : checkedValues }; //요 부분이 핵심... jQuery.ajaxSettings.traditional = true; $.post("./ajax/delete.ajax", param, successFunction).error(failureFunction); } } |
저 핵심부분이 빠지면 컨트롤러에 값이 제대로 전달되지 않는다. 트래디셔널이라고 하는거 보면 새로운 방법이 뭔가 나온모양인데 잘 모르겠다.
개발자의 고충
디자이너는 너무 비싸다.
의사소통도 힘들다.
직접 디자인을 하면… 촌스럽다.
그래서 이런 불편을 해소해주는 프레임워크? 부트스트랩
http://twitter.github.com/bootstrap/
트위터의 개발자가 만든것으로 디자인을 간편하게 할 수 있도록 도와준다. 네비게이션메뉴, 버튼디자인 등을 간편하게 해 준다. jquery로 노가다 떡칠을 해야 겨우 만들 수 있던 것을 무려 apache 라이센스로 풀어주셨다. 글로벌 회사라면 이정도는 되야하는건가? 요즘 컴퓨터쪽 오픈소스 최신기술 나오는거 보면 요즘 잘나가는 회사들이다. 애플만 없는건가
부트스트랩도 그냥 막 편하기만 한 것은 아니다. 메뉴명이나 클래스명을 좀 알고 있어야 하기 때문에 시행착오도 있고 익히는데 시간이 좀 걸린다. 그래도 오픈소스 개바자들이 관련 툴들을 많이 배포해주니 편하게 감사하게 사용하자. 시간이 되면 자신이 만든것도 공유하고~
1번. 폼 배치하기 – 회원가입 폼 같은거… 굉장한 노가단데… 여기가서 마우스로 클릭클릭하면 쓸 수 있다.
http://bootstrap-forms.heroku.com/#
2번. 부트스트랩용 버튼들
http://charliepark.org/bootstrap_buttons/
http://www.plugolabs.com/twitter-bootstrap-button-generator/