EasyUI为combobox下拉框后扩展操作按钮
2016-07-22 14:20
411 查看
效果如图:
![](http://img.blog.csdn.net/20160722144435287?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
在操作有些数据量较少数据的时候,我们经常会跳转到其他页面去操作,比如添加一个商品单位。
如果在下拉选择单位的时候没有这个,我们可以在本页弹出对话框添加,也很方便。
这里简单扩展,给Easyui Combobox下拉框后追加一个按钮。
Easyui本身没有的功能,我们都可以操作DOM元素来进行扩展。
思路:
combobox下拉框就是一个panel,我们只需要在他最后进行添加一个html元素 并添加相应的样式就好了。
实现:
在combobox的OnLoadSuccess事件中:
![](http://img.blog.csdn.net/20160722144611557?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
css样式:
.combox_btn {
display: block;
text-align: center;
background-color: skyblue;
}
以上代码就可以实现 下拉框按钮的效果了。
为了更灵活的使用,可以写js对其进行属性的封装,直接调用。
![](http://img.blog.csdn.net/20160722144753335?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20160722144813523?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
第一次发表博客,还请大家多多指教。
在操作有些数据量较少数据的时候,我们经常会跳转到其他页面去操作,比如添加一个商品单位。
如果在下拉选择单位的时候没有这个,我们可以在本页弹出对话框添加,也很方便。
这里简单扩展,给Easyui Combobox下拉框后追加一个按钮。
Easyui本身没有的功能,我们都可以操作DOM元素来进行扩展。
思路:
combobox下拉框就是一个panel,我们只需要在他最后进行添加一个html元素 并添加相应的样式就好了。
实现:
在combobox的OnLoadSuccess事件中:
css样式:
.combox_btn {
display: block;
text-align: center;
background-color: skyblue;
}
以上代码就可以实现 下拉框按钮的效果了。
为了更灵活的使用,可以写js对其进行属性的封装,直接调用。
第一次发表博客,还请大家多多指教。
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif)
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- easyui------显示隐藏列功能
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作