将jQuery与Django base.html模板一起使用 [英] Using JQuery with Django base.html template
问题描述
我正在使用Django-1.4.5.和JQuery，我对模板系统有问题:我的base.html具有脚本和JQuery函数，但是当我尝试在另一个模板(扩展了base.html)中使用选项卡时，它没有显示.这是我的base.html:
I'm using Django-1.4.5. and JQuery and I have problem with templating system: I have base.html with script and JQuery functions, but when I try to use tabs in another template (which extends base.html), it doesn't show up. Here is my base.html:
<head>
<meta charset="utf-8">
<link href="{{ STATIC_URL }}/css/custom-theme/jquery-ui-1.10.2.custom.css" rel="stylesheet">
<script src="{{ STATIC_URL }}/js/jquery-1.9.1.js"></script>
<script src="{{ STATIC_URL }}/js/jquery-ui-1.10.2.custom.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}/css/style.css" type="text/css" />
<script>
$(function() {
$("#accordion1").accordion({
heightStyle: "content",
});
$('#accordion2').accordion({
heightStyle: "content",
})
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs-li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
还有其他模板:
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block head %}
{% endblock %}
{% block content %}
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
<li><a href="#tab5">Tab 5</a></li>
</ul>
<div id="tab1"><p>Text 1</p></div>
<div id="tab2"><p>Text 2</p></div>
<div id="tab3"><p>Text 3</p></div>
<div id="tab4"><p>Text 4</p></div>
<div id="tab5"><p>Text 5</p></div>
</div>
{% endblock %}
当我切换base.html中的选项卡时，它可以正常工作.我无法弄清楚为什么在扩展base.html时它不起作用.预先感谢您的回答.
When I switch tabs in base.html, it works without problems. I can't figure out why it doesn't work when I extend base.html. Thanks in advance for your answers.
推荐答案
使用
{% block head %}
{% endblock %}
您正在废弃base.html中head块中的所有内容.我想您的base.html模板会将所有JavaScript源包含在此块中.
you're trashing all the content in the head block in the base.html. I guess that your base.html template is enclosing all javascript sources in this block.
只需忽略这两行. head块将被继承.
Just leave out these two lines. The head block will be inherited.
这篇关于将jQuery与Django base.html模板一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
