jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
273 lines (255 loc) • 15.7 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Button, CheckBox, Toggle Button, Repeat Button, Radio Button, Link Button, Button" />
<meta name="description" content="Buttons with Text and Image." />
<title id='Description'>Buttons with Images.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
// image before text.
$("#button1").jqxButton({ width: 120, imgPosition: "left", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
$("#button2").jqxButton({ width: 120, imgPosition: "left", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
$("#button3").jqxButton({ width: 120, imgPosition: "left", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
$("#button4").jqxButton({ width: 120, imgPosition: "center", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
$("#button5").jqxButton({ width: 120, imgPosition: "center", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
$("#button6").jqxButton({ width: 120, imgPosition: "center", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
$("#button7").jqxButton({ width: 120, imgPosition: "right", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
$("#button8").jqxButton({ width: 120, imgPosition: "right", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
$("#button9").jqxButton({ width: 120, imgPosition: "right", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "imageBeforeText" });
// text before image.
$("#button10").jqxButton({ width: 120, textPosition: "left", imgPosition: "left", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
$("#button11").jqxButton({ width: 120, textPosition: "left", imgPosition: "center", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
$("#button12").jqxButton({ width: 120, textPosition: "left", imgPosition: "right", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
$("#button13").jqxButton({ width: 120, textPosition: "center", imgPosition: "left", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
$("#button14").jqxButton({ width: 120, textPosition: "center", imgPosition: "center", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
$("#button15").jqxButton({ width: 120, textPosition: "center", imgPosition: "right", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
$("#button16").jqxButton({ width: 120, textPosition: "right", imgPosition: "left", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
$("#button17").jqxButton({ width: 120, textPosition: "right", imgPosition: "center", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
$("#button18").jqxButton({ width: 120, textPosition: "right", imgPosition: "right", imgSrc: "../../../images/twitter.png", textImageRelation: "textBeforeImage" });
// image above text
$("#button19").jqxButton({ width: 120, imgPosition: "left", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
$("#button20").jqxButton({ width: 120, imgPosition: "left", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
$("#button21").jqxButton({ width: 120, imgPosition: "left", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
$("#button22").jqxButton({ width: 120, imgPosition: "center", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
$("#button23").jqxButton({ width: 120, imgPosition: "center", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
$("#button24").jqxButton({ width: 120, imgPosition: "center", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
$("#button25").jqxButton({ width: 120, imgPosition: "right", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
$("#button26").jqxButton({ width: 120, imgPosition: "right", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
$("#button27").jqxButton({ width: 120, imgPosition: "right", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "imageAboveText" });
// text above image
$("#button28").jqxButton({ width: 120, textPosition: "top", imgPosition: "left", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
$("#button29").jqxButton({ width: 120, textPosition: "left", imgPosition: "center", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
$("#button30").jqxButton({ width: 120, textPosition: "left", imgPosition: "right", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
$("#button31").jqxButton({ width: 120, textPosition: "center", imgPosition: "left", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
$("#button32").jqxButton({ width: 120, textPosition: "center", imgPosition: "center", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
$("#button33").jqxButton({ width: 120, textPosition: "center", imgPosition: "right", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
$("#button34").jqxButton({ width: 120, textPosition: "right", imgPosition: "left", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
$("#button35").jqxButton({ width: 120, textPosition: "right", imgPosition: "center", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
$("#button36").jqxButton({ width: 120, textPosition: "right", imgPosition: "right", imgSrc: "../../../images/twitter.png", textImageRelation: "textAboveImage" });
// overlay
$("#button37").jqxButton({ width: 120, imgPosition: "left", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
$("#button38").jqxButton({ width: 120, imgPosition: "left", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
$("#button39").jqxButton({ width: 120, imgPosition: "left", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
$("#button40").jqxButton({ width: 120, imgPosition: "center", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
$("#button41").jqxButton({ width: 120, imgPosition: "center", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
$("#button42").jqxButton({ width: 120, imgPosition: "center", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
$("#button43").jqxButton({ width: 120, imgPosition: "right", textPosition: "left", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
$("#button44").jqxButton({ width: 120, imgPosition: "right", textPosition: "center", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
$("#button45").jqxButton({ width: 120, imgPosition: "right", textPosition: "right", imgSrc: "../../../images/facebook.png", textImageRelation: "overlay" });
});
</script>
</head>
<body class='default'>
<h3>Image Before Text</h3>
<table>
<tr>
<td>Image Left/Text Left</td>
<td>
<button id="button1">Button</button></td>
<td>Image Left/Text Center</td>
<td>
<button id="button2">Button</button></td>
<td>Image Left/Text Right</td>
<td>
<button id="button3">Button</button></td>
</tr>
<tr>
<td>Image Center/Text Left</td>
<td>
<button id="button4">Button</button></td>
<td>Image Center/Text Center</td>
<td>
<button id="button5">Button</button></td>
<td>Image Center/Text Right</td>
<td>
<button id="button6">Button</button></td>
</tr>
<tr>
<td>Image Right/Text Left</td>
<td>
<button id="button7">Button</button></td>
<td>Image Right/Text Center</td>
<td>
<button id="button8">Button</button></td>
<td>Image Right/Text Right</td>
<td>
<button id="button9">Button</button></td>
</tr>
</table>
<h3>Text Before Image</h3>
<table>
<tr>
<td>Text Left/Image Left</td>
<td>
<button id="button10">Button</button></td>
<td>Text Left/Image Center</td>
<td>
<button id="button11">Button</button></td>
<td>Text Left/Image Right</td>
<td>
<button id="button12">Button</button></td>
</tr>
<tr>
<td>Text Center/Image Left</td>
<td>
<button id="button13">Button</button></td>
<td>Text Center/Image Center</td>
<td>
<button id="button14">Button</button></td>
<td>Text Center/Image Right</td>
<td>
<button id="button15">Button</button></td>
</tr>
<tr>
<td>Text Right/Image Left</td>
<td>
<button id="button16">Button</button></td>
<td>Text Right/Image Center</td>
<td>
<button id="button17">Button</button></td>
<td>Text Right/Image Right</td>
<td>
<button id="button18">Button</button></td>
</tr>
</table>
<h3>Image Above Text</h3>
<table>
<tr>
<td>Image Left/Text Left</td>
<td>
<button id="button19">Button</button></td>
<td>Image Left/Text Center</td>
<td>
<button id="button20">Button</button></td>
<td>Image Left/Text Right</td>
<td>
<button id="button21">Button</button></td>
</tr>
<tr>
<td>Image Center/Text Left</td>
<td>
<button id="button22">Button</button></td>
<td>Image Center/Text Center</td>
<td>
<button id="button23">Button</button></td>
<td>Image Center/Text Right</td>
<td>
<button id="button24">Button</button></td>
</tr>
<tr>
<td>Image Right/Text Left</td>
<td>
<button id="button25">Button</button></td>
<td>Image Right/Text Center</td>
<td>
<button id="button26">Button</button></td>
<td>Image Right/Text Right</td>
<td>
<button id="button27">Button</button></td>
</tr>
</table>
<h3>Text Above Image</h3>
<table>
<tr>
<td>Text Left/Image Left</td>
<td>
<button id="button28">Button</button></td>
<td>Text Left/Image Center</td>
<td>
<button id="button29">Button</button></td>
<td>Text Left/Image Right</td>
<td>
<button id="button30">Button</button></td>
</tr>
<tr>
<td>Text Center/Image Left</td>
<td>
<button id="button31">Button</button></td>
<td>Text Center/Image Center</td>
<td>
<button id="button32">Button</button></td>
<td>Text Center/Image Right</td>
<td>
<button id="button33">Button</button></td>
</tr>
<tr>
<td>Text Right/Image Left</td>
<td>
<button id="button34">Button</button></td>
<td>Text Right/Image Center</td>
<td>
<button id="button35">Button</button></td>
<td>Text Right/Image Right</td>
<td>
<button id="button36">Button</button></td>
</tr>
</table>
<h3>Overlay(Text and Image can be one over another)</h3>
<table>
<tr>
<td>Image Left/Text Left</td>
<td>
<button id="button37">Button</button></td>
<td>Image Left/Text Center</td>
<td>
<button id="button38">Button</button></td>
<td>Image Left/Text Right</td>
<td>
<button id="button39">Button</button></td>
</tr>
<tr>
<td>Image Center/Text Left</td>
<td>
<button id="button40">Button</button></td>
<td>Image Center/Text Center</td>
<td>
<button id="button41">Button</button></td>
<td>Image Center/Text Right</td>
<td>
<button id="button42">Button</button></td>
</tr>
<tr>
<td>Image Right/Text Left</td>
<td>
<button id="button43">Button</button></td>
<td>Image Right/Text Center</td>
<td>
<button id="button44">Button</button></td>
<td>Image Right/Text Right</td>
<td>
<button id="button45">Button</button></td>
</tr>
</table>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>