Question

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

// ==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 stackoverflow 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 + "')");
});

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

1 个答案: