Jquery UI 元素 Spinner 和 Selectmenu 的 Greasemonkey 图标不显示

Question

我有一个 Greasemonkey 脚本，可以向网站添加额外的 Jquery UI 元素。到目前为止一切正常，但微调器和选择菜单上的图标只有在将鼠标悬停在光标上时才可见。将我的脚本剥离到基本部分，它看起来像这样：

// ==UserScript==
// @name        MyScriptName
// @namespace   MyNameSpace
// @include     *
// @version     1
// @grant       GM_addStyle
// @grant       GM_getResourceText
// @grant       GM_getResourceURL
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @require     https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
// @resource    jqueryUIStyle https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
// @resource    IconSet1  http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/images/ui-icons_222222_256x240.png
// @resource    IconSet2  http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/images/ui-icons_454545_256x240.png
// ==/UserScript==

var iconSet1    = GM_getResourceURL("IconSet1");
var iconSet2    = GM_getResourceURL("IconSet2");
var jqUI = GM_getResourceText("jqueryUIStyle");
jqUI     = jqUI.replace (/url\(images\/ui\-bg_.*00\.png\)/g, "");
jqUI     = jqUI.replace (/images\/ui-icons_222222_256x240\.png/g, iconSet1);
jqUI     = jqUI.replace (/images\/ui-icons_454545_256x240\.png/g, iconSet2);
GM_addStyle(jqUI);

// Div for teamchanges
var teamChoosePanel = document.createElement('div');
teamChoosePanel.innerHTML = '<select id="chooseTeams">'
                                 + '<option selected="selected">A</option>'
                                 + '<option>B</option>'
                                 + '<option>C</option>'
                               + '</select>';
document.body.appendChild(teamChoosePanel);

// Div with walk commands
var numStepSpinnerElement = document.createElement("input");
numStepSpinnerElement.setAttribute("id", "numStepSpinner");
document.body.appendChild(numStepSpinnerElement);

//document.body.appendChild(btn);

// Create team selection
$('#chooseTeams').selectmenu({
  width: 105
});

// Create spinner
$("#numStepSpinner").spinner();
$( "#numStepSpinner" ).spinner( "value", 0 );

通过这个脚本，我得到了一个 Spinner 和一个 SelectMenu 元素，它们工作得很好。唯一的问题是这些元素的三角形只有在鼠标悬停时才可见。这使得用户很难意识到有一个选择菜单或一个微调器。知道我做错了什么吗？我对 greasemonkey、javascript、css 和 html 比较陌生。基本上我试着让它类似于 this Whosebug post.

Answer 1

我认为将 ui-icon 更改为 .css() 会更容易，如下所示：

https://jsfiddle.net/Twisty/2u08Lef8/

$(document).ready(function() {
  var teamChoosePanel = $("<div>");
  var iconSet1 = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/images/ui-icons_222222_256x240.png";
  var iconSet2 = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/images/ui-icons_454545_256x240.png";

  teamChoosePanel.html("<select id='chooseTeams'>\r\n<option selected='selected'>A</option>\r\n<option>B</option>\r\n<option>C</option>\r\n</select>");
  $("body").append(teamChoosePanel);

  var numStepSpinnerElement = $("<input>", {
    id: "numStepSpinner"
  });
  $("body").append(numStepSpinnerElement);

  $('#chooseTeams').selectmenu({
    width: "105px"
  });

  // Create spinner
  $("#numStepSpinner").spinner();
  $("#numStepSpinner").spinner("value", 0);

  $(".ui-icon").css("background-image", "url('" + iconSet1 + "')");
});

Jquery UI 元素 Spinner 和 Selectmenu 的 Greasemonkey 图标不显示

Greasemonkey Icons of Jquery UI elements Spinner and Selectmenu do not show

javascript

css

jquery

greasemonkey

jquery-ui