本篇主要内容：
- django中引用javascript
- django中引用css及图片资源
1. django中引用javascript
web开发中必然要引用一些javascript的函数库来进行一些前端的处理，django也不例外。
下面主要介绍如何在django中引用当前比较流行的js库JQuery。
首先，新建一个django工程siteWithResources，新建的方法参照Django使用心得（一）
然后分别配置以下几个文件：
1.1 urls.py
|
1
2
3
4
5
6
7
8
|
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
|
1
2
3
4
5
|
from
django.shortcuts
import
render_to_response
def
PageWithJquery( request ):
return
render_to_response(
'default.html'
,
{
"mytitle"
:
"customize_title"
})
|
1.3 default.html (引用javascript)
|
1
|
<script type=
"text/javascript"
src=
"/js/jquery/jquery-1.4.4.min.js"
></script>
|
然后就可以在default.html中使用jquery的各种函数了。
2. django中引用css及图片资源
引用css和图片资源的方法也和引用js是一样的，在urls.py中加入如下内容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!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中加上模板所在的配置。
|
1
2
3
4
5
6
|
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"
,
)
|
最后，整个工程的目录结构如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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
|
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
