Jquery CSS 范围在选择菜单上无法正常工作答案

【问题标题】：Jquery CSS Scope Doesn't Work Properly on selectmenuJquery CSS 范围在选择菜单上无法正常工作
【发布时间】：2011-05-30 08:40:18
【问题描述】：

我的页面：JSP+Struts2标签+JQuery库+JqueryUI

我有一个 JQuery 选择菜单和两个 JQuery UI 主题，我想使用第二个 JQuery UI 主题（css 范围）设置选择菜单的样式，但是我的选择菜单的内容区域（选项标签的背景）使用第一个主题设置样式！

我该怎么办？

这是我的一些代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<sj:head jqueryui="true" jquerytheme="orange" customBasepath="css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
    /* selectmenu css */
        fieldset { border:0;  margin-bottom: 40px;} 
        label,select,.ui-select-menu { float: right; }
        select { }
        /*select with custom icons*/
        body a.customicons { height: 2.8em;}
        body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
        body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
    /* /selectmenu css */
</style>

        <!-- JQuery --><link type="text/css" href="css/orange/jquery-ui.custom.css" rel="stylesheet"/>
        <!-- JQuery --><script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>

        <!-- interiorTheme --><link type="text/css" rel="Stylesheet" href="css/interior_uilightness/jquery-ui-1.8.13.custom.css">

        <!-- selectMenu --><link type="text/css" rel="Stylesheet" href="css/element/jquery.ui.selectmenu.css">
        <!-- selectMenu --><script type="text/javascript" src="js/element/jquery.ui.selectmenu.js"></script>

<script type="text/javascript">
    //--selectmenu
        $(function(){
            $('select#buy_groupBy').selectmenu({
                width: 220,
                maxHeight: 400,
                style:'popup',
                format: addressFormatting
            });
        });
    //a custom format option callback
        var addressFormatting = function(text){
            var newText = text;
            //array of find replaces
            var findreps = [
                {find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
                {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
                {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
                {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
                {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
            ];

            for(var i in findreps){
                newText = newText.replace(findreps[i].find, findreps[i].rep);
            }
            return newText;
        }
    //--/selectmenu
</script>

</head>
<body>


                                        <div class="interior_UILightness">
                                        <s:form action="buy.action" method="post" onsubmit="return validateBuy()" cssStyle="margin-top:-5px;">
                                            <tr><td></td><td><s:hidden name="selectedGame"/></td></tr>
                                            <s:select name="groupBy" label="xxxx" list="#{'1':'1','2':'2','3':'3'}" cssStyle="width:220px;"/>
                                            <s:textfield name="symbol" label="xxxx" readonly="true" cssClass="strutsBuyTextField"/>
                                            <s:textfield id="price" name="price" maxlength="16" label="xxxx" readonly="true" cssClass="strutsBuyTextField"/>
                                            <s:textfield name="shares" maxlength="7" label="xxxx" cssClass="strutsBuyTextField" onkeyup="showDetails();" onkeydown="hideMessage();"/>
                                            <s:submit value="xxxx" name="buySubmit" cssClass="submit" cssStyle="margin-right:80px"/>
                                        </s:form>
                                        </div>

</body>
</html>

【问题讨论】：

代码太多，只显示相关部分
@Ibu : 我只是想显示 struts 主题标签，可能与某些东西有冲突！
先调用需要的主题，或者更改样式名称
@Max：我以前做过 :( ，它不起作用，谢谢

标签： javascript jquery css jquery-ui scope

【解决方案1】：

我认为您需要在 download a custom theme 之前添加 CSS scope。 struts jQuery 插件custom base path 用于指定主题的路径，如果它不在默认目录下。

所以，我认为您需要下载自定义主题并提供 CSS 范围以及 主题文件夹名称，然后将 customBasepath 更改为具有 主题文件夹名称的目录.

【讨论】：

我认为这不是 strut 的问题（或者我的 Struts 的问题）！我尝试了没有 struts 主题定义的代码，但我一无所获！谢谢你的朋友。

【解决方案2】：

我知道这个问题是 3 年前提出的，但我会为那些（像我一样）在寻找完全相同的问题时发现这个主题的人回答这个问题。

我假设您的选择框放置在具有第二个主题的 CSS 范围的某个 div 中，例如：

<div class="scope2" id="select-div">
    <select id="select"></select>
</div>

在这种情况下，如果你看一下选择菜单的API，你可以找到关于菜单的appendTo属性的信息。如果未传递任何值，则包含可扩展菜单的 div 将放置在页面主体的某个位置，可能位于底部。在这种情况下，带有 '' 的 div 和所有 <li> 元素将不会被放置在 scope2 类的范围内，这就是菜单使用第一个主题样式设置的原因。

$('#select').selectmenu( { appendTo : '#select-div' } ); 可以解决问题

【讨论】：