jQuery UI Widgets Forums General Discussions jQuery icon in jqWidgets

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • jQuery icon in jqWidgets #8937

    DavidSimmons
    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);

    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/

    jQuery icon in jqWidgets #9001

    DavidSimmons
    Participant

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

    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/

    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

    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/

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

You must be logged in to reply to this topic.