标签: jquery-ui-tabs

JQuery UI选项卡由无序列表中的命名锚实现.当您将鼠标悬停在其中一个标签上时,您可以在浏览器底部显示的链接中看到此信息:

http://mysite/product/3/#orders

例如,上面将是"订单"标签.JQuery显然拦截了对此锚点的单击并改为打开选项卡.

但是,如果我将上面的链接加入书签或从网站的其他位置链接到该链接,则该页面不会在特定选项卡上打开.

在选项卡初始化块中,我正在考虑添加一些代码来查找URL中的命名锚点,如果找到一个,则执行选项卡的索引查找并调用其上的选择.这意味着它仍然可以与JS关闭.

但是有更简单/更好/更好的方式吗？

我们希望在我们的Web应用程序中的所有AJAX调用都能接收JSON编码的内容.在大多数地方,这已经完成(例如在模态中)并且工作正常.

但是,当使用jQueryUI的选项卡(http://jqueryui.com/demos/tabs/)及其ajax功能时,只能返回纯文本HTML(即从下面的a标签中指定的URL).我如何让tab功能识别出每个标签的点击,它将从指定的URL接收JSON编码的数据,并加载该JSON的.content索引？

$(function() {
    $('div#myTabs').tabs();     
});

<div id="mytabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top"><a href="/url/one">Tab one</a></li>
        <li class="ui-state-default ui-corner-top"><a href="/url/two">Tab two</a></li>
    </ul>
</div>

我正在使用jquery ui标签

我可以在"load"(ajax)事件中获取所选选项卡的索引

$('#tabs').tabs(
      {
        load: function(e, ui) {
            if($('#tabs').tabs('option','selected') == 0) { }
      }
       });

现在我想获得标签名称

例如......

<ul>
<li><a href="newprofile.jsp"><span>Profile</span></a></li>
<li><a href="ashout.jsp" id="friends"><span>Shouts</span></a></li>
</ul>

我想在单击第一个选项卡时检索文本配置文件,或在单击第二个选项卡时检索Shout.

谢谢

使用jQuery UI选项卡,您可以使用select方法在单击选项卡时运行代码:

$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});

但是代码在加载刚刚单击的选项卡之前运行.我需要在加载新标签后运行代码.我怎样才能做到这一点？谢谢阅读.

我有以下脚本的保证金.portlet类表现得很奇怪:

http://jsfiddle.net/mYx5y/19/

它应该在每个portlet周围添加10px,这应该意味着portlet之间的间隔为20px.出于某种原因,如果portlet在其自身的右侧或左侧有一个小部件,我只获得20px,但如果portlet在其上方或下方有另一个portlet,则只有10px.

为什么我垂直得到10px？

建立 :

我有一个包含div,意思是可滚动.这是我的jquery ui tab div的容器.

问题:

当我在IE8中滚动容器时,它会滚动其中的其他内容,但jquery UI选项卡被固定,就像position = fixed一样.在FF中工作正常.欢迎任何帮助.非常感谢

CSS:

#content {
    overflow:auto;
    margin: 1px;
    height: 700px;
}

div.content-container {
    border: solid 1px #C8C8C8;
    padding:10px;
    background-color: #F5F3E5;
    margin: 1px 2px 10px 1px;
}

JS:

$('#tabs').tabs();

HTML:

<div id="content">
    <div class="content-container">
        <div id="tabs">
         </div>
    </div>
</div>

我在项目的局部视图中放了一些jquery选项卡.我注意到Visual Studio的"解决方案资源管理器",在调试期间,每次单击新选项卡时都会生成一个新动态JScript - script block.

出现这种情况,即使我把$('#mytabs .ui-tabs-hide').children().remove();和$(".ui-tabs-hide").empty();内show标签的事件.脚本块包含我放在由标签调用的部分视图中的javascript,因此每次单击以前单击的选项卡时,都会出现一个新的JScript块:很明显这会导致稳定性或内存泄漏问题...例如,I已经注意到我加载两次选项卡后,某些计时器和绑定无法正常工作.

我不知道问题是由调用包含脚本的部分视图的方式引起的.请注意我如何设置控制器操作(示例中的索引).

这是我的环境:jquery 1.6.4 - jquery-ui 1.8.16 - IE 8.0.7601 我无法成功调试其他浏览器,因为Visual Studio似乎没有附加他们的进程而且没有显示动态数据......

CONTROLLER

这是选项卡调用的动作示例

  public ActionResult Index()
    {
         if (Request.IsAjaxRequest())
            return PartialView("_Index");

        return View(); 
    }

以下是我的观点和脚本的一些部分:

_Layout.cshtml

 ....
 <div id="body">  
    @Html.Partial("_TabsMenu");
 </div>
 ....

_TabsMenu.cshtml(包含标签菜单的部分视图)

 <div id="menutabs" class="content-wrapper">
    <ul >
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("Test", "Index", "Test")</li>
         ...
    </ul>
 </div>

 <script type="text/javascript">
 $(function () {
     $('#menutabs').tabs({
         cache: false,
         show: function (event, ui) {
             $('#menutabs …

我想完全自定义jQuery UI选项卡而不破坏jQuery UI日期选择器的样式？这是可行的还是我应该做自定义工作而不是使用jQuery UI选项卡？

所有.我已经构建了一个简单的jQuery/PHP聊天程序,该程序运行良好.但是,我想添加一个功能,如频道或房间.理想情况下,我想在聊天的顶部使用标签来管理用户所在的房间(只有2个).我认为这将是一个简单的任务,我之前已经看到类似的事情,但是当单击选项卡时,我一直收到未捕获的异常错误,并且源无法正确加载.我会发布整个聊天系统的代码,因为我觉得问题可能存在于其中.

jquery

page = {
    getChat: function() {
        $.ajax({
            url: 'game_src.php',
            data: 'mode=getChat',
            dataType: 'html',
            cache: false,
            success: function(res){
                $("#chatbox").html(res);
            }
        });
    }
};

$("#submitmsg").click(function(){
    var clientmsg = $("#usermsg").val();
    $.ajax({
        url : 'game_src.php',
        data: 'mode=chatSubmit&msg=' + encodeURIComponent(clientmsg)
    });
    $("#usermsg").attr("value", "");
    return false;
});

setInterval(page.getChat, 4000);

$("#chatChannel").tabs({
    cookie: { expires: 1 },
});

聊天机构

<?php
if($user->data['user_id'] == ANONYMOUS)
{

}
else
{
    ?>
    <div id="chatChannel">
        <ul>
            <li><a href="#global">Global</a></li>
            <li><a href="#alli">Alliance</a></li>
        </ul>
    </div>
    <form name="message" action="">  
        <input name="usermsg" type="text" id="usermsg" size="25" /> …

我有一个页面上有jQuery标签.在这些选项卡中是一个有序列表.

这是我的HTML代码:

<div id="tabs">

  <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>

  <div id="tabs-1">
      <ol start="50">
          <li>Bibendum Elit</li>
          <li>Vehicula</li>
          <li>Amet Bibendum Ultricies</li>        
      </ol>
  </div>

  <div id="tabs-2">
      <ol>
          <li>Sollicitudin Cras Vehicula</li>
          <li>Vulputate Euismod</li>
          <li>Ridiculus Vehicula Pharetra Nullam</li>        
      </ol> 
  </div>

  <div id="tabs-3">
      <ol>
          <li>Ullamcorper Parturient</li>
          <li>Tristique Mollis Venenatis Vehicula</li>
          <li>Vulputate Bibendum</li>        
      </ol>  
  </div>
</div>

这是我的javascript:

$(function() { $( "#tabs" ).tabs(); });

请参阅:http://jsfiddle.net/2ewzz/1/

当我在IE9中查看时,我从第一个标签到第二个标签然后再次回到第一个标签,数字全部变为"0"

有谁知道我做错了什么,或者如何解决这个问题？