有人知道如何为这个分段控件实现javascript吗？这种分段控制就像一个组单选按钮.
<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>
提前致谢.
以下是完整的代码,答案如下.它不起作用.什么都没发生.
<!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>
我在javascript中需要类似(下面)的内容.下面的代码是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();
}
});
纯JavaScript解决方案(见它)
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解决方案(见它)
$("ul.buttonGroup").click(function (event) {
$("li", this)
.removeClass("selected")
.filter(event.target)
.addClass("selected");
});