jQuery icon in jqWidgets - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, icon, jQuery UI, jqxButton

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 11 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

jQuery icon in jqWidgets Posts

October 4, 2012 at 8:55 pm jQuery icon in jqWidgets #8937

Participant

I am using part of an example for a button and wanted to know if I can add the Jquery icon to the button via addClass(‘ui-icon-trash’)? Or is this not usable in jqWidgets?

var deleteButton = $(“

Delete

“); deleteButton.find(‘div’).addClass(‘ui-icon-trash’);
deleteButton.width(70);
deleteButton.jqxButton({ theme: theme });
deleteButton.appendTo(element);

October 5, 2012 at 7:37 am jQuery icon in jqWidgets #8969

Dimitar

Participant

Hello DavidSimmons,

Could you be more clear – do you wish to replace the background of a jqxButton with an image?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 5, 2012 at 7:57 pm jQuery icon in jqWidgets #9001

DavidSimmons

Participant

No I was wanting to add the jQuery UI icon to the button with or without text.

October 8, 2012 at 5:19 am jQuery icon in jqWidgets #9025

Dimitar

Participant

Hi DavidSimmons,

Here is how to add an image to a jqxButton:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Button Sample1</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create Push Button.
                $("#jqxButton").jqxButton({ width: '80', height: '80' });
            });
        </script>
        <div style='width: 150px;' id='jqxWidget'>
            <div id="jqxButton">
                <img src="../../custom_images/Firefox.png" width="75px" height="75px" />
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 22, 2012 at 7:38 pm jQuery icon in jqWidgets #9883

DavidSimmons

Participant

Here are the jQuery Icons I would like to use with my buttons. Are they available and can they be added to a button in JQWidgets?

http://jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/icons.html

October 23, 2012 at 7:29 am jQuery icon in jqWidgets #9905

Dimitar

Participant

Hi DavidSimmons,

Here is how to use a jQuery UI icon with a jqxButton:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../JQUI/jquery.ui.core.css" type="text/css" />
    <link rel="stylesheet" href="../JQUI/jquery.ui.theme.css" type="text/css" />
    <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation" />
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.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 () {
            $("#jqxbutton").jqxButton({ height: 16, width: 16 });
        });
    </script>
</head>
<body>
    <div id="jqxbutton">
        <span class="ui-icon ui-icon-clock"></span>
    </div>
</body>
</html>

Best Regards
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.