Jquery CSS Scope не работает должным образом в selectmenu - PullRequest
Новая
       0

Jquery CSS Scope не работает должным образом в selectmenu

2 голосов
/ 30 мая 2011

Моя страница: теги JSP + Struts2 + библиотека JQuery + JqueryUI

У меня есть JQuery selectmenu и две JQuery UI темы, я хочу стилизовать selectmenu со второй темой JQuery UI (css scope), но область содержимого (фон тегов option) моего 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>

Ответы [ 2 ]

1 голос
/ 07 августа 2014

Я знаю, что вопрос задавался более 3 лет назад, но я отвечу на него для тех (как я), которые нашли эту тему, когда искали точно такую ​​же проблему.

Я предполагаю, что ваш блок выбора помещен в некоторый div с областью CSS второй темы, например: 

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

В таком случае, если вы посмотрите на APIВ меню выбора вы можете найти информацию о appendTo свойствах меню.Если значение не передается, элемент div, содержащий расширяемое меню, будет размещен где-то в теле страницы, возможно, внизу.В этом случае div с '' и всеми элементами <li> не будут помещены в область действия класса scope2, и поэтому в меню используется стиль первой темы.

$('#select').selectmenu( { appendTo : '#select-div' } );сделать трюк

1 голос
/ 30 мая 2011

Я думаю, вам нужно добавить область CSS , прежде чем загрузить пользовательскую тему .Плагин JQuery Struts Настраиваемый базовый путь используется для указания пути к теме, если он не находится в каталоге по умолчанию.

Итак, я думаю, вам нужно скачать настраиваемую тему и предоставитьобласть видимости CSS, а также имя папки темы , а затем измените customBasepath на каталог с именем папки темы .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...