jQuery Button with Image

This post illustrates how to add a jQuery Button with Image to a web page in a few steps.

The first step is to add the Button’s HTML code. The jqxButton can be created either from DIV tag or INPUT tag. To display an image in the Button, we need to create it from a DIV tag. In the HTML below, we add a DIV tag for the Button , IMG tag for the Button’s image and another DIV tag for the Button’s Text.
<div id='jqxButton'>
    <img style='float: left; margin: 4px;' src='../../images/numberinput.png' />
    <div style='float: left; margin: 4px;'>
        Button</div>
</div>
The second step is to add the dependency script files. To use the jQWidgets Button, we need to add following javascript files to the web page.
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
The third step is to add the CSS stylesheet files. In this post, we will use the ‘DarkBlue’ theme and we need to load the base and darkblue styles.
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.darkblue.css" type="text/css" />
The final step is to create the Button by using the jqxButton constructor. We pass three parameters to the constructor – width, height and theme name.
$("#jqxButton").jqxButton({ width: '80px', height: '25px', theme: 'darkblue' });

jQuery Image Button
This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxButton and tagged , , , , , , , , , . Bookmark the permalink.

One Response to jQuery Button with Image

  1. zemorango says:

    Nice post :) just what I was looking for :)

Leave a Reply