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

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

0 голосов
/ 26 апреля 2019

Я хочу создать несколько мобильных веб-страниц с некоторыми иконками. Некоторые из них - значки нормального размера, а некоторые - большие. Как и иконки "Топ сайтов" в браузерах (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: large или size: small, установленный здесь. Но я не знаю, как сделать другой размер, например size: extralarge, чтобы я мог сделать его похожим на "Top Sites".

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

1 Ответ

1 голос
/ 30 апреля 2019

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

<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>
...