Как настроить размер кнопки ссылки в Jquery EasyUI вместо использования встроенного маленького или большого размера?

Я хочу создать несколько мобильных веб-страниц с некоторыми значками. Некоторые из них представляют собой значки нормального размера, а некоторые — большие значки. Например, значки «Лучшие сайты» в браузерах (https://www.ghacks.net/wp-content/uploads/2018/08/firefox-62-new-search-tab.png).

Я не очень хорошо разбираюсь в javascript, поэтому хочу писать как можно меньше кода. Поэтому я нашел EasyUI, возможно, подходящим... Но проблема в том, что встроенный стиль значков очень маленький. У них есть только два варианта: размер: маленький размер: большой. И даже если установить его на большой, фактический размер изображения все еще очень маленький, что позволяет использовать только изображение 32p * 32px.

Для демонстрации перейдите на эту страницу и (https://www.jeasyui.com/demo/main/index.php?plugin=LinkButton&theme=material-teal&dir=ltr&pitem=&sort=asc) и нажмите "Размер кнопки ссылки".

Глядя на их демонстрационный код, размер установлен следующим образом.

 <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
        <a href="#" class="easyui-linkbutton">Text Button</a>
    </div>
    <p>Large Buttons</p>
    <div style="padding:5px 0;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'">Picture</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'">Clip Art</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'">Shapes</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'">SmartArt</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a>
    </div>

В их файлах *.js есть парсер для обработки размера: большой или размер: маленький, установленный здесь. Но я не знаю, как сделать другой размер, например size:extralarge, чтобы он выглядел как «Лучшие сайты».

Или кто-нибудь может порекомендовать другую структуру для создания веб-страниц?


javascript jquery jquery-easyui
person Haz Wof    schedule 26.04.2019    source источник
comment
вы можете использовать css, чтобы переопределить существующий стиль   -  person Deepak A    schedule 26.04.2019
comment
@Deepak Я пробовал это. 32px записано в файле easyui.css (.l-btn-large .l-btn-icon {ширина: 32px; высота: 32px; высота строки: 32px; margin-top: -16px; }) Когда я изменяю css, измените 32px на 100px, макет становится очень плохим... Я не знаю, как сделать так, чтобы он выглядел хорошо...   -  person Haz Wof    schedule 26.04.2019

Ответы (1)


arrow_upward
4
arrow_downward

Я думаю, вы можете использовать простой стиль, чтобы получить свой индивидуальный размер. как:

<div style="padding:5px 0;">
    <a href="#" class="easyui-linkbutton" style="height:50px; width:50px" data-options="iconCls:'icon-add'">Add</a>
    <a href="#" class="easyui-linkbutton" style="height:50px; width:50px" data-options="iconCls:'icon-remove'">Remove</a>
    <a href="#" class="easyui-linkbutton" style="height:50px; width:50px" data-options="iconCls:'icon-save'">Save</a>
    <a href="#" class="easyui-linkbutton" style="height:50px; width:50px" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
    <a href="#" style="height:50px; width:50px" class="easyui-linkbutton">Text Button</a>
</div>
person Dipta Das    schedule 30.04.2019
comment
Спасибо, я разобрался. В css есть много мест, я должен добавлять каждое большое изменение к очень большому и сбрасывать значения в css. Тогда это выглядит хорошо. - person Haz Wof; 06.05.2019