Question

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

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

我该怎么办？

这是我的一些代码：

<!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>

Answer 1

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

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

Answer 2

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

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

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

在这种情况下，如果您查看selectmenu的API，可以找到有关菜单appendTo属性的信息。如果没有传递任何值，则包含可扩展菜单的div将放置在页面正文中的某个位置，可能位于底部。在这种情况下，div与＆＃39;＆＃39;并且所有<li>元素都不会放在scope2类的范围内，这就是菜单使用第一个主题设置样式的原因。

$('#select').selectmenu( { appendTo : '#select-div' } );会做到这一点

Jquery CSS Scope在selectmenu上无法正常工作

2 个答案: