Skip to content

Commit e47cd6c

Browse files
djangoerdjangoer
committed
Merge pull request #6 from djangoer/dev
updated template tags
2 parents 6a3e259 + e6daad6 commit e47cd6c

File tree

5 files changed

+191
-13
lines changed

5 files changed

+191
-13
lines changed

‎README.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
django-selectize
2-
================
1+
[django-selectize](http://selectize-djangoer.rhcloud.com/)
2+
=================
3+
4+
Note: This is only in Developing stage Now.
35

46
django-selectize is a Django app based on Selectize.js that help you to create Select and Multiselect widgets in Django forms.
57

@@ -16,7 +18,9 @@ Installing django-selectize
1618
There are several ways to install django-selectize:
1719

1820
* Automatically, via a package manager: `pip install django-selectize`
19-
* Manually, by downloading a release package then unzip and copy the folder `selectize` to your project directory.
21+
* Download a release package then unzip and run `python setup.py install` to install it into your python directory.
22+
* If you don't like to install then download a release package, unzip and copy the folder `selectize` to your Django-project directory.
23+
2024

2125
Required settings
2226
-----------------
@@ -60,6 +64,10 @@ Now Intiate a selectize box from a normal selectbox by calling:
6064

6165
<script>$('#id_publications').selectize();</script>
6266

67+
68+
Full Example
69+
------------
70+
6371
For testing
6472
-----------
6573
You need to install Selenium:

‎demo/app1/templates/articles.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{% load selectize_tags %}
2-
{% selectize_tags_media 'css' 'default' %}
2+
{% selectize_tags_media 'css' %}
33
{% selectize_tags_media 'js' 'jquery' %}
4-
{% selectize_tags_media 'js' 'selectize' %}
54

65
<h2>Articles</h2>
76
<table border="2">

‎demo/app1/templates/home.html

Lines changed: 157 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,157 @@
1-
<a href="{% url 'articles' %}">Mutiselect example</a>
1+
<!DOCTYPE html>
2+
{% load selectize_tags %}
3+
<html lang="en">
4+
<head>
5+
<title>Django-Selectize Basic example</title>
6+
<!-- Bootstrap Theme CSS -->
7+
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
8+
9+
{% selectize_tags_media 'css' 'default' %}
10+
<link rel="stylesheet" href="http://highlightjs.org/static/styles/ir_black.css">
11+
<style type="text/css">
12+
/*pre{background:#fff;color:#000;font-weight: 500;}*/
13+
body{background:#f1f1f1;}
14+
</style>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<div class="header">
19+
<ul class="nav nav-pills pull-right">
20+
<li class="active"><a href="#">Home</a></li>
21+
<li><a href="{% url 'articles' %}">Django ModelForm example</a></li>
22+
<li><a href="https://github.com/djangoer/django-selectize">Fork on Github</a></li>
23+
</ul>
24+
<h3 class="text-muted">Django Selectize</h3>
25+
</div>
26+
<hr>
27+
<div class="panel panel-default">
28+
<div class="panel-heading">Installing django-selectize:</div>
29+
<div class="panel-body">
30+
<strong>There are several ways to install django-selectize:</strong>
31+
<ul>
32+
<li> Automatically, via a package manager: <code>pip install django-selectize</code></li>
33+
<li>Download a release package then unzip and run <code>python setup.py install</code>.</li>
34+
<li>If you don't like to install then download a release package, unzip and copy the folder <code>selectize</code> to your Django-project directory.</li>
35+
</ul>
36+
<p> Now add <code>selectize</code> to the <code>INSTALLED_APPS</code> setting of your project.</p>
37+
<p> <strong>Note:</strong> you must place <code>selectize</code> above other installed applications.</p>
38+
</div>
39+
</div>
40+
<div class="row">
41+
<div class="col-md-6">
42+
<div class="panel panel-default">
43+
<div class="panel-heading">Single-Select Example:</div>
44+
<div class="panel-body">
45+
<label for="select-country">Country:</label>
46+
<select id="select-country" placeholder="Select a country...">
47+
<option value="">Select a country...</option>
48+
<option value="AF">Afghanistan</option>
49+
<option value="AL">Albania</option>
50+
<option value="DZ">Algeria</option>
51+
<option value="AS">American Samoa</option>
52+
<option value="AD">Andorra</option>
53+
<option value="AO">Angola</option>
54+
<option value="AI">Anguilla</option>
55+
<option value="AQ">Antarctica</option>
56+
<option value="AG">Antigua and Barbuda</option>
57+
<option value="AR">Argentina</option>
58+
<option value="AM">Armenia</option>
59+
<option value="AW">Aruba</option>
60+
<option value="AU">Australia</option>
61+
</select>
62+
</div><!--/panel-body-->
63+
<div class="panel-footer">
64+
<p>Usage:</p>
65+
<pre><code class="html">
66+
{&#37; load selectize_tags &#37;}
67+
&lt;html&gt;
68+
&lt;head&gt;
69+
{&#37; selectize_tags_media 'css' &#37;}
70+
&lt;/head&gt;
71+
&lt;body&gt;
72+
&lt;label for="select-country"&gt;Country:&lt;/label&gt;
73+
&lt;select id="select-country" placeholder="Select a country..."&gt;
74+
&lt;option value=""&gt;Select a country...&lt;/option&gt;
75+
&lt;option value="AF"&gt;Afghanistan&lt;/option&gt;
76+
....
77+
&lt;/select&gt;
78+
...
79+
80+
{&#37; selectize_tags_media 'js' 'jquery' &#37;}
81+
&lt;script&gt;
82+
$('#select-country').selectize();
83+
&lt;/script&gt;
84+
&lt;/body&gt;
85+
&lt;html&gt; </code></pre>
86+
</div>
87+
</div><!--/panel-->
88+
</div>
89+
<div class="col-md-6">
90+
<div class="panel panel-default">
91+
<div class="panel-heading">Multiple-Select example:</div>
92+
<div class="panel-body">
93+
<label for="select-state">States:</label>
94+
<select id="select-state" name="state[]" multiple style="width:70%" placeholder="Select a state...">
95+
<option value="">Select a state...</option>
96+
<option value="AL">Alabama</option>
97+
<option value="AK">Alaska</option>
98+
<option value="AZ">Arizona</option>
99+
<option value="AR">Arkansas</option>
100+
<option value="CA" selected>California</option>
101+
<option value="CO">Colorado</option>
102+
<option value="CT">Connecticut</option>
103+
<option value="DE">Delaware</option>
104+
<option value="DC">District of Columbia</option>
105+
<option value="FL">Florida</option>
106+
<option value="GA">Georgia</option>
107+
<option value="HI">Hawaii</option>
108+
</select>
109+
</div><!--/panel-body-->
110+
<div class="panel-footer">
111+
<p>Usage:</p>
112+
<pre><code class="html">
113+
{&#37; load selectize_tags &#37;}
114+
&lt;html&gt;
115+
&lt;head&gt;
116+
{&#37; selectize_tags_media 'css' &#37;}
117+
&lt;/head&gt;
118+
&lt;body&gt;
119+
&lt;label for="select-state"&gt;States:&lt;/label&gt;
120+
&lt;select id="select-state" name="state[]" multiple style="width:70%" placeholder="Select a state..."&gt;
121+
&lt;option value=""&gt;Select a state...&lt;/option&gt;
122+
&lt;option value="AL"&gt;Alabama&lt;/option&gt;
123+
....
124+
&lt;/select&gt;
125+
...
126+
127+
{&#37; selectize_tags_media 'js' 'jquery' &#37;}
128+
&lt;script&gt;
129+
$('#select-state').selectize();
130+
&lt;/script&gt;
131+
&lt;/body&gt;
132+
&lt;html&gt; </code></pre>
133+
</div>
134+
</div><!--/panel-->
135+
</div><!--/col-md-6-->
136+
</div>
137+
138+
<div class="footer">
139+
<p>&copy; <a href="https://github.com/djangoer">DjangoER</a> 2014</p>
140+
</div>
141+
142+
</div> <!-- /container -->
143+
144+
145+
<!--JavaScript
146+
================================================== -->
147+
<!-- Placed at the end of the document so the pages load faster -->
148+
{% selectize_tags_media 'js' 'jquery' %}
149+
<script src="http://highlightjs.org/static/highlight.pack.js"></script>
150+
151+
<script>
152+
$('#select-country').selectize();
153+
$('#select-state').selectize();
154+
hljs.initHighlightingOnLoad();
155+
</script>
156+
</body>
157+
</html>

‎selectize/templatetags/selectize_tags.py

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,25 @@
77

88
@register.simple_tag
99
def selectize_tags_media(media_type='css',name=''):
10+
"""
11+
Usage:
12+
------
13+
To include css media:
14+
selectize_tags_media 'css' <theme>
15+
16+
To include Selectize Scripts:
17+
selectize_tags_media 'js'
18+
19+
To include Selectize Scripts and Jquery:
20+
selectize_tags_media 'js' 'jquery'
21+
"""
1022
if media_type=='js':
11-
html='<script src="{url}"></script>'
12-
fpath='selectize/{name}.min.js'.format(name=name)
13-
else:
14-
html='<link rel="stylesheet" href="{url}">'
15-
fpath='selectize/css/selectize.{name}.css'.format(name=name)
16-
return html.format(url=static(fpath))
23+
str_script='<script src="{url}"></script>\n'
24+
html=str_script.format(url=static('selectize/selectize.min.js'))
25+
if name=='jquery':
26+
html=str_script.format(url=static('selectize/jquery.min.js'))+html
27+
return html
28+
29+
if name:name+='.'
30+
fpath='selectize/css/selectize.{name}css'.format(name=name)
31+
return '<link rel="stylesheet" href="{url}">'.format(url=static(fpath))

‎setup.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
from distutils.core import setup
55

66
setup(name='django-selectize',
7-
version='1.1',
7+
version='1.2',
88
description='django-selectize is a Django app based on Selectize.js that help you to create Select and Multiselect widgets in Django forms.',
99
author='Djangoer',
1010
author_email='[email protected]',

0 commit comments

Comments
 (0)