I am not sure I am following how your css and html is going with the js file. To me this looks differently then how I was told to do it earlier in this post. I will put our code below.
JS file:
Code: Select all
pui.retrieveCustomLayoutTemplate("buttongroup");
pui.addCustomProperty({
name: "buttongroup",
help: "",
controls: ["buttongroup","btn-group win-button-group","btn btn-default win-button win-button-secondary"],
category: ""
});
pui.widgets.add({
name: "button group",
newId: "buttongroup",
defaults: {
"width": "",
"height":""
},
propertySetters: {
"field type": function(params) {
var html = pui.layout.templates["buttongroup"];
params.dom.innerHTML = html;
//var body = params.dom.getElementsByClassName("buttongroup");
if (params.design) {
params.dom.innerHTML = html.replace('value="0"', 'value="0" focus');
params.dom.setAttribute("win-clicked", "0");
} else {
if (params.evalProperty("value") == "0") {
params.dom.innerHTML = html.replace('value="0"', 'value="0" checked');
} else if (params.evalProperty("value") == "1") {
params.dom.innerHTML = html.replace('value="1"', 'value="1" checked');
} else if (params.evalProperty("value") == "2") {
params.dom.innerHTML = html.replace('value="2"', 'value="2" checked');
}
var swtch = params.evalProperty("value");
params.dom.setAttribute("win-clicked", swtch);
params.dom.setAttribute("win-customwidget","1");
addEvent(params.dom, "click", function() {
params.dom.setAttribute("win-clicked", swtch);
//alert(document.getElementById("buttongroup1"), "options")));
});
}
},
}
});
pui.toolbox.add({
category: "CSS Buttons",
widget: "button group",
text: "Button Group",
value:"test",
proxyHeight: 23,
proxyWidth: 72,
proxyHTML: pui.layout.templates["buttongroup"],
defaults: {
"width": "",
"height": "",
}
});
function checkBtn(thing) {
var html = pui.layout.templates["buttongroup"];
document.innerHTML = html;
if (thing.value == "0") {
document.innerHTML = html.replace('value="0"', 'value="0" checked');
} else if (thing.value == "1") {
document.innerHTML = html.replace('value="1"', 'value="1" checked');
} else if (thing.value == "2") {
document.innerHTML = html.replace('value="2"', 'value="2" checked');
}
}
Code: Select all
<div class="btn-group" role="group">
<button id="option1" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary" value="0">Left</button>
<button id="option2" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary" value="1">Middle</button>
<button id="option3" onclick="checkBtn(this)" type="radio" name="options" class="btn btn-default win-button win-button-secondary" value="2">Right</button>
</div>
Code: Select all
/*Button Style*/
.win-button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
background-image: none;
border-radius: 4px;
min-width: 150px;
}
.win-button-primary {
color: #fff;
background-color: #0072cf;
border: 1px solid #0072cf;
}
.win-button-primary:hover {
background-color: #00569c;
border: 1px solid #00569c;
}
.win-button-primary:active {
background-color: #00569c;
border: 1px solid #00569c;
box-shadow: none;
}
.win-button-secondary {
color: #0072cf;
background-color: #fff;
border: 1px solid #0072cf;
}
.win-button-secondary:hover {
color: #004883;
border: 1px solid #004883;
}
.win-button-secondary:active {
color: #004883;
border: 1px solid #004883;
box-shadow: none;
}
.win-button-tertiary {
color: #fff;
background-color: #c00;
border: 1px solid #c00;
}
.win-button-tertiary:hover {
background-color: #b30000;
border: 1px solid #b30000;
}
.win-button-tertiary:active {
background-color: #900;
border: 1px solid #900;
box-shadow: none;
}
.win-button-big {
min-height: 50px;
font-size: 18px;
border-radius: 6px;
border-width: 2px;
}
.win-button-big:hover {
border-width: 2px;
cursor: pointer;
}
.win-button:disabled {
cursor: not-allowed;
opacity: .65;
}
.win-button-big:disabled {
cursor: not-allowed;
opacity: .65;
}
.win-button-primary[disabled = true] {
color: #fff;
background-color: #0072cf;
border: 1px solid #0072cf;
}
.win-button-secondary[disabled = true] {
color: #0072cf;
background-color: #fff;
border: 1px solid #0072cf;
}
.win-button-tertiary[disabled = true] {
color: #fff;
background-color: #c00;
border: 1px solid #c00;
}
.win-button-big[disabled = true] {
border-width: 2px;
cursor: not-allowed;
}
.win-action-button {
border: 1px solid #ccc;
font-size: 17px;
border-radius:25px;
height: 34px;
color: #0072cf;
background: #fff;
padding: 4px 12px;
font-weight: normal;
text-align: center;
display: inline-block;
margin-bottom: 0px;
white-space: nowrap;
user-select: none;
}
.win-action-button:hover {
color: #0072cf;
border-color: #0072cf;
}
.win-action-button:active {
color: #0072cf;
border-color: #0072cf;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.125);
background-image: none;
}
.win-action-button:disabled {
cursor: not-allowed;
opacity: .65;
}
.win-action-button[disabled = true] {
color: #0072cf;
background-color: #fff;
border: 1px solid #ccc;
}
.win-close-icon {
color: gray; /*TODO:*/
font-family: "FontAwesome";
font-size: 24px;
}
.win-image{
background-position: 13px;
}
.win-button.win-action-button.win-image{
padding-left: 30px;
}
/*-------------------------------------------------------------------------------------*/
/*End Button Style*/
.btn-group, .btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
font-family: "Open Sans", arial, helvetica, sans-serif !important;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group>.btn:first-child {
margin-left: 0;
}
.win-button-group .btn {
white-space: normal;
}
.btn-group-vertical>.btn, .btn-group>.btn {
position: relative;
float: left;
}
.win-button-group label {
font-weight: bold;
font-size: 13px;
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-family: "Open Sans", arial, helvetica, sans-serif !important;
font-size: 13px;
font-weight: 700;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border-radius: 4px;
}
.btn-group .btn:focus {
background-color: #0072cf;
color: #fff;
border: 1px solid #0072cf;
font-family: "Open Sans", arial, helvetica, sans-serif !important;
}