|
| 1 | +Easyui datebox单击文本框显示日期选择 |
| 2 | +============ |
| 3 | + |
| 4 | +Easyui默认是点击文本框后面的图标显示日期,为了更进一步优化体验 |
| 5 | + |
| 6 | +修改为单击文本框显示日期选择框 |
| 7 | + |
| 8 | +修改jquery.easyui.min.js(作者用的是**1.3.6**版本,其他版本或有区别) |
| 9 | + |
| 10 | +可 ctrl+f 搜索 "**_outerWidth():0**" 在本行下面添加如下代码: |
| 11 | + |
| 12 | +```js |
| 13 | +// datebox单击文本框出现日期选择 start |
| 14 | +if ($(_83f).hasClass("datebox-f")) { |
| 15 | + _844.click(function() { |
| 16 | + _845.click(); |
| 17 | + }); |
| 18 | +} |
| 19 | +// end |
| 20 | +``` |
| 21 | + |
| 22 | +上下文代码如下: |
| 23 | + |
| 24 | +```js |
| 25 | +function _83e(_83f,_840){ |
| 26 | +var _841=$.data(_83f,"combo"); |
| 27 | +var opts=_841.options; |
| 28 | +var _842=_841.combo; |
| 29 | +var _843=_841.panel; |
| 30 | +if(_840){ |
| 31 | +opts.width=_840; |
| 32 | +} |
| 33 | +if(isNaN(opts.width)){ |
| 34 | +var c=$(_83f).clone(); |
| 35 | +c.css("visibility","hidden"); |
| 36 | +c.appendTo("body"); |
| 37 | +opts.width=c.outerWidth(); |
| 38 | +c.remove(); |
| 39 | +} |
| 40 | +_842.appendTo("body"); |
| 41 | +var _844=_842.find("input.combo-text"); |
| 42 | +var _845=_842.find(".combo-arrow"); |
| 43 | +var _846=opts.hasDownArrow?_845._outerWidth():0; |
| 44 | + |
| 45 | +// datebox单击文本框出现日期选择 start |
| 46 | +if ($(_83f).hasClass("datebox-f")) { |
| 47 | + _844.click(function() { |
| 48 | + _845.click(); |
| 49 | + }); |
| 50 | +} |
| 51 | +// end |
| 52 | + |
| 53 | +_842._outerWidth(opts.width)._outerHeight(opts.height); |
| 54 | +_844._outerWidth(_842.width()-_846); |
| 55 | +_844.css({height:_842.height()+"px",lineHeight:_842.height()+"px"}); |
| 56 | +_845._outerHeight(_842.height()); |
| 57 | +_843.panel("resize",{width:(opts.panelWidth?opts.panelWidth:_842.outerWidth()),height:opts.panelHeight}); |
| 58 | +_842.insertAfter(_83f); |
| 59 | +}; |
| 60 | +``` |
| 61 | + |
| 62 | +效果演示: <a href="http://itmyhome.com/datebox/" target="_blank">点击</a> |
0 commit comments