自动填充jquery UI选项卡
问题描述：
我需要一种方法来通过从drupal输出的html中抓取位来自动填充jquery Tab控件。谁能提供建议？现在，UI脚本变得不合时宜，并创建它自己的一组div来匹配导航。此时标签打破。我绝不是一个JavaScript或jQuery的亲所以原谅我的简单的代码;）自动填充jquery UI选项卡
<!DOCTYPE html>
jQuery用户界面标签（自动创建标签）
<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>
答
杰里米 - 是的，这个想法是有一点点的JavaScript，可以动态创建选项卡，而不需要重新设置默认的Views配置。有了这一点的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>
+0
对于现场版本，请看这里， http://robotoverlord.mobi/LAB/drupal-calendar-tabs/ – d3l3t3m3 2009-08-20 18:20:53
+0
很好的解决方案。你可以将它捆绑成某种模块。 – 2009-08-21 11:07:40
有你在jQuery的，而不是主题层这样一个paticular原因是什么？ – 2009-08-20 08:35:26