问题描述
|
我的页面：JSP + Struts2标签+ JQuery库+ 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,{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>
解决方法
我认为您需要在下载自定义主题之前添加CSS作用域。如果主题不在默认目录中，则使用struts jQuery插件的自定义基本路径指定主题的路径。
因此，我认为您需要下载自定义主题，并提供CSS范围和主题文件夹名称，然后将“ 1”更改为带有主题文件夹名称的目录。
, 我知道这个问题是3年前提出的，但是我会为那些在寻找完全相同的问题的同时找到此主题的人（像我一样）回答。
我假设您的选择框位于第二个主题的CSS范围的某个div中，例如：
<div class=\"scope2\" id=\"select-div\">
<select id=\"select\"></select>
</div>
appendTo
<li>
scope2
$(\'#select\').selectmenu( { appendTo : \'#select-div\' } );