jquery ui tabs 小部件在浏览器状态栏中显示 url

Question

我正在使用精细的 jQuery UI 框架来开发 Web 应用样式的控制面板。它应该看起来像一个原生应用程序。因此，我以信息亭模式打开浏览器窗口，这样就不会出现无关的浏览器功能。我遇到的一个困难是，由于选项卡被呈现为 html 锚点，例如，每个选项卡的 href 在状态栏中显示为“http://127.0.0.1/#main-tab”。这对我来说似乎很俗气，我寻求一种让它消失的方法。我认为这将被视为一个错误，因为在这个锚点用例中，它并没有真正分支到另一个站点，因为它们通常被使用，但受访者不同意。

在这一点上，我想我必须找到另一种方法来解决这个问题（也许是猴子补丁 jQuery UI 代码？呃）。

关于如何解决这个问题的任何建议？

在demo page 上查看问题。将鼠标悬停在选项卡上可查看状态栏的变化。

Answer 1

这可以通过在自定义小部件中自定义 .tabs() 来完成。看看吧。

工作示例：https://jsfiddle.net/Twisty/c315Lno4/3/

CSS

.ui-altTabs {
  position: relative;
  padding: .2em;
}

.ui-altTabs .ui-altTabs-nav li {
  border-bottom-width: 0;
}

.ui-altTabs-tab {
  float: left;
}

.ui-altTabs-anchor {
  display: inline-block;
  padding: .5em 1em;
  cursor: pointer;
}

.ui-altTabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}

JavaScript

$(function() {
  $.widget("custom.altTabs", {
    _create: function() {
      this.wrapper = $("<div>")
        .addClass("ui-altTabs custom-altTabs ui-corner-all ui-widget ui-widget-content")
        .insertAfter(this.element);
      this.element.hide();
      this._createTabs();
    },
    _createTabs: function() {
      this.list = $("<ul>")
        .appendTo(this.wrapper)
        .addClass("ui-altTabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header")
        .attr("role", "tablist");
      this.content = [];
      var origSelf = this.element;
      var contentList = origSelf.find("ul li");
      var contentDivs = origSelf.find("div");
      var currentUiCount = $(document).find("[id^='ui-id-']").length;
      var self = this.list;
      contentDivs.each(function(ind, el) {
        var label = contentList.eq(ind).find("a").text();
        var target = $(el).attr("id");
        var item = $("<li>", {
          class: "ui-altTabs-tab ui-corner-top ui-state-default ui-tab",
          role: "tab"
        }).appendTo(self);
        $("<span>", {
          id: "ui-id-" + ++currentUiCount,
          "data-rel": target,
          class: "ui-altTabs-anchor",
          role: "presentation",
        }).html(label).click(function(e) {
          self.find(".ui-tabs-active").removeClass("ui-tabs-active")
          .removeClass("ui-state-active");
          $(e.target).parent().addClass("ui-tabs-active ui-state-active");
          contentDivs.hide();
          $("#" + $(e.target).data("rel")).show();
        }).appendTo(item);
        console.log("Appending Item to list: ", item);
      });
      self.find("li:eq(0)").addClass("ui-tabs-active ui-state-active");
      for (i = contentDivs.length; i--; i >= 0) {
        var panel = contentDivs.eq(i);
        panel.addClass("ui-tabs-panel ui-corner-bottom ui-widget-content")
          .attr("role", "tabpanel")
          .insertAfter(self)
          .hide();
        if (i == 0) {
          panel.show();
        }
      }
    },
  });
  $("#tabs").altTabs();
});