Django使用心得（二）

本篇主要内容：

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)

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中加入如下内容：

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

标签: django框架

本文转自wang_yb博客园博客，原文链接：http://www.cnblogs.com/wang_yb/archive/2011/04/21/2024311.html，如需转载请自行联系原作者