Visual Studio 2012 RC + jQuery UI = ¿Error?

I'm at my wits' end! I'm trying to do something that (I believe) is a VERY simple jQuery UI process, but I can't get it to work. I'm not sure what to pin down as the variable that's causing the issue.

Podría ser:

  1. Mi código
  2. Visual Studio 2012RC
  3. interfaz de usuario de jQuery 1.8.22

What I'm trying to do is create a jQuery button and put an icon on it. The icon I want is the plus-thick icono.

Aquí están los css y js "imports" for the page (is their order incorrect???):

<link rel="stylesheet" type="text/css" href="Content/Default.css" />
<link rel="stylesheet" type="text/css" href="Content/themes/cupertino/jquery-ui-1.8.22.custom.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.22.custom.min.js"></script>

Here's the code I'm using to attempt to do this:

$('.headerButtonsDiv > a')
.button("option", "icons", { primary: 'ui-icon-plus-thick' })
.click(function () {
    var text = $(this).text();
    alert(text + ' clicked!');
    return false;

This was my first try (same result as above, by the way):

$('.headerButtonsDiv > a')
.button( { icons: { primary: 'ui-icon-plus-thick' } } )
.click(function () {
    var text = $(this).text();
    alert(text + ' clicked!');
    return false;

There are three buttons that are affected by this code.

Aquí están los resultados:

  1. Los programas <a> elements are correctly converted into jQuery buttons.
  2. Each of the buttons correctly has an icon on the left side of the button.
  3. Each of the buttons INcorrectly has the carat-1-n icon instead of plus-thick.

When I go into the page inspector (using IE and/or Chrome), I drill down to the button (converted <a> element) and see it and its 2 <span> sub-elements. While the <span> element for the icon DOES HAVE el ui-icon-plus-thick class applied to it, it NO TIENE cualquier background-position aplicado.

So, although the class IS present, it's not actually being applied. When I manually add the background-position atributo (background-position: -32px -128px;), "magically" the correct icon appears ;-).

I think I can figure out a workaround whereby I create the button and then attempt to select the correct <span> sub-element and then "manually" apply the background-position myself, but isn't that exactamente what the jQuery library is supposed to do?

In any case, if anyone can see where I've gone off the rails, I'd really appreciate it! This truly is a small issue, but if I can't get ESTA to work, I'm not confident about the more complicated issues.

preguntado el 31 de julio de 12 a las 13:07

1 Respuestas

I'm glad I saw this answer before anyone else could point out my stupidity!!!

The class I ACTUALMENTE wanted is: ui-icon-plusthick.

Lo que USADO fue: ui-icon-plus-thick.

I stared at this for 2 hours and never noticed the difference of a single dash ("-").


Respondido 31 Jul 12, 13:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.