Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added two example modal dialogs

1) Static text
2) Dialog text generated dynamically via ajax
  • Loading branch information...
commit a8c4e4fbf286824a061bb5e73483257b1e95e6fa 1 parent 168ef9a
@mrchilds authored
View
24 bootstrap/views.py
@@ -36,6 +36,30 @@ def ajax_example(request):
content_type=\
"application/javascript; charset=utf-8")
+
+def modal_dialog(request):
+ context = {}
+ context["user"] = request.user
+ context.update(csrf(request))
+ return render_to_response("bootstrap/modal/modal_dialog.html", context)
+
+
+def text_modal_dialog(request):
+ if request.POST.get('id', False):
+ # String provided for ease of demonstration
+ # Replace with model lookup, e.g.
+ # wording = User.objects.get(id=request.POST.get('id', False))
+ wording = "ABC"
+ else:
+ wording = False
+ template = "bootstrap/modal/modal_dialog_text.html"
+ html = render_to_string(template, {"wording": wording})
+ response = simplejson.dumps({"html": html})
+ return HttpResponse(response,
+ content_type=\
+ "application/javascript; charset=utf-8")
+
+
@login_required
def inside(request):
context = {}
View
227 static/bootstrap/js/bootstrap-modal.js
@@ -0,0 +1,227 @@
+/* =========================================================
+ * bootstrap-modal.js v1.3.0
+ * http://twitter.github.com/bootstrap/javascript.html#modal
+ * =========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+
+(function( $ ){
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+ * ======================================================= */
+
+ var transitionEnd
+
+ $(document).ready(function () {
+
+ $.support.transition = (function () {
+ var thisBody = document.body || document.documentElement
+ , thisStyle = thisBody.style
+ , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+ return support
+ })()
+
+ // set CSS transition event type
+ if ( $.support.transition ) {
+ transitionEnd = "TransitionEnd"
+ if ( $.browser.webkit ) {
+ transitionEnd = "webkitTransitionEnd"
+ } else if ( $.browser.mozilla ) {
+ transitionEnd = "transitionend"
+ } else if ( $.browser.opera ) {
+ transitionEnd = "oTransitionEnd"
+ }
+ }
+
+ })
+
+
+ /* MODAL PUBLIC CLASS DEFINITION
+ * ============================= */
+
+ var Modal = function ( content, options ) {
+ this.settings = $.extend({}, $.fn.modal.defaults)
+ this.$element = $(content)
+ .delegate('.close', 'click.modal', $.proxy(this.hide, this))
+
+ if ( options ) {
+ $.extend( this.settings, options )
+
+ if ( options.show ) {
+ this.show()
+ }
+ }
+
+ return this
+ }
+
+ Modal.prototype = {
+
+ toggle: function () {
+ return this[!this.isShown ? 'show' : 'hide']()
+ }
+
+ , show: function () {
+ var that = this
+ this.isShown = true
+ this.$element.trigger('show')
+
+ escape.call(this)
+ backdrop.call(this, function () {
+ that.$element
+ .appendTo(document.body)
+ .show()
+
+ setTimeout(function () {
+ that.$element
+ .addClass('in')
+ .trigger('shown')
+ }, 1)
+ })
+
+ return this
+ }
+
+ , hide: function (e) {
+ e && e.preventDefault()
+
+ var that = this
+ this.isShown = false
+
+ escape.call(this)
+
+ this.$element
+ .trigger('hide')
+ .removeClass('in')
+
+ function removeElement () {
+ that.$element
+ .hide()
+ .trigger('hidden')
+
+ backdrop.call(that)
+ }
+
+ $.support.transition && this.$element.hasClass('fade') ?
+ this.$element.one(transitionEnd, removeElement) :
+ removeElement()
+
+ return this
+ }
+
+ }
+
+
+ /* MODAL PRIVATE METHODS
+ * ===================== */
+
+ function backdrop ( callback ) {
+ var that = this
+ , animate = this.$element.hasClass('fade') ? 'fade' : ''
+ if ( this.isShown && this.settings.backdrop ) {
+ this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+ .click($.proxy(this.hide, this))
+ .appendTo(document.body)
+
+ setTimeout(function () {
+ that.$backdrop && that.$backdrop.addClass('in')
+ $.support.transition && that.$backdrop.hasClass('fade') ?
+ that.$backdrop.one(transitionEnd, callback) :
+ callback()
+ })
+ } else if ( !this.isShown && this.$backdrop ) {
+ this.$backdrop.removeClass('in')
+
+ function removeElement() {
+ that.$backdrop.remove()
+ that.$backdrop = null
+ }
+
+ $.support.transition && this.$element.hasClass('fade')?
+ this.$backdrop.one(transitionEnd, removeElement) :
+ removeElement()
+ } else if ( callback ) {
+ callback()
+ }
+ }
+
+ function escape() {
+ var that = this
+ if ( this.isShown && this.settings.keyboard ) {
+ $('body').bind('keyup.modal', function ( e ) {
+ if ( e.which == 27 ) {
+ that.hide()
+ }
+ })
+ } else if ( !this.isShown ) {
+ $('body').unbind('keyup.modal')
+ }
+ }
+
+
+ /* MODAL PLUGIN DEFINITION
+ * ======================= */
+
+ $.fn.modal = function ( options ) {
+ var modal = this.data('modal')
+
+ if (!modal) {
+
+ if (typeof options == 'string') {
+ options = {
+ show: /show|toggle/.test(options)
+ }
+ }
+
+ return this.each(function () {
+ $(this).data('modal', new Modal(this, options))
+ })
+ }
+
+ if ( options === true ) {
+ return modal
+ }
+
+ if ( typeof options == 'string' ) {
+ modal[options]()
+ } else if ( modal ) {
+ modal.toggle()
+ }
+
+ return this
+ }
+
+ $.fn.modal.Modal = Modal
+
+ $.fn.modal.defaults = {
+ backdrop: false
+ , keyboard: false
+ , show: true
+ }
+
+
+ /* MODAL DATA- IMPLEMENTATION
+ * ========================== */
+
+ $(document).ready(function () {
+ $('body').delegate('[data-controls-modal]', 'click', function (e) {
+ e.preventDefault()
+ var $this = $(this).data('show', true)
+ $('#' + $this.attr('data-controls-modal')).modal( $this.data() )
+ })
+ })
+
+})( window.jQuery || window.ender )
View
15 static/bootstrap/example.js → static/bootstrap/js/example.js
@@ -28,8 +28,19 @@ $(document).ready(function() {
}
}
});
+ $('#ajax-text-modal').modal({backdrop: true,
+ keyboard: true});
+ $("#ajax-modal").click( function () {
+ var id = { id : $(this).attr("for") }
+ $.post("/text_modal_dialog/", id,
+ function(response){
+ $("#modal-text").html(response.html);
+ $("#ajax-text-modal").modal("show");
+ }, "json");
+ });
});
+// Ajax Form
function ajax() {
var form = $("#example_form").serialize();
$.post("/ajax_example/", form,
@@ -41,4 +52,6 @@ function ajax() {
$("#form").html(response.html);
}
}, "json");
-}
+}
+
+// Modal Dialog
View
0  static/bootstrap/jquery-1.6.2min.js → static/bootstrap/js/jquery-1.6.2min.js
File renamed without changes
View
12 templates/bootstrap/base.html
@@ -15,10 +15,9 @@
<![endif]-->
<!-- Le styles -->
- <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css">
+ <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<link rel="stylesheet" href="/static/bootstrap/style.css">
-
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
@@ -26,8 +25,9 @@
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="/static/bootstrap/jquery-1.6.2.min.js"><\/script>')</script>
- <script type="text/javascript" src="/static/bootstrap/example.js"></script>
+ <script>window.jQuery || document.write('<script src="/static/bootstrap/js/jquery-1.6.2.min.js"><\/script>')</script>
+ <script type="text/javascript" src="/static/bootstrap/js/example.js"></script>
+ {% block javascript %}{% endblock %}
</head>
<body>
@@ -36,6 +36,10 @@
<div class="fill">
<div class="container">
<h3><a href="{% url bootstrap.views.home %}">Example</a></h3>
+ <ul class="nav">
+ <li><a href="{% url bootstrap.views.home %}">Ajax Form</a></li>
+ <li><a href="{% url bootstrap.views.modal_dialog %}">Modal Dialog</a></li>
+ </ul>
<ul class="nav secondary-nav">
{% if user.is_authenticated %}
<a href="{% url auth_logout %}" >Logout</a>
View
2  templates/bootstrap/example.html
@@ -4,7 +4,7 @@
{% block content %}
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
- <h1>Django and Bootstrap</h1>
+ <h1>Ajax Form</h1>
</div>
<!-- Example row of columns -->
View
47 templates/bootstrap/modal/modal_dialog.html
@@ -0,0 +1,47 @@
+{% extends "bootstrap/base.html" %}
+{% load i18n %}
+
+{% block javascript %}
+ <script type="text/javascript" src="/static/bootstrap/js/bootstrap-modal.js"></script>
+{% endblock %}
+
+{% block content %}
+<div class="hero-unit">
+ <h1>Modal Dialog</h1>
+</div>
+<div class="row">
+ <div class="span8">
+ <div id="modal-from-dom" class="modal hide fade">
+ <div class="modal-header">
+ <a href="#" class="close">&times;</a>
+ <h3>Modal Heading</h3>
+ </div>
+ <div class="modal-body">
+ <p>Static Text</p>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn primary">Primary</a>
+ <a href="#" class="btn secondary">Secondary</a>
+ </div>
+ </div>
+ <button class="btn danger" data-keyboard="true" data-backdrop="true" data-controls-modal="modal-from-dom">Launch Static Text Modal</button>
+ </div>
+ <div class="span8">
+ <div id="ajax-text-modal" class="modal hide fade">
+ <div class="modal-header">
+ <a href="#" class="close">&times;</a>
+ <h3>Modal Heading</h3>
+ </div>
+ <div class="modal-body" id="modal-text">
+ {% include 'bootstrap/modal/modal_dialog_text.html' %}
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn primary">Primary</a>
+ <a href="#" class="btn secondary">Secondary</a>
+ </div>
+ </div>
+ <button class="btn success" id="ajax-modal" for="1">Launch Ajax Modal</button>
+ </div>
+</div>
+
+{% endblock %}
View
5 templates/bootstrap/modal/modal_dialog_text.html
@@ -0,0 +1,5 @@
+{% if wording %}
+<p>{{ wording }}</p>
+{% else %}
+<p>Something has gone wrong</p>
+{% endif %}
View
9 urls.py
@@ -2,11 +2,10 @@
from django.contrib import admin
from django.views.generic.simple import direct_to_template
-from bootstrap.views import home, inside, ajax_example
+from bootstrap.views import *
admin.autodiscover()
-
urlpatterns = patterns('',
(r'^admin/', include(admin.site.urls)),
@@ -15,8 +14,14 @@
(r'^$', home),
(r'^inside/$', inside),
+
+ #Ajax Form
(r'^ajax_example', ajax_example),
+ #modal dialog
+ (r'^modal_dialog/$', modal_dialog),
+ (r'^text_modal_dialog/$', text_modal_dialog),
+
#Humans and Robots
('^humans.txt$', direct_to_template, {'template':'humans.txt', 'mimetype':'text/plain'}),
('^robots.txt$', direct_to_template, {'template':'robots.txt', 'mimetype':'text/plain'}),
Please sign in to comment.
Something went wrong with that request. Please try again.