JQuery Mobile 모 바 일 기기 웹 개발 총괄

12183 단어 jquery mobile

한 달 반 동안 의 모색 끝 에 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 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

jQuery 전후 예

이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Linux_CentOS 7 사용자 정의 부팅 자동 시작

반응 양식

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다