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' });
CodeProject
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.