Question

！[在此处输入图片说明] [1]我正在使用jQuery移动应用程序。我的列表屏幕上是否有可能产生渐变效果？我目前的代码如下：

<div data-role="page" data-theme="a" data-content-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Header</h1>
 </div>
 <div class="content-primary" >
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false">
  <li>
    <h3><a href="#" style="text-decoration:none;color:#333333;">Sunday</a></h3>
    <p class="topic"><strong>Sub</strong></p>
    <p>Date</p>
  </li>
  <li>
    <h3><a href="#" style="text-decoration:none;color:#333333;">Monday</a></h3>
    <p class="topic"><strong>Sub </strong></p>
    <p>Date</p>
  </li>
  <li>
    <h3><a href="#" style="text-decoration:none;color:#333333;">Tuseday</a></h3>
    <p class="topic"><strong>Sub</strong></p>
    <p>Date</p>
  </li>
   </ul>
 </div>
 </div>

Answer 1

将渐变背景设置为ui-listview，将ui-btn的背景设置为transparent。

.ui-listview {
   background: -webkit-linear-gradient(top, #fc3232 0%, #ffd242 100%);
}

.ui-listview li .ui-btn {
   background: transparent;
}

<强> Demo

在jQuery mobile中为列表屏幕生成渐变效果？

1 个答案: