自动填充Jquery UI选项卡
自动填充Jquery UI选项卡
提问于 2009-08-19 19:11:15
我需要一种方法来自动填充jquery Tab控件，方法是从drupal输出的html中获取位。有没有人能提点建议？现在，UI脚本乱七八糟地创建了自己的一组div来匹配导航。在这一点上，标签会断开。我绝对不是javascript或jquery pro，所以请原谅我的简单代码;)
<!DOCTYPE html> jQuery UI Tabs (Auto create tabs) <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(function(){
$('div.tab-body .title').each( function(i){
var Str = $(this).text();
var li = '<li><a href="#link">' + Str + '</a></li>';
$('ul.tabs').append(li);
$('ul.tabs li a').each( function(i){
$(this).attr("href", ('div' + ++i));
})
})
});
$(function(){
$('#tabs').tabs();
});
</script>
<style>
body {font: 12px/14px "Lucida Grande", Lucida, Verdana, sans-serif;padding:50px;}
.demoHeaders {width:330px;border:1px #ccc solid;padding:15px;margin-bottom:20px;}
.tab-body {padding: 15px}
</style>
</head>
<body>
<div class="demoHeaders">
The purpose of the test is to find a way to auto-populate tab navigation for jQuery UI Tabs.
This would be particularly useful for Drupal Views that are grouped according to field data.
<br /><br />
<a href="works.html">A link to regular tabs </a>
</div>
<div id="tabs">
<ul class="tabs">
<!-- TABS GO HERE -->
</ul>
<div id="tabs-1" class="tab-body">
<div class="title">Aug</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-08-31 09:00</li>
</ul>
</div>
<div id="tabs-2" class="tab-body">
<div class="title">Sept</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-09-31 09:00</li>
</ul>
</div>
<div id="tabs-3" class="tab-body">
<div class="title">Oct</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-10-31 09:00</li>
</ul>
</div>
<div id="tabs-4" class="tab-body">
<div class="title">Nov</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-11-31 09:00</li>
</ul>
</div>
<div id="tabs-5" class="tab-body">
<div class="title">Dec</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-12-31 09:00</li>
</ul>
</div>
</div>
</body>
回答 1
Stack Overflow用户
回答已采纳
发布于 2009-08-20 18:19:33
Jeremy --是的，我们的想法是使用一点javascript来动态创建标签，而不需要对默认的视图配置进行太多的修改。使用这一小段javascript，您基本上可以将任何分组视图转换为选项卡。主要的好处是，如果用户没有启用js，他们会在一个普通列表中得到相同的信息。
这个问题已经解决了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Tabs (Auto create tabs)</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.tab-body .title').each( function(i){
var i = 0;
var Str = $(this).text();
var IDval = $(this).parent().attr("id");
if (Str == "<?php echo date('M'); ?>")
{
var li = '<li class="' + Str + ' ui-tabs-selected ui-state-active"><a href="#' + IDval + '">' + Str + '</a></li>';
}
else
{
var li = '<li class="' + Str + '"><a href="#' + IDval + '">' + Str + '</a></li>';
}
$('ul.tabs').append(li);
})
});
$(document).ready(function(){
$('#tabs').tabs();
});
</script>
<style>
body {font: 12px/14px "Lucida Grande", Lucida, Verdana, sans-serif;padding:50px;}
.demoHeaders {width:330px;border:1px #ccc solid;padding:15px;margin-bottom:20px;}
.tab-body {padding: 15px}
</style>
</head>
<body>
<div class="demoHeaders">
The purpose of the test is to find a way to auto-populate tab navigation for jQuery UI Tabs.
This would be particularly useful for Drupal Views that are grouped according to field data.
<br /><br />
<b>Update:</b> The tabs populate properly, and the right tab is selected with a bit of php.
</div>
<div id="tabs">
<ul class="tabs">
<!-- TABS GO HERE -->
</ul>
<div id="tabs-1" class="tab-body">
<div class="title">Jul</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-08-31 09:00</li>
</ul>
</div>
<div id="tabs-2" class="tab-body">
<div class="title">Aug</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-08-31 09:00</li>
</ul>
</div>
<div id="tabs-3" class="tab-body">
<div class="title">Sept</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-09-31 09:00</li>
</ul>
</div>
<div id="tabs-4" class="tab-body">
<div class="title">Oct</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-10-31 09:00</li>
</ul>
</div>
<div id="tabs-5" class="tab-body">
<div class="title">Nov</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-11-31 09:00</li>
</ul>
</div>
<div id="tabs-6" class="tab-body">
<div class="title">Dec</div>
<ul>
<li>Outdoor Adventure Club -- Thu, 2009-12-31 09:00</li>
</ul>
</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1302051
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号