[Dashticz]多段开关改为按钮组样式
发表于 ： 周一 7月 17, 2017 18:05
Dashticz项目地址：https://github.com/robgeerts/dashticz_v2
========================
2017年7月19日19:52更新
此特性已提交到github，Beta版已集成。
========================
Dashticz默认多段开关显示为下拉列表，操作不方便。
此帖介绍将其改为按钮组的方法。
效果：
操作步骤：
一、将下拉框替换为按钮组
在Dashticz/js/main.js文件中搜索
大约在12xx行，找到下列代码
将这部分代码删掉或者注释掉，改为
二、更改显示样式
由于默认开关模块及按钮都太小，所以需要修改样式。
模块大小修改，在Dashticz/custom/CONFIG.js文件中增加以下配置代码来加宽多段开关模块的宽度
其中的12是多段开关设备的IDX，8是模块宽度，dashticz中将宽度分为12份，默认开关宽度4。
然后更改按钮显示样式，在Dashticz/custom/custom.css文件中增加以下样式代码
完成！
========================
2017年7月19日19:52更新
此特性已提交到github，Beta版已集成。
========================
Dashticz默认多段开关显示为下拉列表，操作不方便。
此帖介绍将其改为按钮组的方法。
效果：
- 屏幕快照 2017-07-17 17.44.22.jpg (17.84 KiB) 查看 27575 次
一、将下拉框替换为按钮组
在Dashticz/js/main.js文件中搜索
代码： 全选
html+='<select onchange="slideDevice代码： 全选
html+='<select onchange="slideDevice('+device['idx']+',this.value);">';
html+='<option value="">'+lang.select+'</option>';
for(a in names){
var s='';
if((a*10)==parseFloat(device['Level'])) s = 'selected';
html+='<option value="'+(a*10)+'" '+s+'>'+names[a]+'</option>';
}
html+='</select>';代码： 全选
/**
* 多段开关按钮
*/
html+='<div class="btn-group" data-toggle="buttons">';
for(a in names) {
var s = '';
if ((a * 10) == parseFloat(device['Level'])) s = 'active';
html+='<label class="btn btn-default '+s+'" onclick="slideDevice('+device['idx']+',$(this).children(\'input\').val());">';
html += '<input type="radio" name="options" autocomplete="off" value="'+(a*10)+'" checked>'+names[a];
html+='</label>';
}
html+='</div>';由于默认开关模块及按钮都太小，所以需要修改样式。
模块大小修改，在Dashticz/custom/CONFIG.js文件中增加以下配置代码来加宽多段开关模块的宽度
代码： 全选
/*
多段开关按钮
*/
var blocks = {}
blocks[12] = {}
blocks[12]['width'] = 8;然后更改按钮显示样式，在Dashticz/custom/custom.css文件中增加以下样式代码
代码： 全选
/*
多段开关按钮
*/
.btn-group .btn{
font-size: 12px;
font-weight: 400;
padding:2px 6px;
margin-right: 2px;
}
.btn-group .btn.active{
font-weight:700;
}