jQuery Mobile 창 길이 내용 의 결함 및 해결 방법 사례 분석

본 논문 의 사례 는 jQuery Mobile 창의 긴 내용 의 결함 과 해결 방법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
앞의 글 인 는 창문 에 긴 내용 이 놓 여 있 는 상황 을 고려 하지 않 았 다.
창 에 긴 내용 이 나타 나 면 필자 의 고정 header 와 footer 의 전체 화면 구 조 를 사용 하 는 것 은 결함 이 있 습 니 다.

그림 에서 보 듯 이 긴 내용 의 마지막 내용 은 스크롤 바 가 맨 밑 으로 당 겨 질 때 까지 끝 낼 수 없다.
그리고 가능 한 것 은 현재 이곳 의 내용 이 반투명 으로 표시 되 어 있 지만 이 위 치 는 제출 버튼 같은 것 입 니 다.
사용 자 는 주문 할 수 없습니다.
따라서 원래 코드 를 개선 해 야 합 니 다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css" rel="external nofollow" rel="external nofollow" >
<script src="jqmobile/jquery-1.11.1.js"></script>
<script src="jqmobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" data-position="fixed" data-fullscreen="true">
 <div data-role="header" data-theme="b" data-tap-toggle = "false">
  <h1>title</h1>
 </div>
 <div data-role="content">
  <p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p>
 </div>
 <div data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" data-tap-toggle = "false">
   <div data-role="navbar">
   <ul>
    <li><a href="a.html" rel="external nofollow" rel="external nofollow" target="_self" data-icon="info">a</a></li>
    <li><a href="b.html" rel="external nofollow" rel="external nofollow" target="_self" data-icon="grid">b</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" class="ui-btn-active ui-state-persist" data-icon="star">c</a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

그 중의 content 그래 픽 에 스타일 을 더 하면 style="margin-bottom:50px"즉:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css" rel="external nofollow" rel="external nofollow" >
<script src="jqmobile/jquery-1.11.1.js"></script>
<script src="jqmobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" data-position="fixed" data-fullscreen="true">
 <div data-role="header" data-theme="b" data-tap-toggle = "false">
  <h1>title</h1>
 </div>
 <div data-role="content" style="margin-bottom:50px">
  <p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p><p>       </p>
 </div>
 <div data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" data-tap-toggle = "false">
   <div data-role="navbar">
   <ul>
    <li><a href="a.html" rel="external nofollow" rel="external nofollow" target="_self" data-icon="info">a</a></li>
    <li><a href="b.html" rel="external nofollow" rel="external nofollow" target="_self" data-icon="grid">b</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" class="ui-btn-active ui-state-persist" data-icon="star">c</a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

다음 그림 과 같이 페이지 를 다 쓸 수 있 습 니 다.

jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

핸드폰 렌더링에 대응하는 스마트폰 테마의 사용자 정의 with Theeme Roller

<- 전날: by marin선생님 휴대전화에 대응하는 렌더기는 HypCommon Func에 포함된 기능으로 전체 휴대전화가 XOPS 사이트에 대응하는 기능이다. 영입 시 권한 설정 등이 수반되기 때문에 조금 번거롭다...

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

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

jQuery Mobile 창 길이 내용 의 결함 및 해결 방법 사례 분석

좋은 웹페이지 즐겨찾기