Menu
Does anybody know how implement a javascript for this segmented control? This segmented control acts like a group radio button.
<style>
.buttonGroup
{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack:justify;
-webkit-box-sizing: border-box;
}
.buttonGroup > li
{
display: block;
-webkit-box-flex: 1;
border: solid 1px #9a9a99;
border-left: none;
-webkit-border-radius: 0px;
text-align: center;
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#fbfbfb),
to(#bdbdbd));
color: #6b6b6b;
font-size: 16px;
padding: 10px;
}
.buttonGroup > li:first-child
{
border-left: solid 1px #9a9a99;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
.buttonGroup > li:last-child
{
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.buttonGroup > li.selected
{
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#2a55b1),
to(#6297f2));
color: #fff;
border-color: #193a7f;
}
</style>
<ul class="buttonGroup">
<li class="selected">Navigate</li>
<li>Points</li>
<li>Lines</li>
</ul>
Thanks in advance.
Here is full code with the answer from below. It is not working. Nothing is happening.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Segmental Control panel</title>
<link rel="stylesheet" href="stylesheets/iphone.css" />
<script language="javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
</script>
<style>
.buttonGroup
{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack:justify;
-webkit-box-sizing: border-box;
}
.buttonGroup > li
{
display: block;
-webkit-box-flex: 1;
border: solid 1px #9a9a99;
border-left: none;
-webkit-border-radius: 0px;
text-align: center;
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#fbfbfb),
to(#bdbdbd));
color: #6b6b6b;
font-size: 16px;
padding: 10px;
}
.buttonGroup > li:first-child
{
border-left: solid 1px #9a9a99;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
.buttonGroup > li:last-child
{
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.buttonGroup > li.selected
{
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#2a55b1),
to(#6297f2));
color: #fff;
border-color: #193a7f;
}
</style>
<script type="text/javascript" charset="utf-8">
var ul = document.getElementsByTagName("UL");
for(var i=0, j=ul.length; i<j; i++) {
if ( /\bbuttonGroup\b/.test(ul[i].className) ) {
ul[i].onclick = segmentedController(ul[i]);
}
}
function segmentedController(target) {
return function(event) {
var li = target.getElementsByTagName("LI");
for (var i=0, j=li.length; i<j; i++) {
var _ = li[i];
_.className = _.className.replace(/\bselected\b/, "");
if (_ === event.target) _.className += " selected";
}
}
}
</script>
</head>
<body>
<div id="header">
<h1>Segmented Control</h1>
<a href="index.html" id="backButton">Index</a>
</div>
<h1>Examples</h1>
<ul class="buttonGroup">
<li class="selected">Navigate</li>
<li>Points</li>
<li>Lines</li>
<li>Polygons</li>
<li>Modify</li>
<li>Drag</li>
</ul>
</body>
</html>
I need something like (below) in javascript. Code below is jquery mobile.
<form id="controls">
<fieldset data-role="controlgroup" data-type="horizontal"
data-role="fieldcontain">
<input id="nav" type="radio" name="controls" value="nav" checked="checked">
<label for="nav">navigate</label>
<input id="point" type="radio" name="controls" value="point">
<label for="point">point</label>
<input id="line" type="radio" name="controls" value="line">
<label for="line">line</label>
<input id="poly" type="radio" name="controls" value="poly">
<label for="poly">poly</label>
<input id="mod" type="radio" name="controls" value="mod">
<label for="mod">modify</label>
<input id="drag" type="radio" name="controls" value="drag">
<label for="drag">drag</label>
<input id="select" type="radio" name="controls" value="select">
<label for="select">select</label>
</fieldset>
</form>
$("#nav, #point, #line, #poly, #mod, #drag, #select").change(function(event) {
deactivateControls();
// jquery mobile bug regarding change makes us go through all inputs
// https://github.com/jquery/jquery-mobile/issues/issue/1088
var val = $("input:radio[name=controls]:checked").val();
if (val !== "nav") {
map.getControlsBy("id", val + "-control")[0].activate();
}
});
941
asked Jul 15 '11 05:07
A segmented control is a linear set of two or more segments, each of which functions as a button. Within a segmented control, all segments are usually equal in width. Like buttons, segments can contain text or images. Segments can also have text labels beneath them (or beneath the control as a whole).
Segmented Buttons allow users to select one item at a time from two to four options. Selecting one option automatically turns off the last selection made. Segmented Buttons are mutually exclusive.
Pure JavaScript solution (see it)
var ul = document.getElementsByTagName("UL");
for(var i=0, j=ul.length; i<j; i++) {
if ( /\bbuttonGroup\b/.test(ul[i].className) ) {
ul[i].onclick = segmentedController(ul[i]);
}
}
function segmentedController(target) {
return function(event) {
var li = target.getElementsByTagName("LI");
for (var i=0, j=li.length; i<j; i++) {
var _ = li[i];
_.className = _.className.replace(/\bselected\b/, "");
if (_ === event.target) _.className += " selected";
}
}
}
jQuery solution (see it)
$("ul.buttonGroup").click(function (event) {
$("li", this)
.removeClass("selected")
.filter(event.target)
.addClass("selected");
});
Put a click handler on the <ul> element. The handler will remove the "selected" class from the previously selected <li> and add the "selected" class to the new selection. Something like this:
<ul class="buttonControl" id="buttonControl">
<li class="selected">Navigate</li>
<li>Points</li>
<li>Lines</li>
</ul>
<script>
//put this within onload/onready/whatever
(function() {
var buttonControl = document.getElementById("buttonControl");
var buttons = buttonControl.getElementsByTagName("LI");
buttonControl.onclick = function(e) {
// half-hearted attempt at cross-browser compatibility,
// where normally I'd just use jQuery
e = e || window.event;
var target = e.srcElement || e.target;
// just return if the clicked item was already selected
if (/\bselected\b/.test(target.className))
return;
else
target.className += " selected";
for (var i = 0; i < buttons.length; i++)
if (buttons[i] !== target)
buttons[i].className = buttons[i].className.replace(/\bselected\b/, "");
}
})();
</script>
EDIT: Oops, probably not a good idea to type up most of an answer in another editor, get distracted and do something else, then come back and finish up and post without checking for other answers. Oh well, seems a shame to throw this away since I took a different approach to Tomalak in that I attached my event handler to the ul element. I haven't tested it, and am not going to bother given there's already another answer that works.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
