Click here to Skip to main content
13,458,194 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 6 Jan 2012

jQuery Button with Image

, 6 Jan 2012
Rate this:
Please Sign up or sign in to vote.
How to add a jQuery Button with Image to a web page in a few steps

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;'>

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 article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
This member doesn't quite have enough reputation to be able to display their biography and homepage.
Group type: Organisation

13 members

You may also be interested in...

Comments and Discussions

QuestionWhere to write the initialize code Pin
Nouman Bhatti29-Aug-12 2:49
memberNouman Bhatti29-Aug-12 2:49 
AnswerRe: Where to write the initialize code Pin
Nouman Bhatti29-Aug-12 2:54
memberNouman Bhatti29-Aug-12 2:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180323.1 | Last Updated 6 Jan 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid