VoidNoble IT Zone

Fries (Mobile UI framework)는 div scroll 지원되지 않는 브라우저에 대한 호환을 위한 지원계획이 없기에 직접 패치작업 진행.overthrow 써보니 android 2.x등 모두 지원하지만뻑뻑한 스크롤만 지원됨.하여 NiceScroll (http://areaaperta.com/nicescroll/) 발견 후 적용해보니 동적으로 로딩되어 높이가 변하면 문제 생기길래 iScroll 등 다른것 찾아보다가 stack overflow 답변을 통해$(obj).getNiceScroll().resize() 발견 후메뉴얼을 다시금 확인 후동적으로 내용을 변경하게 하는 부분들의 끝부분마다 전부 적용해보니말끔하게 작동하는 스크롤을 확인할 수 있었음.

주말, 간단히 두뇌 예열 겸 간단한거 하나.아래와 같은 모바일웹 이벤트 페이지는 어떻게 구성되었는지 분석해 본다. 이미지의 가로 사이즈는 800px 이었다. 아래 스샷은 스크린이 이미지 가로 사이즈보다 넓은 950px 에서의 뷰이며 양쪽 여백이 생기며 가로 정렬 되어 있음을 알 수 있다. 이미지들은 어떻게 잘라서 구성하였나? TOP 이미지 본문 버튼 본문 하단 SNS 아이콘 버튼들 SNS 아이콘버튼들 구성 소스 각 -1){$("#____kakaolink____").attr("src","https://itunes.apple.com/kr/app/kakaotog-kakaotalk/id362057947?mt=8");}}},1500);$("#____kakaolink____").attr("src",this.data..

http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/ 영어 전문가가 아니기에 발번역했습니다. 교정은 받고 악플은 반사합니다.1. (기기) 응답형 디자인 지원. 태블릿 등에서도 잘 지원이 되도록 하려나 봅니다. 그리드, 테이블에 대해 응답형 디자인을 지원해주네요.2. 사이드 패널 위젯 [새창] 페이스북 모바일버젼에서 좌측 상단의 버튼을 누르면 왼쪽에서 오른쪽으로 스스륵 나오며 보여지는 메뉴들이 담긴 패널을 지원하게 되었습니다. 좌,우측 모두 가능하며 에니메이션도 3가지를 지원하는군요.3. 범위 슬라이더 기존 슬라이더 입력 요소는 하나의 수치만 입력 가능했는데 이제 어디~어디까지의 두 시작과 종료 수치를 시각적으로 편하게 입..

데모 (가능한것들) : (모바일 브라우저에서는 http://lungojs.tapquo.com/의 주소로 접근하시면 됩니다.) jQuery Mobile, Sencha Touch2 로 개발을 경험해 보았는데 2012 현재 시점으로 한국에서 가장 많이 사용되고 있는 Android 2.x 버젼대에서 모두 트랜지션 효과에서 문제가 발생하였습니다. 이거 IE6 호환 개발 문제 만큼 멘붕일으킵니다. (iOS는 무조건 잘 동작하므로 실험에서 제외) 대안을 찾다가 발견한것이 - 진도 모바일 (무료 GPL) - Kendo Mobile (유료) - iUI (무료 MIT 라이센스) - LungoJS (무료 GPL) 입니다. 진도 모바일은 호환성이 뛰어나 모든 기기에서 너무도 잘 작동하며 속도도 좋습니다. 하지만 기본적인 버튼..

아이폰 3: 320x480 아이폰 4 (레티나 디스플레이) : 640x960 아이패드 : 1024*768 안드로이드 (기종별 상이) : 갤럭시 : 480x800 HTC : 320x480

jQueryMobile .ui-page { -webkit-backface-visibility: hidden; } $(document).bind("mobileinit", function() { if (navigator.userAgent.indexOf("Android") != -1) { $.mobile.defaultPageTransition = 'none'; $.mobile.defaultDialogTransition = 'none'; } }); 출처 링크 SenchaTouch 2 .x-panel { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } 출처 링크

Phonegap 사이트에서 다운받고 압축을 해제하면 설치 패키지는 보이지 않고 폴더와 일반 파일들만 보인다. 설치 패키지는 lib 폴더 하위의 각 모바일운영체제 폴더 안에 있다. iOS의 경우 기존 phonegap-x.x.x.dmg 라는것에서 Cordova-1.7.0.dmg 와 같이 이름이 변경되어 있다. 여튼, 열려있는 Xcode가 있다면 Cmd + Q 하여 종료시키고 설치패키지를 더블클릭하여 설치하고 Xcode를 실행 > Cmd + Shift + N 하면 Cordova-Based Application 가 보인다. 그것을 선택하여 프로젝트를 시작한다. 프로젝트가 열리면 프로젝트에 Contrl + 클릭 > Show In Finder 로 파인더를 연 후 www 폴더를 Xcode의 프로젝트명으로 (프로젝트 ..

영어 가능하신 분들을 위한 원문 = http://www.stokkers.mobi/valuables/bartender.html 원작자의 Github에서 소스를 다운받고 작업할 디렉토리에 압축 해제해 주세요. 1. 아이콘 작업 다소의 포토샵 스킬이 필요합니다. 작업 전에 sprite_combined.png 파일을 잘 보십시오. 다운받은 소스의 압축을 풀어보면 templates 디렉토리가 있습니다. 그 아래에 탭바의 재료가 되는 포토샵(*.PSD) 파일이 존재하는데 templates_double.psd 를 포토샵으로 열고 가이드를 보이게(Ctrl + ;) 하면 원작자가 새겨놓은 가이드가 보일겁니다. 위에서 잘 보라고 해 두었던 sprite_combined.png 파일을 보면 아이콘이 위, 아래로 있습니다. 위..

Sencha Touch2 MVC 코딩중... /theApp/app/view/etc.js Ext.define('theApp.view.etc', { extend: 'Ext.List', requires: [ ' theApp.view.etc.ListItem.js' ] ...... }); 했더니 Ext.createByAlias Cannot create an instance of unrecognized alias 오류를 받았다. 해결은? 위 코드에서 etc와 etc는 달라야 한다. 아래와 같이 변경해서 해결하였다. ListItem.js 가 있는 폴더의 이름을 etc 에서 Etc 로 변경하였다. (자바스크립트는 대소문자를 구분한다.) Ext.define('theApp.view.etc', { extend: 'Ext.L..

MVC 환경에서 [WARN][Anonymous] [Ext.Loader] Synchronously loading 'app.view.Viewport'; consider adding 'app.view.Viewport' explicitly as a require of the corresponding class 오류 발생시 아래와 같이 views: 에 추가하니 사라졌다. Ext.application({ views: [ 'Viewport' ] }); 다른 이유와 해결법이 발생하면 추가예정.