jQuery的CSS範圍不能正常工作的selectmenu

我的頁面：JSP + Struts2的標籤+ jQuery庫+ jQueryUI的jQuery的CSS範圍不能正常工作的selectmenu

我有一個jQuery selectmenu和兩個JQuery的UI主題，我想風格第二的JQuery的selectmenu UI主題（css範圍），但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>

來源

2011-05-30 Amin Sh

太多的代碼，只顯示相關部分 – Ibu 2011-05-30 08:52:02

@Ibu：我只是想展現支柱的主題標籤，也許與財產以後有衝突！ – 2011-05-30 08:59:01

先調用所需的主題，或者更改樣式名稱 – Max 2011-05-30 09:25:49

我認爲你需要你download a custom theme之前添加CSS scope。 struts jQuery插件custom base path用於指定主題的路徑，如果它不在默認目錄中。

所以，我認爲你需要下載自定義主題，並提供一個CSS範圍，也主題文件夾名稱然後用主題文件夾名改變customBasepath的目錄。

來源

2011-05-30 11:05:07 andyb

我認爲這不是strut的問題（或者我的問題與Struts）！ struts主題的定義，但我什麼都沒有！謝謝你的哥們。 – 2011-05-30 12:39:11

我知道這個問題是在3年前問過的，但是我會回答那些在尋找完全相同的問題時發現這個主題的人（像我一樣）。

我假設你的選擇框被放置在一些分度，第二個主題的CSS範圍，如：

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

在這種情況下，如果你在selectmenu的API來看看，你可以找到關於菜單的appendTo屬性的信息。如果沒有值傳遞，包含可展開菜單的div將被放置在頁面主體的某處，可能位於底部。在這種情況下，帶有''的div以及所有<li>元素將不會被放在scope2類的範圍內，這就是爲什麼菜單採用第一主題設計的原因。

$('#select').selectmenu({ appendTo : '#select-div' });會做的伎倆

來源

2014-08-07 11:11:34 Nav

jQuery的CSS範圍不能正常工作的selectmenu

回答

相關問題