Creating a jQuery Django Button Widget Tutorial

Creating a jQuery Django Button Widget Tutorial

Django Button Widget - Title
Complete Tutorial - 4 Minute Read

Why use a jQuery Django Button Widget?

The jQuery Django Button Widget, while admittedly a very small feature, can add the touch to your site to compliment your user experience. 

This widget will automatically control the hover and active Javascript items on your button fields. That means whenever a user either clicks or hovers over a button, Javascript will be applied to that button to show that action. It’s the little stuff that builds user experience. 

Whenever it comes to the button widget, many people may not notice it being there. But a lot of people will notice if it’s not there. It’s one of those things that’s just kind of an industry standard whenever it comes to implementing buttons on your website. In my opinion, using jQuery’s button widgets in your Django projects is a great, simple way of living up to this industry standard.

jQuery Django Button Widget - Example
Example of Button Widgets

See an Example of a jQuery Django Button Widget

With all my widget tutorials, I think it’s important to know what you’re building before you spend your time creating it on your website. The above shows an example of the widget we’ll be creating in this tutorial. It’s just a screenshot, but if you want to see and use the working example of this widget, you can find it on my Heroku hosted Django website. You can find it at this link.

How to start with jQuery Widgets

jQuery is just a tool to make it easier to impliment Javascript into your django websites (or any type of website that supports Javascript for that matter). 

If you want to use Javascript to begin creating dynami content on your website, jQuery makes the process much easier to get started.

 

First, we need the source code for the jQuery Button Accordion Widget

To get the source code for the Button widget, we’ll need to head to jQuery’s website. You can either google search it or just follow this link. Or you can just grab the source code from below:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel=“stylesheet” href=“/resources/demos/style.css”>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( ".widget input[type=submit], .widget a, .widget button" ).button();
$( "button, input, a" ).click( function( event ) {
event.preventDefault();
} );
} );
</script>

There’s multiple different functionalities available, but I’m just going to use the default one for the purposes of this tutorial. The first section is just the styling that jQuery gives by default, the actual Javascript elements are in the script source lines in the second section.

Using the Button JavaScript to create a Django Button Widget

Depending on the size of your project, I would most likely encourage you to create a base.html file and extend it to other templates in your Django project. This is how I’ve created the working live example website for all the tutorials on jQuery widgets.

In this scenario, play the above styling and scripts into your base.html file. If you’re only working off one file, then go ahead and place it into that file. 

To start using the jQuery Django Button Widget, you need to designate a div  and label for input like the following:

<div class="widget">
<h1>Widget Buttons</h1>
<button>A button element</button>
<input type="submit" value="A submit button">
<a href="#">An anchor</a>
</div>
<h1>CSS Buttons</h1>
<button class="ui-button ui-widget ui-corner-all">A button element</button>
<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
This is just jQuery’s source code. There’s not really a lot to it whenever you’re styling your buttons with jQuery. 
 
Here’s the full source code from my live example :
 

{% extends “base.html” %}
{% load staticfiles %}

{% block content %}
<h3>Below is the jQuery Button Widget</h3>

<script>
$( function() {
$( “.widget input[type=submit], .widget a, .widget button” ).button();
$( “button, input, a” ).click( function( event ) {
event.preventDefault();
} );
} );
</script>
</head>
<body>
<div class=”widget”>
<h1>Buttons Below</h1>
<button>Click me!</button>

<input type=”submit” value=”A submit button”>

<a href=”{% url ‘index’ %}”>Link Button (Home Page)</a>
</div>
<h1>Styled Buttons</h1>
<button class=”ui-button ui-widget ui-corner-all”>No Click Me!</button>

<input class=”ui-button ui-widget ui-corner-all” type=”submit” value=”Submit Button Value”>

<a class=”ui-button ui-widget ui-corner-all” href=”{% url ‘index’ %}”>Link Button (Home Page)</a>

{% endblock %}

Quick Review:

  • Assign your class names as the same names as the ones listed above to receive the default jQuery functionality. 
  • There’s not a lot other than the default functionality for the Javascript of these buttons — However there is plenty of styling that you can do to make your buttons perfect. You can alter jQuery’s Source code to style your buttons to your liking. 

But that’s pretty much it whenever it comes to creating your own jQuery Django Button Widget in your Django project. If this was your first jQuery tutorial, I totally recommend checking out some of my other tutorials. There’s some awesome widgets that you can create with simple jQuery applications. 

Additionally, jQuery is a great stepping stone to learning full JavaScript. One of the most profitable and useful coding languages to learn. 

Enjoy the Content? Join the Django Development Newsletter!
Other jQuery Django Widget Tutorials:

Leave a Reply

Your email address will not be published. Required fields are marked *