Question

有没有办法在Jquery ui tabs中使用选项作为标签选择器。我使用Javascript使选择选项看起来像标准选项卡选择器，但不能注入jquery选项卡来替换原始HTML列表选择器。

<div id="tabs">

  <select class="feature-select">
    <option rel="#tab-1" selected="" value="">Tab 1</option>
    <option rel="#tab-2" value="">Tab 2</option>
  </select>

  <div id="tab-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
      Nunc tristique tempus lectus.</p>
  </div>
  <div id="tab-2">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
      Nunc tristique tempus lectus.</p>
  </div>

</div>

JSFiddle：http://jsfiddle.net/0e2cxeL2/

Answer 1

您可以使用更改处理程序（但需要修改下面给出的段插件）然后切换该更改处理程序中的显示，如

element

(function($) {
  $.fn.extend({
    Segment: function() {
      $(this).each(function() {
        var self = $(this);
        var wrapper = $("<div>", {
          class: "ui-segment"
        });
        $(this).find("option").each(function() {
          var option = $("<span>", {
            class: 'option',
            text: $(this).text(),
            value: $(this).val()
          });
          if ($(this).is(":selected")) {
            option.addClass("active");
          }
          wrapper.append(option);
        });
        wrapper.find("span.option").click(function() {
          wrapper.find("span.option").removeClass("active");
          $(this).addClass("active");
          self.val($(this).attr('value')).change(); //minor change here to trigger the change event on click
        });
        $(this).after(wrapper);
        $(this).hide();
      });
    }
  });
})(jQuery);


$(function() {
  $(".feature-select").Segment();
  $(".feature-select").change(function() {
    var $selected = this.value ? $(this.value).show() : $();
    $('#tabs > .tab').not($selected).hide();
  }).change()
});

.ui-segment {
  color: #3599B0;
  border: 1px solid #3599B0;
  border-radius: 4px;
  display: inline-block;
  font-family: 'Lato', Georgia, Serif;
}
.ui-segment span.option.active {
  background-color: #3599B0;
  color: white;
}
.ui-segment span.option {
  padding-left: 23px;
  padding-right: 23px;
  height: 30px;
  text-align: center;
  display: inline-block;
  line-height: 30px;
  margin: 0px;
  float: left;
  cursor: pointer;
  border-right: 1px solid #3599B0;
}
.ui-segment span.option:last-child {
  border-right: none;
}
.segment-select {
  display: none;
}

如何选择工作jquery ui tabs使用选项

1 个答案: