Comment résoudre le défaut de contenu long du formulaire jQuery Mobile-js tutoriel-php.cn

Comment résoudre le défaut de contenu long du formulaire jQuery Mobile

小云云

Libérer： 2018-02-05 11:47:48

original

1281 Les gens l'ont consulté

Cet article présente principalement les lacunes et les solutions du contenu long de jQueryMobile. Il analyse la solution lorsque la couche flottante inférieure de jQueryMobile est bloquée à l'aide d'exemples spécifiques. C'est très simple et pratique. Les amis qui en ont besoin peuvent s'y référer. . J'espère que cela pourra aider tout le monde.

Une fois qu'un contenu long apparaît dans le formulaire, il existe des défauts dans l'utilisation de la mise en page plein écran de l'auteur avec un en-tête et un pied de page fixes

Comme le montre le. figure, Le dernier contenu d'un contenu long ne peut pas être épuisé tant que la barre de défilement n'est pas tirée vers le bas
Et il est très probable que même si le contenu à cet endroit est désormais affiché de manière semi-transparente, il y a souvent des soumissions. boutons ou quelque chose comme ça

Les utilisateurs ne peuvent pas cliquer du tout,

Par conséquent, des améliorations doivent être apportées et le code d'origine :

<!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>
<p data-role="page" data-position="fixed" data-fullscreen="true">
 <p data-role="header" data-theme="b" data-tap-toggle = "false">
  <h1>title</h1>
 </p>
 <p 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>
 </p>
 <p data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" data-tap-toggle = "false">
   <p 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>
  </p>
 </p>
</p>
</body>
</html>

Copier après la connexion

Ajoutez un style au calque de contenu, style="margin-bottom:50px" qui devient :

<!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>
<p data-role="page" data-position="fixed" data-fullscreen="true">
 <p data-role="header" data-theme="b" data-tap-toggle = "false">
  <h1>title</h1>
 </p>
 <p 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>
 </p>
 <p data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" data-tap-toggle = "false">
   <p 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>
  </p>
 </p>
</p>
</body>
</html>

Copier après la connexion

pour épuiser la page, comme indiqué dans la figure ci-dessous :