本篇主要内容：
- django中引用javascript
- django中引用css及图片资源
1. django中引用javascript
web开发中必然要引用一些javascript的函数库来进行一些前端的处理，django也不例外。
下面主要介绍如何在django中引用当前比较流行的js库JQuery。
首先，新建一个django工程siteWithResources，新建的方法参照Django使用心得（一）
然后分别配置以下几个文件：
1.1 urls.py
urlpatterns = patterns('',
# Example:
# (r'^siteWithResources/', include('siteWithResources.foo.urls')),
( r'^js/(?P<path>.*)$', 'django.views.static.serve',
{ 'document_root': 'D:/Vim/python/django/django-resources/js/' }
),
)
1.2 views.py
from django.shortcuts import render_to_response
def PageWithJquery( request ):
return render_to_response( 'default.html',
{"mytitle":"customize_title"})
1.3 default.html (引用javascript)
<script type="text/javascript" src="/js/jquery/jquery-1.4.4.min.js"></script>
然后就可以在default.html中使用jquery的各种函数了。
2. django中引用css及图片资源
引用css和图片资源的方法也和引用js是一样的，在urls.py中加入如下内容：
urlpatterns = patterns('',
# Example:
# (r'^siteWithResources/', include('siteWithResources.foo.urls')),
(r'^test/$', 'siteWithResources.views.PageWithJquery'),
( r'^js/(?P<path>.*)$', 'django.views.static.serve',
{ 'document_root': 'D:/Vim/python/django/django-resources/js/' }
),
( r'^css/(?P<path>.*)$', 'django.views.static.serve',
{ 'document_root': 'D:/Vim/python/django/django-resources/css/' }
),
( r'^images/(?P<path>.*)$', 'django.views.static.serve',
{ 'document_root': 'D:/Vim/python/django/django-resources/images/' }
),
)
完整版的default.html如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{ mytitle }}</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<script type="text/javascript" src="/js/jquery/jquery-1.4.4.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('#btn_down').bind( 'click', move_txt_down );
$('#btn_up').bind( 'click', move_txt_up );
$('#btn_fadeIn').bind( 'click', fade_img_in );
$('#btn_fadeOut').bind( 'click', fade_img_out );
});
function move_txt_down(){
$('#txt').animate({left:100,top:500 }, 'slow');
}
function move_txt_up(){
$('#txt').animate({left:100,top:150 }, 'slow');
}
function fade_img_in(){
$('#logo1').fadeIn('slow');
}
function fade_img_out(){
$('#logo1').fadeOut('slow');
}
</script>
</head>
<body>
<h1>My Resource Test</h1>
<input type="button" name="btn" id="btn_down" value="Move the text down"/>
<input type="button" name="btn" id="btn_up" value="Move the text up"/>
<input type="button" name="btn" id="btn_fadeIn" value="Fade the logo in"/>
<input type="button" name="btn" id="btn_fadeOut" value="Fade the logo out"/>
<br />
<img src="/images1/Logo1.gif" alt="logo1" id="logo1" />
<div id="txt" style="position: absolute;left:100px;top:150px;">this is the text for move</div>
</body>
</html>
当然，还得在settings.py中加上模板所在的配置。
TEMPLATE_DIRS = (
# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
"D:/Vim/python/django/django-templates/siteWithResources",
)
最后，整个工程的目录结构如下：
D:\Vim\python\django
|- siteWithResources
| |- __init__.py
| |- manage.py
| |- settings.py
| |- urls.py
| `- views.py
|
|- django-resources
| |- css
| | `- base.css
| |
| |- images1
| | |- Sunset.jpg
| | `- Logo1.gif
| |
| `- js
| `- jquery
| `- jquery-1.4.4.min.js
|
`- django-templates
`- siteWithResources
`- default.html