如何在 Jquery EasyUI 中自定义链接按钮大小，而不是使用内置的小尺寸或大尺寸？

Question

我想用一些图标构建一些移动网页。其中一些是正常大小的图标，一些是大图标。就像浏览器中的“热门网站”图标 (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)，然后单击“链接按钮大小”。

看他们的demo代码，大小是这样设置的。

 <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，这样我就可以让它看起来像“热门网站”。

或者有人可以推荐其他框架来构建网页吗？

Answer 1

我想你可以使用简单的样式来获得你的自定义尺寸。喜欢：

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