Question

有人知道如何为这个分段控件实现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();
    }
});

Answer 1

纯JavaScript解决方案（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解决方案（see it）

$("ul.buttonGroup").click(function (event) {
    $("li", this)
    .removeClass("selected")
    .filter(event.target)
    .addClass("selected");
});

Answer 2

在<ul>元素上放置一个点击处理程序。处理程序将从先前选择的<li>中删除“selected”类，并将“selected”类添加到新选择中。像这样：

<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>

编辑：哎呀，在另一个编辑器中输入大部分答案可能不是一个好主意，分心并做其他事情，然后回来完成并发布而不检查其他答案。哦，好吧，因为我对Tomalak采取了不同的方法，因为我把我的事件处理程序附加到ul元素，所以放弃这个似乎是一种耻辱。我还没有对它进行测试，并且不会打扰，因为已经有另一个有效的答案了。

Javascript中的分段控制

2 个答案: