Segmented Control in Javascript_问答_开发者_运维开发者技术经验分享

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:justi开发者_如何学运维fy;
        -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();
    }
});

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.