不多说直接上代码
CSS完整代码：
1 .e-selectboxs-container { 2 display: table; 3 } 4 5 .e-selectbox { 6 min-width: 100px; 7 height: 30px; 8 margin-top: 5px; 9 margin-right: 10px; 10 margin-bottom: 5px; 11 display: inline-block; 12 } 13 14 .e-selectbox input.e-selectbox-input { 15 display: none; 16 margin: 3px 3px 3px 4px; 17 box-sizing: border-box; 18 padding: 0; 19 } 20 21 .e-selectbox input.e-selectbox-input + label.e-selectbox-label { 22 position: relative; 23 width: 100%; 24 height: 100%; 25 background-color: #9c9c9c; 26 border-radius: 5px; 27 color: #fdfdfd; 28 text-align: center; 29 cursor: pointer; 30 font-weight: normal; 31 font-size: 14px; 32 line-height: 30px; 33 } 34 .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label-Level1 { 35 background-color: #FF6666 !important; 36 } 37 .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label-Level1 { 38 background-color:#FF6666 !important; 39 } 40 .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label-Level2 { 41 background-color: #FF9933 !important; 42 } 43 .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label-Level2 { 44 background-color:#FF9933 !important; 45 } 46 .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label-Level3 { 47 background-color: #FFCC33 !important; 48 } 49 .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label-Level3 { 50 background-color:#FFCC33 !important; 51 } 52 53 .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label { 54 background-color: #607ecb; 55 } 56 57 .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label { 58 background-color: #607ecb; 59 } 60 61 .e-selectbox label.e-selectbox-label::before { 62 content: attr(data-content); 63 display: inline-block; 64 } 65 66 /*.e-selectbox input.e-selectbox-input:checked + label { 67 background-color: #607ecb; 68 }*/ 69 70 .msglevelitems .e-selectbox label.e-selectbox-label { 71 min-width: 240px; 72 } 73 74 .e-selectbox .top-left-symbol { 75 display: inline-block !important; 76 position: absolute; 77 top: 0px; 78 left: 0px; 79 float: left; 80 margin-bottom: 0px; 81 z-index: 101; 82 font-size: 17px; 83 min-width: 10px; 84 height: 30px; 85 background-color: #9c9c9c; 86 border-top-left-radius: 5px; 87 border-bottom-left-radius: 5px; 88 } 89 90 .e-selectbox .top-right-symbol { 91 display: inline-block !important; 92 border-top: 30px solid #777; 93 border-left: 30px solid rgba(255,255,255,0); 94 position: absolute; 95 top: 0px; 96 right: 0px; 97 float: right; 98 margin-bottom: -40px; 99 z-index: 100; 100 } 101 102 .e-selectbox .bottom-right-symbol { 103 display: inline-block !important; 104 border-bottom: 30px solid #777; 105 border-left: 30px solid rgba(255,255,255,0); 106 position: absolute; 107 bottom: 0px; 108 right: 0px; 109 float: right; 110 z-index: 100; 111 } 112 113 .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label .top-right-symbol { 114 border-top: 21px solid #5246e2 !important; 115 } 116 117 .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label .bottom-right-symbol { 118 border-bottom: 21px solid #5246e2 !important; 119 } 120 121 .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label .top-left-symbol { 122 background-color: #607ecb !important; 123 } 124 125 .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label .top-right-symbol { 126 border-top: 21px solid #5246e2 !important; 127 } 128 129 .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label .bottom-right-symbol { 130 border-bottom: 21px solid #5246e2 !important; 131 } 132 133 .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label .top-left-symbol { 134 background-color: #607ecb !important; 135 } 136 137 .e-selectbox .top-right-symbol-content :hover { 138 font-size: 20px; 139 } 140 141 .bottom-right-symbol[hasselect="1"] { 142 border-bottom: 21px solid #5246e2 !important; 143 } 144 145 .bottom-right-symbol[hasselect="1"] + span.top-right-symbol { 146 border-top: 21px solid #5246e2 !important; 147 } 148 149 .bottom-right-symbol[hasselect="1"] + span.top-right-symbol + span.top-left-symbol { 150 background-color: #5246e2 !important; 151 } 152 /*.e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label .bottom-right-symbol { 153 border-bottom: 21px solid #5246e2 !important; 154 }*/ 155 .e-selectbox .bottom-right-symbol-content :hover { 156 font-size: 20px; 157 } 158 159 .e-selectbox .top-right-symbol-content { 160 display: inline-block !important; 161 width: 15px; 162 height: 15px; 163 position: absolute; 164 top: 0px; 165 right: 0px; 166 float: right; 167 margin-top: -8px; 168 z-index: 101; 169 font-size: 12px; 170 color: #eee; 171 } 172 173 .e-selectbox .bottom-right-symbol-content { 174 display: inline-block !important; 175 width: 15px; 176 height: 15px; 177 position: absolute; 178 bottom: 0px; 179 right: 0px; 180 float: right; 181 z-index: 101; 182 font-size: 12px; 183 color: #eee; 184 margin-bottom: 6px; 185 }
自定义组件JS代码：
1 (function () { 2 var kendo = window.kendo, 3 ui = kendo.ui, 4 Widget = ui.Widget, 5 CHANGE = "change"; 6 7 var ESelectBoxs = Widget.extend({ 8 init: function (element, options) { 9 var that = this; 10 kendo.ui.Widget.fn.init.call(that, element, options); 11 $(element).addClass('e-selectboxs-container'); 12 that._dataSource(); 13 that._userdialogBind(); 14 }, 15 options: { 16 name: "ESelectBoxs", 17 inputType: "checkbox", 18 dataTextField: "", 19 dataValueField: "", 20 selectedFunc: function (datas) { 21 }, 22 selectBoxCss:"", 23 boxName:'selectBoxName', 24 autoBind: true, 25 template: "", 26 value: null, 27 drawTile: function (container) { 28 }, 29 lableClick: function (dom,data,target) { 30 } 31 }, 32 value: function (value) { 33 var that = this; 34 if (value === undefined) { 35 return that._value; 36 } 37 that._update(value); 38 that._old = that._value; 39 }, 40 refresh: function () { 41 var that = this, 42 view = that.dataSource.view(); 43 that.element.html(""); 44 $.each(view, function (i, item) { 45 that.element.append(that._drawOrg(item,i)); 46 }) 47 ; 48 }, 49 draw: function () { 50 var that = this; 51 52 }, 53 setData: function (data) { 54 var that = this; 55 that.dataSource = kendo.data.DataSource.create(data); 56 that.dataSource.read(); 57 that.refresh(); 58 }, 59 _dataSource: function () { 60 var that = this; 61 that.dataSource = kendo.data.DataSource.create(that.options.dataSource); 62 that.dataSource.bind(CHANGE, function () { 63 that.refresh(); 64 }); 65 if (that.options.autoBind) { 66 that.dataSource.fetch(); 67 } 68 }, 69 _drawOrg: function (item,index) { 70 var that = this; 71 var container = $('<div class="e-selectbox" data-id="' + (that.options.dataValueField ? item[that.options.dataValueField] : index) +'"></div>'); 72 container.data("item", item); 73 var id = that.options.boxName + ( that.options.dataValueField ? item[that.options.dataValueField] : index); 74 var cont = '<input class="e-selectbox-input" type="' + that.options.inputType + '" id="' + id + '" name="' + that.options.boxName + '" />\ 75 <label class="e-selectbox-label ' + (typeof(that.options.selectBoxCss)=="function"?that.options.selectBoxCss(item, index) : that.options.selectBoxCss) + '" for= "' + id + '" data-content= "' + item[that.options.dataTextField] + '"></label>'; 76 container.html(cont); 77 that.options.drawTile(container); 78 return container; 79 }, 80 _userdialogBind: function () { 81 var that = this; 82 $(that.element).on("click", '.e-selectbox', function (e) { 83 var dataitem = $(this).data("item"); 84 var domcontainer = $(this); 85 if ($(e.target).hasClass('e-selectbox-label')) { 86 that.options.lableClick(domcontainer, dataitem, e.target); 87 } else if ($(e.target).hasClass('e-selectbox-input')) { 88 89 } 90 else { 91 e.cancelBubble = true; 92 e.stopPropagation(); 93 return false 94 } 95 }); 96 } 97 }); 98 kendo.ui.plugin(ESelectBoxs); 99 })(jQuery);
组件使用：
1 $(_ViewName + " .msglevel").kendoESelectBoxs({ 2 dataSource:d.Data, 3 inputType: "radio", 4 dataTextField: "LevelName", 5 dataValueField: "Level", 6 selectedFunc: function (datas) { 7 }, 8 9 selectBoxCss: function(item,index){ 10 switch(item.Level){ 11 case 1:return "e-selectbox-label-Level1"; 12 break; 13 case 2:return "e-selectbox-label-Level2"; 14 break; 15 case 3:return "e-selectbox-label-Level3"; 16 break; 17 case 4:return ""; 18 break; 19 } 20 }, 21 boxName: 'msglevel', 22 autoBind: true, 23 template: "", 24 value: null, 25 drawTile: function (container) { 26 }, 27 lableClick: function (dom, data, target) { 28 $(_ViewName + ' .msglevelitemsdiv').show(); 29 $(_ViewName + " .msglevelitems").kendoESelectBoxs({ 30 dataSource: data.Items, 31 inputType: "radio", 32 dataTextField: "EventName", 33 dataValueField: "ID", 34 selectedFunc: function (datas) { 35 }, 36 selectBoxCss: function(item,index){ 37 switch(item.Level){ 38 case 1:return "e-selectbox-label-Level1"; 39 break; 40 case 2:return "e-selectbox-label-Level2"; 41 break; 42 case 3:return "e-selectbox-label-Level3"; 43 break; 44 case 4:return ""; 45 break; 46 } 47 }, 48 boxName: 'msglevelitems', 49 autoBind: true, 50 template: "", 51 value: null, 52 drawTile: function (container) { 53 var data = $(container).data("item"); 54 $(container).data('Category',data.Category); 55 }, 56 lableClick: function (dom, data, target) { 57 $.each(EmergencyEventUserLimit,function(i,val){ 58 var EventData= $('label[data-content='+val.DepartMent+']').parent().data('item'); 59 if(EventData!=null){ 60 EventData.SelcetedCount= 0; 61 $('label[data-content='+val.DepartMent+']').parent().data('item',EventData); 62 $('label[data-content='+val.DepartMent+']').parent().find('.bottom-right-symbol').attr("hasselect", 0); 63 $('label[data-content='+val.DepartMent+']').parent().find('input[name^="Departments"]').prop("checked", false); 64 $('label[data-content='+val.DepartMent+']').parent().find('.bottom-right-symbol-content').text(EventData.SelcetedCount); 65 if(val.Event==data.EventName){//当前事件该部门全选中人 66 var EventData= $('label[data-content='+val.DepartMent+']').parent().data('item'); 67 EventData.SelcetedCount= EventData.AllUserCount; 68 $('label[data-content='+val.DepartMent+']').parent().data('item',EventData); 69 $('label[data-content='+val.DepartMent+']').parent().find('.bottom-right-symbol').attr("hasselect", 1); 70 $('label[data-content='+val.DepartMent+']').parent().find('input[name^="Departments"]').prop("checked", true); 71 $('label[data-content='+val.DepartMent+']').parent().find('.bottom-right-symbol-content').text(EventData.SelcetedCount); 72 }} 73 74 }); 75 _calcSelectedUser(); 76 } 77 }).data("kendoESelectBoxs"); 78 _setMsgTemplate(data.Level); 79 _setCheckedUser(data.Level); 80 } 81 }).data("kendoESelectBoxs");
代码实现效果：
2865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
