Jquery移动端研发——如何自定义CSS

Question

我们正在 Zend Framework 上运行一个(桌面)电子商务网站，该网站非常大(在编码和不同部分方面)。我们现在正在规划一个针对移动设备优化的网站，并且我们正在研究 Jquery Mobile。

我们正在尝试两件事来决定我们应该选择哪条路径。

1) 使用 Jquery 移动主题构建我们的 HTML，然后从那里自定义它。

或

2) 构建我们自己的主题。

目前我正在尝试 2) 构建我们自己的主题。

我发现有关自定义页面 (CSS) 的问题。请你回答我的以下问题。我正在按照 Jquery 移动网站上的指南进行操作。

1) 是否必须包含默认的 jquery css ( http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css )？

或

2) 是否可以使用我们的自定义样式更新默认的 jquery css？

另一个问题，我使用下面的代码创建了文件，

        <div data-role="collapsible" data-inset="false" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" data-corners="false" data-theme="inner_menu">

            <h3 class="inner_menu_heading">Section A1</h3>



            <div data-role="collapsible-set" data-inset="false" data-icon="arrow-r" data-iconpos="right" data-corners="false">

                <div data-role="collapsible" data-collapsed="false">

                    <h3 class="sub_menu_heading">Section A1.1</h3>

                    <p>I'm the collapsible set content for section 1.</p>

                </div>



                <div data-role="collapsible" data-collapsed="false">

                    <h3 class="sub_menu_heading">Section A1.2</h3>

                    <p>I'm the collapsible set content for section 2.</p>

                </div>

            </div>

        <!-- section A1 end here-->

        </div>

但是在页面加载后，它会提供额外的标签。请看下面的代码。

<div class="ui-collapsible-content" aria-hidden="false">

    <div data-corners="false" data-iconpos="right" data-icon="arrow-r" data-inset="false" data-role="collapsible-set" class="ui-collapsible-set">

                    <div data-collapsed="false" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">

                        <h3 class="sub_menu_heading ui-collapsible-heading ui-collapsible-heading-collapsed ui-li-heading">

                        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-up-c" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="right" data-theme="c">

                        <span class="ui-btn-inner"><span class="ui-btn-text">Section A1.1<span class="ui-collapsible-heading-status"> click to expand contents</span></span>

                        <span class="ui-icon ui-icon-shadow ui-icon-plus">&nbsp;</span></span></a></h3>

                        <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

                            <p class="ui-li-desc">I'm the collapsible set content for section 1.</p>

                        </div>

                    </div>



                    <div data-collapsed="false" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">

                        <h3 class="sub_menu_heading ui-collapsible-heading ui-li-heading ui-collapsible-heading-collapsed">

                        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-focus ui-btn-up-c" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="right" data-theme="c">

                        <span class="ui-btn-inner"><span class="ui-btn-text">Section A1.2<span class="ui-collapsible-heading-status"> click to expand contents</span></span>

                        <span class="ui-icon ui-icon-shadow ui-icon-plus">&nbsp;</span></span></a></h3>

                        <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

                            <p class="ui-li-desc">I'm the collapsible set content for section 2.</p>

                        </div>

                    </div>

                </div>

<!-- section A1 end here-->

</div>

这些附加标签(例如 new 和 之后的标签)导致了样式问题。是否可以删除/自定义这些标签以避免出现问题？

或

因为我需要包含 jquery.min CSS 文件，我是否应该只保留 jquery 默认 CSS 文件并创建一个覆盖 CSS 文件以进行自定义？

或

我应该制作自己的 CSS 文件，复制普通的 jquery CSS，然后自己更改它吗？因此我总共有一个 CSS 文件。

请帮助/建议我解决上述问题。

Answer 1

我将尝试解释我所知道的关于使用自定义 jquery 移动 CSS 的一些事实。

1.当您使用 jquery 自定义您的页面时，它会尝试以其自己的格式重新设计您的整个标记，例如:如果您还没有添加一个“页面” Angular 色标记，则将您的全部内容添加到一个“页面” Angular 色标记中。还有它将为元素样式添加额外的标签。这是因为它将“data-role”属性转换为程式化标记，这不是问题。

2.如果您从 jquery 主题滚轮构建自己的自定义主题，您应该注意它会推出一个带有您设计的新色板的 css。如果您只想使用自定义主题来设置元素样式，则使用jquery-mobile.css 是可选的。如果你想使用 jquery css 的主题并添加你自己的新主题，那么创建一个新的带有 theme="f"或更高版本的样本，因为主题“a”到“e”已经预定义在 jquery mobile css 中。将新主题与 jquery mobile css 结合使用需要修改 jquery css，即只需采用新样式并将其粘贴到 jquery css 中。这不会很困难，因为您将使用色板字母制作新样式，例如 ui-bar-f、ui-body-f、ui-button-up-f 等....

我认为您也应该看看 jquery 移动文档。

希望对您有所帮助。