Greasemonkey Jquery UI元素的图标Spinner和Selectmenu不显示[重复](Greasemonkey Icons of Jquery UI elements Spinne

Greasemonkey Jquery UI元素的图标Spinner和Selectmenu不显示[重复](Greasemonkey Icons of Jquery UI elements Spinner and Selectmenu do not show [duplicate])

这个问题在这里已有答案：

没有CSS或自定义，jQuery-UI在我的用户脚本中不起作用？ 1个答案

我有一个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很新。 基本上我试图让它类似于这个stackoverflow帖子 。

This question already has an answer here:

jQuery-UI is not working in my userscript without CSS, or with customization? 1 answer

I have a Greasemonkey script that adds additional Jquery UI elements to a website. Everything works fine so far but the icons at the spinner and selectmenu are only visible when hovering over with the curosr. Stripping down my script to the essential parts, it looks like this:

// ==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 );

With this script I get a Spinner and a SelectMenu element that work just fine. The only problem is that the triangles of these elements are only visible when hovering over with the cursor. This makes it hard for users to realize that there is a selection menu or a spinner. Any idea what I have made wrong? I am rather new to greasemonkey, javascript, css and html. Basically I tried to keep it similar to this stackoverflow post.

最满意答案

我认为用.css()更改ui-icon会更容易：

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

I would think it would be easier to just change the ui-icon with .css() like so:

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