[Dashticz]多段开关改为按钮组样式

回复
头像
DT27
帖子: 345
注册时间: 周四 3月 30, 2017 08:54
Gender:

[Dashticz]多段开关改为按钮组样式

帖子 DT27 »

Dashticz项目地址:https://github.com/robgeerts/dashticz_v2

========================
2017年7月19日19:52更新
此特性已提交到github,Beta版已集成。
========================


Dashticz默认多段开关显示为下拉列表,操作不方便。
此帖介绍将其改为按钮组的方法。
效果:
屏幕快照 2017-07-17 17.44.22.jpg
屏幕快照 2017-07-17 17.44.22.jpg (17.84 KiB) 查看 27486 次
操作步骤:
一、将下拉框替换为按钮组
在Dashticz/js/main.js文件中搜索

代码: 全选

html+='<select onchange="slideDevice
大约在12xx行,找到下列代码

代码: 全选

										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;
其中的12是多段开关设备的IDX,8是模块宽度,dashticz中将宽度分为12份,默认开关宽度4。

然后更改按钮显示样式,在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;
}
完成!
blindlight
帖子: 98
注册时间: 周四 3月 30, 2017 00:03

Re: [Dashticz]多段开关改为按钮组样式

帖子 blindlight »

QQ截图20170717183812.jpg
QQ截图20170717183812.jpg (6.33 KiB) 查看 27482 次
搞定
头像
DT27
帖子: 345
注册时间: 周四 3月 30, 2017 08:54
Gender:

Re: [Dashticz]多段开关改为按钮组样式

帖子 DT27 »

blindlight 写了: 周一 7月 17, 2017 18:38 QQ截图20170717183812.jpg
搞定
提交到Github了,beta版。
另外中文也修复了,稳定版 :D
blindlight
帖子: 98
注册时间: 周四 3月 30, 2017 00:03

Re: [Dashticz]多段开关改为按钮组样式

帖子 blindlight »

DT27 写了: 周三 7月 19, 2017 19:51
blindlight 写了: 周一 7月 17, 2017 18:38 QQ截图20170717183812.jpg
搞定
提交到Github了,beta版。
另外中文也修复了,稳定版 :D
我那还是半成品 风向什么的都没翻呢
头像
DT27
帖子: 345
注册时间: 周四 3月 30, 2017 08:54
Gender:

Re: [Dashticz]多段开关改为按钮组样式

帖子 DT27 »

blindlight 写了: 周三 7月 19, 2017 21:52
DT27 写了: 周三 7月 19, 2017 19:51
blindlight 写了: 周一 7月 17, 2017 18:38 QQ截图20170717183812.jpg
搞定
提交到Github了,beta版。
另外中文也修复了,稳定版 :D
我那还是半成品 风向什么的都没翻呢
暂时也用不到,以后再完善,主要是把js里中文的bug修复了。
showphi
帖子: 11
注册时间: 周五 7月 21, 2017 17:03

Re: [Dashticz]多段开关改为按钮组样式

帖子 showphi »

有没有群晖版的插件啊,大神
头像
DT27
帖子: 345
注册时间: 周四 3月 30, 2017 08:54
Gender:

Re: [Dashticz]多段开关改为按钮组样式

帖子 DT27 »

showphi 写了: 周五 7月 21, 2017 17:07 有没有群晖版的插件啊,大神
Dashticz不是插件,只是一堆html、js、css,直接将整个Dashticz文件夹放到domoticz/www目录里就可以了,访问时直接 domoticz访问地址/dashticz_v2/
showphi
帖子: 11
注册时间: 周五 7月 21, 2017 17:03

Re: [Dashticz]多段开关改为按钮组样式

帖子 showphi »

明白了,只是改了下UI,谢谢
binai
帖子: 22
注册时间: 周一 6月 26, 2017 14:59

Re: [Dashticz]多段开关改为按钮组样式

帖子 binai »

DT27 写了: 周五 7月 21, 2017 19:17
showphi 写了: 周五 7月 21, 2017 17:07 有没有群晖版的插件啊,大神
Dashticz不是插件,只是一堆html、js、css,直接将整个Dashticz文件夹放到domoticz/www目录里就可以了,访问时直接 domoticz访问地址/dashticz_v2/
dashticz_v2 这个怎么配置,把 dashticz_v2 这个目录放在 www 后,访问时就只有一个时间显示。
头像
Admin
网站管理员
帖子: 118
注册时间: 周六 2月 25, 2017 12:47
Gender:

Re: [Dashticz]多段开关改为按钮组样式

帖子 Admin »

binai 写了: 周三 7月 26, 2017 16:44
DT27 写了: 周五 7月 21, 2017 19:17
showphi 写了: 周五 7月 21, 2017 17:07 有没有群晖版的插件啊,大神
Dashticz不是插件,只是一堆html、js、css,直接将整个Dashticz文件夹放到domoticz/www目录里就可以了,访问时直接 domoticz访问地址/dashticz_v2/
dashticz_v2 这个怎么配置,把 dashticz_v2 这个目录放在 www 后,访问时就只有一个时间显示。

代码: 全选

cd domoticz/www/dashticz_v2/custom/
cp CONFIG_DEFAULT.js CONFIG.js
然后编辑CONFIG.js
官方说明:http://www.domoticz.com/wiki/Dashticz_V2_-_Installation
kqwkn
帖子: 5
注册时间: 周一 7月 10, 2017 15:03

Re: [Dashticz]多段开关改为按钮组样式

帖子 kqwkn »

谢谢大神,已经搞定!效果不错
QQ截图20170803011436.png
QQ截图20170803011436.png (10.38 KiB) 查看 27286 次
回复