我有一个自定义面板小部件在WAB开发人员版。面板上是dijit/form/Button。它有一个css类赋予它颜色。它还有一个标签“开始工具”。这里有一个data-dojo-attach-event = "onClick:mytogglefunction "。
在我的小部件代码中,我有mytogglefunction,它使用if/else模式来查找标签状态并将其更改为不同的标签“停止工具”,并更改css类(因此按钮在单击和激活时获得不同的颜色)。
问题:用户点击一次按钮。标签立即更改,但CSS颜色不会改变,直到鼠标指针离开按钮。有两个事件发生,点击,然后是onmouseout。
据我所知,这不是css:悬停问题。我希望css更新上一个onclick。
我在CMV应用程序中创建了一个类似的按钮,运行良好-但我不知道是什么控制了WAB中的这种行为。
的帮助!谢谢你!
解决了!进入解决方案。
伊丽莎白,
以下是我在你的场景和工作中测试的内容:
mytogglefunction:函数(){/ / toggleButton如果(这。toggleButton。标签==“开始工具”){这。toggleButton。集(“标签”,“停止工具”);domClass。取代(这。toggleButton。domNode,“成功”,“危险”);这。地图。setMapCursor(“十字”);}其他的如果(这。toggleButton。标签==“停止工具”){domClass。取代(这。toggleButton。domNode,“危险”,“成功”);这。toggleButton。集(“标签”,“开始工具”);这。地图。setMapCursor(“默认”);}},
罗伯特,
这是函数。
mytogglefunction:函数(){如果(这。toggleButton。标签==“开始工具”){这。toggleButton。集(“标签”,“停止工具”);这。toggleButton。集(“baseClass”,“成功”);这。地图。setMapCursor(“十字”);这。createToolbar();}其他的如果(这。toggleButton。标签==“停止工具”){这。toggleButton。集(“baseClass”,“危险”);这。toggleButton。集(“标签”,“开始工具”);这。地图。setMapCursor(“默认”);这。defmapClickEvtHandler。删除();这。地图。图形。清晰的();这。地图。infoWindow。隐藏();这。地图。removeLayer(allHwys);这。gtoolbar。禁用();}},
下面是其中一个css样式:
.success .dijitButtonNode{背景:# 000000;边框颜色:# 000000;颜色:# FFF;填充:6 px 6像素;粗细:大胆的;边框样式:固体;边框宽度:2 px;这个特性:6像素;}
我已采取了变通办法。
在使用css类让按钮在onClick上立即改变颜色方面,我没有取得任何进展。类只有在鼠标离开按钮后才会更新。然后颜色变化就会生效。这个问题在手机上被放大了,因为用户必须点击两次才能让按钮改变颜色。
我的解决方法是我在mytogglefunction中直接改变颜色。它可以在点击后立即改变按钮,也可以在手机上使用。
如果你有什么想法的话,我仍然想知道为什么按钮onclick不会立即改变我的风格。
这是我的解决方法:
domStyle。集(”mybutton", { background: "#000000", borderstyle: "solid", borderwidth: "2px", borderradius: "6px" });
不幸的是,这对我不起作用!
我试着
domClass。取代(”mybutton", "success", "danger");
在我的代码,但现在css类没有改变在所有(我试图改变2类参数的顺序,以防我有错!)
也许我是设置按钮错误在我的html模板?不管怎样,这是我手头的资料。(我尝试使元素<按钮>而不是
再次感谢。
< div data-dojo-attach-point = " _contentPanel " >
< div风格= " text-align:中心”>
< div风格= "填充:5 px”>
< / div >< / div >
< / div >
< / div >
伊丽莎白,
以下是我在你的场景和工作中测试的内容:
mytogglefunction:函数(){/ / toggleButton如果(这。toggleButton。标签==“开始工具”){这。toggleButton。集(“标签”,“停止工具”);domClass。取代(这。toggleButton。domNode,“成功”,“危险”);这。地图。setMapCursor(“十字”);}其他的如果(这。toggleButton。标签==“停止工具”){domClass。取代(这。toggleButton。domNode,“危险”,“成功”);这。toggleButton。集(“标签”,“开始工具”);这。地图。setMapCursor(“默认”);}},
再次感谢,我的设置仍然不工作。我不确定按钮id和data-dojo- attachpoint是如何使用的,我认为有些东西正在变得混乱。为什么我的按钮文本(第7行)的data-dojo- attachment -point显示为“containerNode”?另外,在我上面给出的变通方法的例子中,它的工作方式是改变文本框的背景颜色,而不是按钮本身。我不明白这一点,因为我认为附加点和id都指的是按钮元素我创建了。这个解决方法是有效的,因为它在单击时立即改变文本的背景颜色,而每次尝试改变按钮的css仍然只在mouseout时有效。
在我的设置中使用您的代码片段会导致类混淆(但仍然存在onmouseout问题)。我试图通过从Chrome元素面板复制一些代码来显示更多。
这是我在点击按钮之前看到的:
● Start Tool
点击按钮后,除了文字变成“停止工具”外,没有任何变化。
这是我点击2次后看到的——类别混乱,文字又回到了“开始工具”。
● Start Tool
伊丽莎白,
在最佳实践模板化小部件开发中不使用Dom id。data-dojo- attachment -point将用于获取对模板中dom元素的引用。
当我在widgets template.html中使用这个并使用我上次提供的代码时,按钮颜色立即改变了:
<divdata-dojo-type=”dijit /形式/按钮”data-dojo-props=”标签:'启动工具'baseClass:'危险'”data-dojo-attach-event=”onClick: mytogglefunction”data-dojo-attach-point=”toggleButton”>div>
我唯一删除的是id属性。我不确定你的代码实现出了什么问题。也许你可以压缩你的整个小部件和附加它(使用高级编辑器)给我看。
问题解决了!
也许这不是最好的方法,但这对我来说非常有效。我保留了最初的代码,并添加了您的建议。这招奏效了。
希望它不会太丑!
mytogglefunction:函数(){/ / toggleButton如果(这。toggleButton。标签==“开始工具”){这。toggleButton。集(“标签”,“停止工具”);这。toggleButton。集(“baseClass”,“成功”);domClass。取代(这。toggleButton。domNode,“成功”,“危险”);这。地图。setMapCursor(“十字”);}其他的如果(这。toggleButton。标签==“停止工具”){这。toggleButton。集(“baseClass”,“危险”);domClass。取代(这。toggleButton。domNode,“危险”,“成功”);这。toggleButton。集(“标签”,“开始工具”);这。地图。setMapCursor(“默认”);}},