본문 바로가기

----- IT -----/jQuery Moblie66

jQuery Mobile - Theming content Theming the content area 페이지 속성이 있는 테그에 data-theme=”e” 속성을 추가하여 해당 페이지에 테마를 적용할 수 있습니다. Theming collapsible blocks 접이식 해더에 색상을 적용하기 위해서는 data-theme 속성을 추가해 줍니다. 아이콘과 바디는 현재는 data 속성을 통해 테마를 적용할 수 없습니다. 그러나 직접 커스텀 css를 통해 스타일되어 질 수 있습니다. Themed examples A theme swatch on content & collapsible H1 Heading This is a paragraph that contains strong, emphasized and linked text. Here is more text so you.. 2011. 5. 25.
jQuery Mobile - Collapsible content markup(접이식 블록) 접이식 블록의 컨텐트를 만들기 위해 컨테이너를 하나 만들고 data-role=”collapsible” 속성을 추가합니다. 이 컨테이너 안에 직접적으로 해더 엘리먼트(H1~H6)를 추가합니다. 프레임웍은 그 해더 엘리먼트를 클릭가능한 버튼으로 스타일 해주며, 확장 가능한 지시자로 왼쪽에 “+”아이콘을 추가해줍니다. 해더태그 이후에 접혀지길 원하는 어떤 HTML 마크업이라도 추가 할 수 있습니다. 프레임웍은 해해더부분 클릭할 때 보여지고 사라지는 컨테이너로 이 마크업을 감쌀 것입니다. 접이식 예제1 이부분이 숨겨지고 보여질 부분입니다. 기본적으로 접이식 태그는 펼쳐져서 보여지는데, 만약, 로딩시 접혀져 보여지도록 하기 위해서는 data-collapsed=”true” 속성을 추가합니다. 아래는 4가지의 다른 .. 2011. 5. 24.
jQuery Mobile - Layout grids 여러 컬럼이 있는 레이아웃은 일반적으로 모바일환경에서는 추천되지 않습니다. 좁은 스크린의 길이 때문입니다. 그러나, 버튼이나 네이게이션 바와 같은 작은 요소들을 나열할 필요가 있을 경우가 있습니다. JQM 프레임웍에서는 ui-grid로 불리는 편리한 블록 스타일 class를 통해 css 기반 컬럼을 쉽게 만들수 있습니다. 두가지 프리셋 레이아웃이 있는데, 그중 하나는 ui-grid-a의 class를 사용하는 두개의 컬럼과 ui-grid-b의 class를 사용하는 세개의 컬럼입니다. 컬럼이 필요한 어느 상황에라도 사용이 가능합니다. Grid는 테두리나 백그라운드가 없이 보여질수 있는 100%의 가로 길이를 사용합니다. 패딩과 마진도 없습니다. 그래서, 그리드들은 그 내부에 있는 요소들의 스타일을 방해해서는.. 2011. 5. 23.
jQuery Mobile - Content formatting JQM에서 페이지의 컨텐트는 제약 조건을 두지 않습니다. 그러나 JQM 프레임웍은 많은 유용한 접을수 있는 패널(collapsible panels)과 다수열의 그리드 레이아웃(multiple-column grid layout)과 같은 툴,위젯들을 제공하고 생성하기 쉽도록 해줍니다. Basic HTML styles JQM에서 컨텐트의 스타일링은 간단합니다. 우리의 목적은 브라우저의 기본 렌더링을 우선으로 하고, 우리는 좀더 읽기 편하도록 패딩을 조정하고, 폰트와 색상을 적용한 theming system을 사용하면 됩니다 간편한 컨텐트 스타일링 작업는 디자이너와 개발자들에게 복잡한 스타일에 머리 싸매지 않도록 편한 작업환경을 만들어줍니다. Default HTML markup styling 기본적으로 JQM .. 2011. 5. 20.
jQuery Mobile - Theming Buttons JQM은 버튼들의 스타일을 제어하는 rich theming system 을 가지고 있습니다. 테마가 적용된 Container에 하위 태그가 하나 추가가 되면, 자동적으로 부모 container가 가지고 있는 테마를 적용 받습니다. 그래서 ‘a’ 테마가 적용된 content의 자식 개체들은 자동적으로 a 테마를 적용 받습니다. 아래 버튼들은 같은 html 마크업에 다른 테마를 적용했습니다. A swatchButton B swatchButton C swatchButton D swatchButton E swatchButton A swatchButton 마지막 예제와 같이 상위 태그를 버튼으로 하고 하위 버튼에 테마를 적용하면, 기본 테마의 버튼안에 글자와 테마가 적용된 버튼을 구성으로 보여집니다. 각각의 버튼.. 2011. 5. 19.
jQuery Mobile - Grouped Buttons 네비게이션 처럼 보이게 하기 위해서 여러 버튼을 한 블럭처럼 보이게 할 수 있습니다. 버튼들의 상위 div 태그에 data-role=”controlgroup” 속성을 추가하면 프레임웍이 세로로 나열한 버튼 그룹을 만들어 줄 것입니다. 각 버튼간에 적용된 마진을 제거하고 쉐도우를 삭제하여 중간에 나열된 버튼들이 어색하지 않도록 보여줍니다. Yes No Maybe 감싸고 있는 태그의 속성에 data-type=”horizontal” 속성을 추가하면, 한 라인에 가로방향으로 버튼들이 나열됩니다. 버튼안의 content 길이에 따라 버튼의 가로 길이가 결정되어집니다. Yes No Maybe 만약, 버튼이 개수가 많거나, 버튼 content가 길어서 스크린의 한 라인에 들어가지 않으면 자동으로 다음 줄로 내려가지니.. 2011. 5. 18.
jQuery Mobile - Inline Buttons 디폴트 버튼의 가로 길이는 스크린을 꽉 채운 형태입니다. 만약, 작은 버튼을 만들고자 한다면, 버튼 속성으로 data-inline=”true” 를 추가해 주면 됩니다. Button 만약, 같은 라인에 여러 버튼을 나열하고 싶은때는 버튼 태그를 data-inline=”true” 속성을 추가한 상위 div 태그로 감싸줍니다. Cancel Save 하지만 실제로 해보니 아직은 적용이 안되네요. 버젼이 올라가면 가능해질 것 같습니다. 불편하지만 현재까지는 각 태그별로 속성을 추가하여야 합니다. Cancel lalalaalal Save 이렇게 말이죠.^^ 2011. 5. 18.
jQuery Mobile - Custom icon 사용자 아이콘을 사용하기 위해, data-icon 값(ex, myapp-daeson)을 유일한 이름으로 설정하면 버튼 플러그인이 data-icon 값 앞에 ui-icon-을 붙여 class를 생성합니다. 사용자는 ui-icon-myapp-daeson class 속성을 타겟으로 css를 구현 가능하며, 일관성을 유지하기 위해 18x18 pixels와 PNG-8의 알파 투명도 규격으로 사용합니다. Test Custom icon html파일에 추가할 css 파일을 link 하고, 아래와 같이 배경색과 아이콘의 가로길이 사이즈를 설정해봅니다. .ui-icon-cheolwoo { background-color : red; width : 2em; } 테마 A의 아이콘 버튼 My button 테마 B의 아이콘 버튼 .. 2011. 5. 17.
jQuery Mobile - Button icons 버튼에 아이콘을 추가할 수 있습니다. JQM 프레임웍은 모바일 앱에서 자주 사용되는 아이콘을 포함하고 있습니다. 저용량 다운로드 JQM버젼에는 모든 배경색에 훌륭하게 대비될 수 있는 검정색의 반투명 원모양위에 하얀색 아이콘을 포함하고 있습니다. Ex1. Delete Ex2. 버튼 태그에 아이콘 추가하기(버튼 태그에는 아이콘이 아직 제대로 적용이 안되네요^^) delete icon Button Ex3. Input type=”submit” 태그에 아이콘 추가하기 그외에도 아래와 같이 많은 아이콘들이 사용 가능합니다. 아이콘의 위치 아이콘의 디폴트 위치는 왼쪽입니다. 아이콘의 위치 설정 속성은 data-iconpos=[right, top, bottom] 입니다. right position icon Delete.. 2011. 5. 17.
jQuery Mobile - Button markup options 버튼들은 앵커 태그를 사용하는 링크와 같은 네비게이션의 용도와 폼을 전송하기 위한 용도로 많이 사용됩니다. -링크를 버튼 스타일로 만들기 링크를 위한 앵커 태그에 [data-role=”button”] 속성을 추가하면, 프레임웍에서 해당 링크를 버튼 스타일로 보이도록 css를 생성해 줍니다. link bar -폼 버튼 편리한 스타일링을 위해 프레임웍에서 자동적으로 버튼 태그를 변환해줍니다. Input 타입이 submit, reset, button, image들도 [data-role=”button”] 속성이 없더라도 버튼 처럼 자동으로 변환해줍니다. 기본 버튼 임의의 버튼 태그에 강제로 속성을 추가해 스타일을 셋팅해 보려하니 적용이 되지 않았습니다. 그래서, 프레임웍에서 자동으로 변환하는 소스를 보니 아래와.. 2011. 5. 16.

티스토리툴바