没有合适的资源?快使用搜索试试~ 我知道了~
除了图标以外,按钮也许是最简单的组件了,现在来看看如何定义按钮组件。 使用原生按钮组件 在 xmlplus 中,HTML 元素也以组件的方式存在。所以,你可以直接通过使用 button 标签或者 input 标签来使用按钮组件。如下示例所示: Example: { xml: "<div id='example'>\ <button>Default</button>\ <input type='submit'>Primary</input>\ </div>" } 虽然原生按钮外观不那么吸引人,但原生按钮未经特殊包装,所以渲染起来最快,执行效率最高。
资源详情
资源评论
资源推荐
xmlplus组件设计系列之按钮(组件设计系列之按钮(2))
除了图标以外,按钮也许是最简单的组件了,现在来看看如何定义按钮组件。
使用原生按钮组件使用原生按钮组件
在 xmlplus 中,HTML 元素也以组件的方式存在。所以,你可以直接通过使用 button 标签或者 input 标签来使用按钮组件。如
下示例所示:
Example: {
xml: "<div id='example'>\
<button>Default</button>\
<input type='submit'>Primary</input>\
</div>"
}
虽然原生按钮外观不那么吸引人,但原生按钮未经特殊包装,所以渲染起来最快,执行效率最高。
使用使用 Bootstrap 样式的按钮样式的按钮
如果你的项目在视觉上没有特别要求的话。使用 Bootstrap 样式来定义按钮组件是一个好主意。按传统方式使用 Bootstrap 按
扭,你需要像下面这样使用。
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
请认真观察,你是不是觉得它给你的比你要求的要多。你不但发现了好多的 type=button,还发现了好多的 btn。现在下面给
出一个组件,它基于 Bootstrap 样式,但它明显地简化了按钮的使用方式。
Button: {
xml: "<button type='button' class='btn'/>",
fun: function (sys, items, opts) {
this.addClass("btn-" + opts.type);
}
}
此按钮组件封装了原始按钮需要重复书写的内容,在使用时,仅需提供 type 属性即可指明目标按钮,使用起来更为便捷。下
面给出的是新按钮组件的使用方式。
<Button type='default'>Default</Button>
<Button type='primary'>Primary</Button>
<Button type='success'>Success</Button>
带有图标的按钮带有图标的按钮
按钮上除了文字外,还可以附带图标。合适的图标可以使按扭的使用意图更加生动直观。这里以 EasyUI 的图标按钮为例来说
明如何封装并使用图标按钮。我们首先来看看,EasyUI 图标按钮的原始使用方式。
<div style="padding:5px 0;">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-
options="iconCls:'icon-add'">Add</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-
options="iconCls:'icon-remove'">Remove</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-
options="iconCls:'icon-save'">Save</a>
</div>
与上一节对 Bootstrap 按钮的封装类似,通过观察提炼出重复出现的部分,将变化的部分以接口形式展现。上面的按钮仅图标
类型名和文本是可变的,所以我们可以做出如下的设计:
Button: {
xml: "<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton"/>",
fun: function (sys, items, opts) {
this.attr("data-options" + "iconCls:'icon-" + opts.type);
}
}
下面是新图标的使用方式,它明显比原始的使用方式简洁多了。
weixin_38500709
- 粉丝: 6
- 资源: 894
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0