Jquery CSS Scope Doesn't Work Properly on selectmenu
My page:JSP+Struts2 tags+JQuery Library+JqueryUI
I have a JQuery selectmenu and two JQuery UI themes, i want to style the selectmenu with the second JQuery UI theme(css scope), but the content area(background of option tags) of my selectmenu is styled with the first theme!
What should I do?
here are some of my code:
<!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){
v开发者_如何学Pythonar 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>
I think you need to add the CSS scope before you download a custom theme. The struts jQuery plugin custom base path is used to specify the path to the theme if it is not in the default directory.
So, I think you need to download the custom theme and supply a CSS scope and also a theme folder name and then change the customBasepath to the directory with the theme folder name.
I know the question was asked over 3 years ago but I will answer it for those ( like me ) who found this topic while looking for the exact same problem.
I assume that your select box is placed in some div with the CSS scope of the second theme, e.g:
<div class="scope2" id="select-div">
<select id="select"></select>
</div>
In such case, if you take a look at the API of the selectmenu, you can find the information about appendTo property of the menu. If no value is passed, the div containing the expandable menu will be placed somewhere in the body of the page, probably at the bottom. In such case, the div with '' and all the <li> elements will not be placed in scope of the scope2 class and that is why the menu is styled with first theme.
$('#select').selectmenu( { appendTo : '#select-div' } ); will do the trick
加载中,请稍侯......
精彩评论