jquery-ui 按钮看起来已禁用
Posted
技术标签:
【中文标题】jquery-ui 按钮看起来已禁用【英文标题】：jquery-ui button looks disabled 【发布时间】：2021-06-06 12:31:58 【问题描述】：我猜我在这里做了一些愚蠢的事情，你可以指出我正确的方向。我正在尝试使用 jquery-ui“铅笔”图标进行编辑，并且该图标看起来不活动。见下面的html和js。
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<TITLE>Sample</TITLE>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="sample.js"></script>
</HEAD>
<script>
$(document).ready(function()
$( window ).on( "load", function()
sample.launch();
);
);
</script>
<body>
<input type="button" id="applybtn" style="width:65px" value="Click Me" />
</body>
</HTML>
这里是js文件：
var sample = sample || ;
(function ($)
"use strict";
function onApplyBtnClick()
var html = '<input type="text" id="schpn12" value=' + "ABCD" + '>';
html += '<button class="editbtn" >Edit</button>';
$('<div></div>')
.html('<span></span>' + html)
.css("background-color","#FFFFFF")
.dialog(
modal: true,
close: function () $(this).remove(); ,
buttons:
"Apply": function ()
$(this).dialog('close');
);
$('.editbtn').button(
icons:
primary: "ui-icon-pencil"
,
text: false
);
function launch()
$("#applybtn").click(onApplyBtnClick);
sample.launch = launch;
(jQuery));
【问题讨论】：
由于.button() 的代码在onApplyBtnClick() 内部，因此必须执行此操作才能正确初始化按钮。我建议将代码移到函数之外或移到launch()。
看起来 .button() 正在执行，因为我可以看到“铅笔”图标。我应该添加任何课程以使其看起来很活跃吗？还是我错过了按钮初始化（如果有的话）？
你能用 just 按钮重新创建它（在你的问题中的 sn-p（编辑，单击[<>]）） - 即删除模式代码。见minimal reproducible example。
您的按钮看起来“正常”。它只是垃圾 jquery-ui 默认的“主题”和图标，使它看起来被禁用。与 实际 禁用按钮 .button(disabled:false) 进行比较，您会看到。这是我为你准备的jsfiddle.net/uej4rpmL
【参考方案1】：
考虑以下内容。
$(function()
function onApplyBtnClick()
var dialogBox = $("<div>",
title: "Test Dialog"
)
.css("background-color", "#FFFFFF")
.dialog(
modal: true,
close: function()
$(this).remove();
,
buttons:
"Apply": function()
$(this).dialog('close');
);
$("<input>",
type: "text",
id: "schpn12",
value: "ABCD"
).appendTo(dialogBox);
$("<button>",
class: "editbtn"
)
.html("Edit")
.button(
icons:
primary: "ui-icon-pencil"
,
showLabel: false
).appendTo(dialogBox);
$("#applybtn").click(onApplyBtnClick);
);<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<button id="applybtn">Apply</button>由于您正在构建对话框、输入和按钮，因此最好在创建它们时对其进行初始化。
text 不是按钮的选项或方法。您将需要使用showLabel 选项。
【讨论】：
以上是关于jquery-ui 按钮看起来已禁用的主要内容，如果未能解决你的问题，请参考以下文章
如何在 jquery-ui datepicker 中禁用动画？
使用 jquery 切换 LinkButton 的启用/禁用状态