Django 和 Bootstrap：知道哪个选项卡处于活动状态
Posted
技术标签:
【中文标题】Django 和 Bootstrap：知道哪个选项卡处于活动状态【英文标题】：Django and Bootstrap: Knowing Which Tab is Active 【发布时间】：2012-08-09 06:47:01 【问题描述】：一般网络开发新手在这里。我的背景是 Java，但最近我一直在玩 Django + Bootstrap 网站。
我目前正在做一个有趣的小项目，但遇到了一个关于我希望 Bootstrap 中的选项卡如何工作的问题。
这里的上下文是用户可以记录他们使用这些 Django 生成的表单完成的锻炼。星期几是页面顶部的标签。
我如何知道服务器端哪个选项卡处于活动状态，以便我可以将锻炼正确地提交到数据库中的正确位置？
显而易见的解决方案就是制作 7 种不同的形式，但必须有更好的解决方案，我太新手了。
这是我的 html 正文：
<body>
<div class ="container-fluid">
<div class = "span8 offset4">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#Mon" data-toggle="tab"><h3>Mon</h3></a></li>
<li><a href="#Tues" data-toggle="tab"><h3>Tues</h3></a></li>
<li><a href="#Wed" data-toggle="tab"><h3>Wed</h3></a></li>
<li><a href="#Thu" data-toggle="tab"><h3>Thu</h3></a></li>
<li><a href="#Fri" data-toggle="tab"><h3>Fri</h3></a></li>
<li><a href="#Sat" data-toggle="tab"><h3>Sat</h3></a></li>
<li><a href="#Sun" data-toggle="tab"><h3>Sun</h3></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active " id="Mon">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWarmup">
<h2>Warmup</h2> </a>
</div>
<div id="collapseWarmup" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Sets</th>
<th>Reps</th>
<th>Distance</th>
<th>Intensity</th>
</tr>
</thead>
<tbody>
% for exercise in mon.warmup.all %
<tr>
<td> exercise.name </td>
% if exercise.sets %
<td> exercise.sets </td>
% else %
<td> </td>
% endif %
% if exercise.reps %
<td> exercise.reps </td>
% else %
<td> </td>
% endif %
% if exercise.distance %
<td> exercise.distance m </td>
% else %
<td> </td>
% endif %
% if exercise.intensity %
<td> exercise.intensity </td>
% else %
<td> </td>
% endif %
</tr>
% endfor %
</tbody>
</table>
<form name="warmupform" class="well form-inline" action="% url editworkout %" method="post" enctype="multipart/form-data">
% csrf_token %
<p> warmupform.as_p
</p>
<p><button type="submit" name="warmupsubmit" class="btn btn-primary">Submit Workout</button></p>
</form>
</div> <!-- accordian inner -->
</div> <!-- collapseone -->
</div> <!-- accordian group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWorkout">
<h2>Workout</h2> </a>
</div>
<div id="collapseWorkout" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Sets</th>
<th>Reps</th>
<th>Distance</th>
<th>Intensity</th>
</tr>
</thead>
<tbody>
% for exercise in mon.intervalworkout.all %
<tr>
<td> exercise.name </td>
% if exercise.sets %
<td> exercise.sets </td>
% else %
<td> </td>
% endif %
% if exercise.reps %
<td> exercise.reps </td>
% else %
<td> </td>
% endif %
% if exercise.distance %
<td> exercise.distance m </td>
% else %
<td> </td>
% endif %
% if exercise.intensity %
<td> exercise.intensity </td>
% else %
<td> </td>
% endif %
</tr>
% endfor %
</tbody>
</table>
<form name="intervalform" class="well form-inline" action="% url editworkout %" method="post" enctype="multipart/form-data">
% csrf_token %
<p> intervalform.as_p
</p>
<p><button type="submit" name="intervalsubmit" class="btn btn-primary">Submit Workout</button></p>
</form>
</div> <!-- accordian inner -->
</div> <!-- collapseone -->
</div> <!-- accordian group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWeights">
<h2>Strength Training</h2> </a>
</div>
<div id="collapseWeights" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Sets</th>
<th>Reps</th>
<th>Intensity</th>
</tr>
</thead>
<tbody>
% for exercise in mon.strengthtraining.all %
<tr>
<td> exercise.name </td>
% if exercise.sets %
<td> exercise.sets </td>
% else %
<td> </td>
% endif %
% if exercise.reps %
<td> exercise.reps </td>
% else %
<td> </td>
% endif %
% if exercise.intensity %
<td> exercise.intensity </td>
% else %
<td> </td>
% endif %
</tr>
% endfor %
</tbody>
</table>
<form name="strengthtrainingform" class="well form-inline" action="% url editworkout %" method="post" enctype="multipart/form-data">
% csrf_token %
<p> strengthform.as_p
</p>
<p><button type="submit" name="strengthtrainingsubmit" class="btn btn-primary">Submit Workout</button></p>
</form>
</div> <!-- accordian inner -->
</div> <!-- collapseone -->
</div> <!-- accordian group -->
</div> <!-- accordian 2 -->
</div><!-- tabpane -->
<div class="tab-pane fade in " id="Tues">PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, </div>
<div class="tab-pane fade in " id="Wed">MESSAGES ... Aliquip placeat salvia cillum iphone. </div>
<div class="tab-pane fade in " id="Thu">SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
<div class="tab-pane fade in " id="Fri">PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, </div>
<div class="tab-pane fade in " id="Sat">MESSAGES ... Aliquip placeat salvia cillum iphone. </div>
<div class="tab-pane fade in " id="Sun">SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
</div><!-- tabcontent -->
</div> <!-- span6 -->
</div> <!-- container fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src=" STATIC_URL Bootstrap/js/bootstrap.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function()
$('#myTab a').click(function(e)
e.preventDefault();
$(this).tab('show');
)
$('#myTab a:first').tab('show');
);//]]>
</script>
</body>
以及我当前处理该页面的视图：
def editworkout(request):
day = DayModel.objects.get(id=1) #for testing purposes, until tabs are figured out
if request.method == 'POST':
if 'strengthtrainingsubmit' in request.POST:
form = StrengthExerciseForm(request.POST)
if form.is_valid():
day.strengthtraining.add(form.save()) #saves the model and returns its
return HttpResponseRedirect(reverse('editworkout'))
if 'intervalsubmit' in request.POST:
form = IntervalForm(request.POST)
if form.is_valid():
day.intervalworkout.add(form.save());
return HttpResponseRedirect(reverse('editworkout'))
if 'warmupsubmit' in request.POST:
form = AbstractExerciseForm(request.POST)
if form.is_valid():
day.warmup.add(form.save());
return HttpResponseRedirect(reverse('editworkout'))
else:
warmupform = AbstractExerciseForm()
intervalform = IntervalForm()
strengthform = StrengthExerciseForm()
return render_to_response('editworkout.html',
'mon':day,
'warmupform':warmupform,
'intervalform':intervalform,
'strengthform':strengthform, ,
context_instance=RequestContext(request)
)
【问题讨论】：
griasquid，到目前为止，您对 bootstrap + django 组合的体验如何？在开始之前听到某人的反馈会很棒 【参考方案1】：day = DayModel.objects.get(id=1) #用于测试目的，直到找出标签为止
假设 day=sunday 或 monday 或 tuesday 之类的字符串。现在您可以将 if 标记放入
检查日期并将 class="active" 放入 if 条件中。因此，只要条件匹配，该类将在特定日期处于活动状态。<ul id="myTab" class="nav nav-tabs">
<li %if day == "monday"% class="active"%endif%><a href="#Mon" data-toggle="tab"><h3>Mon</h3></a></li>
<li%if day == "tuesday"% class="active"%endif%><a href="#Tues" data-toggle="tab"><h3>Tues</h3></a></li>
<li %if day == "wednesday"% class="active"%endif%><a href="#Wed" data-toggle="tab"><h3>Wed</h3></a></li>
.
.
.
</ul>
【讨论】：
【参考方案2】：您可以在表单中添加一个隐藏字段来标识您正在提交的选项卡/表单，或者您可以为每个表单设置不同的 URL。
【讨论】：
非常感谢。这就是我需要的。我将日期附加到 % url editworkout % ，然后在我的视图中使用 request.get_full_path() 处理它【参考方案3】：您无法在服务器端知道，除非您的 javascript 告诉它（已解决 Here）。这是因为浏览器不会在页面焦点上向后端发送更多信息，因此您将在服务器端一无所知
【讨论】：
以上是关于Django 和 Bootstrap：知道哪个选项卡处于活动状态的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Bootstrap 4 添加到库 django-summernote？
Twitter Bootstrap 的 Django 和日期范围选择器组件