如何在Jquery EasyUI中自定义link-buttonsize，而不是使用内置的小型或大型？

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）并单击“链接按钮大小”。

看看他们的演示代码，大小设置如下。

 <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文件中有一些解析器可以处理大小：大或大：这里设置的小。但我不知道如何制作另一个尺寸，如尺寸：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>