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

How work jquery ui tabs using option selected

本文关键字：选项 选择 工作 何使用 ui jquery      更新时间：2023-09-26

是否有办法在Jquery ui选项卡中使用选项选择作为选项卡选择器?我使用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/

您可以使用更改处理程序(但需要修改段插件如下所示)，然后在该更改处理程序中切换显示，如

(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tabs">
  <select class="feature-select">
    <option selected="" value="#tab-1">Tab 1</option>
    <option value="#tab-2">Tab 2</option>
  </select>
  <div id="tab-1" class="tab">
    <p>1. 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" class="tab">
    <p>2. 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>

相关文章：