1

我想得到如下所示的东西在此处输入图像描述

我使用的代码是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" href="my.css" />
    <style>
        /* App custom styles */
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
    </script>
</head>
<body>
    <div data-role="collapsible" data-collapsed="true">
    <h3>Tasks Today</h3>
    <ul data-role="listview" data-divider-theme="b" data-inset="true"></ul>
                    <ul data-role="listview" data-divider-theme="b" data-inset="true">
                        <li data-theme="c">
                            <a href="#" data-transition="slide">
                                list1
                            </a>
                        </li>
                        <li data-theme="c">
                            <a href="#page1" data-transition="slide">
                                list2
                            </a>
                        </li>
                        <li data-theme="c">
                            <a href="#page1" data-transition="slide">
                                list3
                            </a>
                        </li>
                    </ul>
                    </div>


           <div data-role="collapsible" data-collapsed="true">
                    <h3>
                        Tasts This Week
                    </h3>
                    <ul data-role="listview" data-divider-theme="b" data-inset="true">
                     <li data-theme="c">
                            <a href="#" data-transition="slide">
                                Button
                            </a>
                        </li>
                    </ul>
                </div>

</body>
</html>

但我不想在我的代码中使用下面的 css，因为它会影响我现有的 UI

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

任何人都可以帮助我在不使用此 jquery css 的情况下获得与我显示的相同的输出吗？

我用结构 css 替换了我的 css，我得到了如图所示的 UI 在此处输入图像描述

4

2 回答 2

1

检查这个小提琴。基本上包括来自 git 存储库的可折叠、列表视图和主题 css https://github.com/jquery/jquery-mobile/tree/master/css

http://jsfiddle.net/dhavaln/UCDfU/

于 2012-06-07T07:05:20.887 回答
0

您可以使用 jquery.mobile.structure.css，它只为您提供功能性 CSS，而无需所有样式。

http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.css

这是最新的 1.1.0 版本。如果您要更新到 1.1.0，则可以使用它或将其用于您的版本。

看起来你想要风格和结构。唯一的选择是更改 CSS。如果与您的 UI 有太多冲突，而您唯一想要的就是列表，请从 JQM CSS 主题文件http://code.jquery.com/mobile/1.1.0/jquery.mobile.theme复制 CSS- 1.1.0.css到你自己的 CSS 中。

查找所有 CSS.ui-collapsible以获取可折叠元素的样式。查找元素的 CSS 类的最佳方法是使用 Chrome 或 Firefox 中的 Web Developer/Firebug 工具。

于 2012-06-07T09:39:45.870 回答