Редактируются ли python выпадающие меню в HTML / CSS? - PullRequest
Новая
       34

Редактируются ли python выпадающие меню в HTML / CSS?

0 голосов
/ 01 апреля 2020

Итак, в основном я создал выпадающее меню, используя этот метод:

Контроллер: 

        all_useroptions = []
        for opt in db().select(db.useroptions.ALL):
            all_useroptions.append(OPTION(opt.symbol, _value=opt.id))
        opt_sel = SELECT(*all_useroptions, _name='opt_id', value=request.vars.opt_id)

HTML: 

 {{=opt_sel}}

Можно ли редактировать «выпадающая» часть меню? Я могу редактировать «кнопку» моего меню, используя CSS: 

        #opt_id {
        color: rgb(105,105,105);
        padding: 10px 10px;
        text-align: center;
        border-radius: 5px;
        display: inline-block;
        font-size: 20px;
        margin: 10px 5px;
        cursor: pointer;
        position: relative;
        min-width: 160px;
        }

Но это только меняет кнопку, а не мое меню. Я хотел бы сделать меню «красивее», изменив его форму, цвет и высоту, а также добавить текст между опциями. Кто-нибудь знает, как это сделать?

Ответы [ 2 ]

1 голос
/ 01 апреля 2020

В вашем окончательном HTML, который выводится на страницу (проверьте страницу, сгенерированную вашим скриптом python, чтобы узнать, что он делает), вы можете добавить пользовательский фрагмент js для дальнейшей модификации HTML, динамическое изменение элементов в зависимости от того, что выводит исходный код. 

    ...template code above that contains yours {{=opt_sel}}...

    <!-- javascript snippet you add at bottom of page to change html above -->
    <script>
       document.querySelectorAll(".classOnABunchOfElementsMadeByOptSel > li").style.background = "red";
       document.querySelector("#secondElementMadeByOptSel").style.margin = "20px";

    </script>

см. Как изменить HTML выбранный параметр, используя JavaScript?

и для более базовый c учебник по изменению HTML с javascript: https://www.w3schools.com/js/js_htmldom_elements.asp

0 голосов
/ 06 апреля 2020

Просто добавьте _class к списку аргументов помощника OPTION: 

all_useroptions = []
for opt in db().select(db.useroptions.ALL):
    all_useroptions.append(OPTION(opt.symbol, _value=opt.id, _class='prettier'))
opt_sel = SELECT(*all_useroptions, _name='opt_id', value=request.vars.opt_id)

И создайте «более раннее» определение css со своими предпочтениями

Для получения дополнительной информации обратитесь к web2py документация для помощников HTML: http://web2py.com/books/default/chapter/29/05/the-views#HTML -помощи 

    *Named arguments that start with an underscore are interpreted as HTML tag attributes (without the underscore)*
...