JQuery Mobile 모 바 일 기기 웹 개발 총괄
.1. 공식 데모 주소:
http://jquerymobile.com/
2. 공식 포럼 주소:
http://forum.jquery.com/
3. 개발 과정 에서 발생 한 문제 예시:
3.1 주제 (data - theme) 의 문제
jquery mobile 의 주 제 는 다음 과 같 습 니 다.
data-theme="a"
data-theme="b"
data-theme="c"
data-theme="d"
data-theme="e"
각종 주제 의 효 과 는 참고 하 시기 바 랍 니 다.
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/pages-themes.html
물론 일반 개발 할 때 기본 적 인 jquery mobile 스타일 의 테 마 를 사용 하지 않 습 니 다. 보통 회사 스타일 의 테마 스타일 을 사용 해 야 합 니 다. 다음은 제 가 jquery mobile 의 테 마 를 확장 하 는 것 입 니 다. 저 는 z 부터 공식 테마 css 스타일 을 복사 하여 변경 할 수 있 습 니 다.
//jqm-theme-extend.css
/* Z
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-z {
border-top: 1px solid #33CC42;
border-right: 0;
border-bottom: 1px solid #1D7425;
border-left: 0;
background: #004000;
color: #fff;
font-weight: bold;
line-height: 1.4;
//
background-image: -moz-linear-gradient(top,
#33CC42,
#1D7425);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #33CC42),
color-stop(1, #1D7425));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#049000', EndColorStr='#03b108')";
}
.ui-bar-z,
.ui-bar-z input,
.ui-bar-z select,
.ui-bar-z textarea,
.ui-bar-z button {
font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-z .ui-link-inherit {
color: #fff;
}
.ui-bar-z .ui-link {
color: #7cc4e7;
font-weight: bold;
}
.ui-body-z {
border: 1px solid #C6C6C6;
background: #cccccc;
color: #333333;
font-weight: normal;
line-height: 1.4;
background-image: -moz-linear-gradient(top,
#e6e6e6,
#cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #e6e6e6),
color-stop(1, #cccccc));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e6e6e6', EndColorStr='#cccccc')";
}
.ui-body-z,
.ui-body-z input,
.ui-body-z select,
.ui-body-z textarea,
.ui-body-z button {
font-family: Helvetica, Arial, sans-serif;
}
.ui-body-z .ui-link-inherit {
color: #333333;
}
.ui-body-z .ui-link {
color: #2489CE;
font-weight: bold;
}
.ui-btn-up-z {
border: 1px solid #049000;
background: #049000;
font-weight: bold;
color: #fff;
//
/*
background-image: -moz-linear-gradient(top,
#049000,
#049000);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #049000),
color-stop(1, #049000));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#049000', EndColorStr='#049000')";
*/
}
.ui-btn-up-z a.ui-link-inherit {
color: #fff;
}
.ui-btn-hover-z {
border: 1px solid #74C138;
background: #33CC42;
font-weight: bold;
color: #fff;
/*
background-image: -moz-linear-gradient(top,
#74C138,
#74C138);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #74C138),
color-stop(1, #74C138));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#74C138', EndColorStr='#74C138')";
*/
}
.ui-btn-hover-z a.ui-link-inherit {
color: #fff;
}
.ui-btn-down-z {
border: 1px solid #03B108;
background: #03B108;
font-weight: bold;
color: #ffffff;
/*
background-image: -moz-linear-gradient(top,
#03B108,
#03B108);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #03B108),
color-stop(1, #03B108));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#03B108', EndColorStr='#03B108')";
*/
}
.ui-btn-down-z a.ui-link-inherit {
color: #fff;
}
.ui-btn-up-z,
.ui-btn-hover-z,
.ui-btn-down-z {
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
/* Y
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-y {
border: 0;
background: transparent;
color: #004000;
font-weight: normal;
}
.ui-body-y {
border: 0;
background: transparent;
color: #004000;
font-weight: normal;
line-height: 1.4;
}
.ui-btn-up-y {
border: 1px solid #049000;
background: #049000;
font-weight: bold;
font-size: 14px;
color: #fff;
line-height: 1.4;
/*
background-image: -moz-linear-gradient(top,
#049000,
#049000);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #049000),
color-stop(1, #049000));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#049000', EndColorStr='#049000')";
*/
}
.ui-btn-up-y a.ui-link-inherit {
color: #fff;
}
.ui-btn-hover-y {
border: 1px solid #74C138;
background: #74C138;
font-weight: bold;
font-size: 14px;
color: #fff;
/*
background-image: -moz-linear-gradient(top,
#74C138,
#74C138);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #74C138),
color-stop(1, #74C138));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#74C138', EndColorStr='#74C138')";
*/
}
.ui-btn-hover-y a.ui-link-inherit {
color: #fff;
}
.ui-btn-down-y {
border: 1px solid #03B108;
background: #03B108;
font-weight: bold;
font-size: 14px;
color: #fff;
/*
background-image: -moz-linear-gradient(top,
#03B108,
#03B108);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #03B108),
color-stop(1, #03B108));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#03B108', EndColorStr='#03B108')";
*/
}
.ui-btn-down-y a.ui-link-inherit {
color: #fff;
}
.ui-btn-up-y,
.ui-btn-hover-y,
.ui-btn-down-y {
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
/* X
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-x {
border: 1px solid #B3B3B3;
border-collapse:collapse;
background: transparent;
color: #3E3E3E;
font-weight: normal;
font-size: 14px;
line-height: 1.4;
}
.ui-bar-x,
.ui-bar-x input,
.ui-bar-x select,
.ui-bar-x textarea,
.ui-bar-x button {
font-family: Helvetica, Arial, sans-serif;
}
.ui-body-x {
border: 1px solid #B3B3B3;
border-collapse:collapse;
font-weight: normal;
font-size: 14px;
color: #333333;
background: transparent;
line-height: 1.4;
}
.ui-body-x,
.ui-body-x input,
.ui-body-x select,
.ui-body-x textarea,
.ui-body-x button {
font-family: Helvetica, Arial, sans-serif;
}
.ui-body-x .ui-link-inherit {
color: #333333;
}
.ui-body-x .ui-link {
color: #2489CE;
font-weight: bold;
}
.ui-btn-up-x {
border: 1px solid #049000;
background: #049000;
font-weight: bold;
font-size: 14px;
color: #fff;
/*
background-image: -moz-linear-gradient(top,
#049000,
#049000);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #049000),
color-stop(1, #049000));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#049000', EndColorStr='#049000')";
*/
}
.ui-btn-up-x a.ui-link-inherit {
color: #fff;
}
.ui-btn-hover-x {
border: 1px solid #74C138;
background: #74C138;
font-weight: bold;
font-size: 14px;
color: #fff;
/*
background-image: -moz-linear-gradient(top,
#74C138,
#74C138);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #74C138),
color-stop(1, #74C138));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#74C138', EndColorStr='#74C138')";
*/
}
.ui-btn-hover-x a.ui-link-inherit {
color: #fff;
}
.ui-btn-down-x {
border: 1px solid #03B108;
background: #03B108;
font-weight: bold;
font-size: 14px;
color: #fff;
/*
background-image: -moz-linear-gradient(top,
#03B108,
#03B108);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #03B108),
color-stop(1, #03B108));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#03B108', EndColorStr='#03B108')";
*/
}
.ui-btn-down-x a.ui-link-inherit {
color: #fff;
}
.ui-btn-up-x,
.ui-btn-hover-x,
.ui-btn-down-x {
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
3.2 페이지 의 배경 색 을 수정 하고 페이지 가 모두 이렇다 고 가정 합 니 다.
<body>
<div id="mainPage" data-role="page" class="type-index">
<decorator:body />
</div>
</body>
type - index 는 jquery mobile 에서 자체 적 으로 가지 고 있 는 스타일 입 니 다. type - index 를 다시 쓰 려 면 다음 과 같 습 니 다.
//mobile.css
/** */
div.type-index{
background:#f4f4f4;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #f4f4f4),
color-stop(1, #f4f4f4));
}
3.3 손가락 이 위로 미 끄 러 질 때 페이지 동적 으로 다음 페이지 를 불 러 오 는 문 제 를 해결 합 니 다.
var clientHeight = document.body.clientHeight; //웹 페이지 보 이 는 영역 높 음
계속 하 다.
3.4 페이지 간 의 미끄럼 효과 에 대한 초기 분석
계속 하 다.
3.5 페이지 에서 크기 를 조절 하기 어 려 운 요소 의 스타일 해결 방법 예:
계속 하 다.
3.6 Ajax 의 활용:
계속 하 다.
3.6 fieldset 의 grid 용법:
계속 하 다.
4. 모 바 일 기기 의 웹 페이지 성능 에 대한 고려:
계속 하 다.
5. jquery mobile 이 모 바 일 웹 페이지 에서 사용 하 는 부족 함:
계속 하 다.
시작, 시간 나 면 언제든지 업데이트
.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bootstrap DateTimepicker 예제이 기사에서는 예를 들어 부트스트랩 날짜 시간 선택기를 구현하는 방법을 살펴보겠습니다. 부트스트랩 4 날짜 시간 선택기는 html, php 또는 모든 laravel 파일에서 날짜와 시간을 표시하는 데 사용됩니다. 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
