Question

我想构建一些带有图标的移动网页。其中一些是正常大小的图标，而另一些则是大图标。类似于浏览器（https://www.ghacks.net/wp-content/uploads/2018/08/firefox-62-new-search-tab.png）中的“热门网站”图标。

我对javascript不太了解，所以我想编写尽可能少的代码。所以我发现EasyUI也许合适...但是问题是内置的图标样式很小。它们只有两个选项size：small size：large 即使将其设置为大，实际图像尺寸仍然很小，仅允许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”。

或者有人可以推荐另一个框架来构建网页吗？

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>

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

1 个答案: