Dojo在页面上显示多个工具提示 [英] Dojo displaying multiple tooltip on page
问题描述
我有一个Dojo表单，我想将错误返回到表单并在工具提示中显示它们，因为我不想在表单布局中添加额外的元素。在研究中，我看到Dojo不允许开箱即用的实现，因为工具提示仅会显示在焦点所在的项目中。就我而言，我希望针对多个项目（例如，所有空字段）显示工具提示。
I have a Dojo form and i would like to return errors to the form and display them in tool tips since i do not want to add extra elements to my form layout. On researching i saw Dojo doesn't allow for such implementation out of the box since the tool tip will only be displayed in items in focus. In my case i would like tool tips to be displayed for multiple items e.g for all null fields.
我遇到了一个博客，其中某人做了一个 hack ，但是我不确定他的实现方式。我想显示多个项目的多个工具提示。这也是到目前为止我所做的小提琴。工具提示仅显示最后一项。
I came across a blog where a guy did a hack however i am not sure about his implementation of such. I would like to display multiple tool tips for multiple items. Here is also a fiddle of what i have done thus far. The tooltip only shows for the last item.
Dojo表单
<body class="claro">
<input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="
regExp: '[\\w]+',
required: true,
invalidMessage: 'First Name Required !'" id="fnameTextBox" title="First Name" placeholder="Your First Name" />
<input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="
regExp: '[\\w]+',
required: true,
invalidMessage: 'Last Name Required !'" id="lnameTextBox" title="Last Name" placeholder="Your Last Name" />
<button id="validateFields" data-dojo-type="dijit/form/Button">Validate</button>
</body>
JavaScript
dojo.require("dijit/form/Button");
dojo.require("dijit/form/ValidationTextBox");
dojo.require("dijit/Tooltip");
dojo.ready(function () {
var fName = dijit.byId("fnameTextBox");
var lName = dijit.byId("lnameTextBox");
dojo.connect(dijit.byId("validateFields"), "onClick", function () {
dijit.showTooltip(
fName.get('invalidMessage'),
fName.domNode,
fName.get('tooltipPosition'), !fName.isLeftToRight());
dijit.showTooltip(
lName.get('invalidMessage'),
lName.domNode,
lName.get('tooltipPosition'), !lName.isLeftToRight());
});
});
推荐答案
尽管如此，建议不要显示所有工具提示用户体验的角度。虽然所有无效字段都可以突出显示。工具提示旨在仅在我们关注它时才显示。
在这种情况下，您可以通过添加 dijit.showTooltip将焦点移至姓氏字段。
我更新了您的代码。请参考- http://jsfiddle.net/ZtzTE/26/
Showing all the tool tips is not advisable though, from the perspective of user experience. Although all invalid fields can be highlighted. Tooltip are designed to display only when we focus on it. In you case, you move the focus to the lastname field, by adding "dijit.showTooltip". I updated your code. Please refer - http://jsfiddle.net/ZtzTE/26/
dojo.connect(dijit.byId("validateFields"), "onClick", function() {
var myform = dijit.byId('myform');
myform.connectChildren();
myform.validate();
});
connectChildren用于在验证之前将所有字段连接到表单。 （请注意，某些字段可能稍后会以编程方式添加）。
（注意：如果您错过了验证文本框，我会在验证文本框中添加 missingMessage属性。因为 Invalid message和 missingMessage不同）。
"connectChildren" is to connect all fields to form before validating. (Note that some fields might have been added programmatically later). (Note: I added "missingMessage" attribute to the validation text boxes, in case you have missed them. Because, "Invalid message" and "missingMessage" are different).
如果未填写任何字段，则默认情况下，表单将重点放在第一个字段上。因此，即使没有重点关注，消息最初也会出现在第一个字段中。但是，如果第一个字段已填充且没有其他字段被聚焦，则missingMessage仅在对各个字段进行聚焦时才会出现。
If no fields are filled, the by default form will have focus on first field. So, initially the message will appear for first field even if not focused. But, if first field is filled and no other field is focused, then missingMessage appears only when focus is made to the respective field. Same applies to the invalid input and message too.
部分验证表单：
如果只需要验证几个字段，那么我们可以手动。
http://jsfiddle.net/ZtzTE/29/ -检查此完整示例（
Partial Validation of form: If only few fields are to be validated in a form, then we can do it manually. http://jsfiddle.net/ZtzTE/29/ - Check this complete example(updated)
// cp1和cp2是选项卡容器的两个内容窗格
//cp1 and cp2 are the two content panes of tab container
var mytab1 = dijit.byId("cp1");
var canNavigate = true;
var highlight = function(widget){
var v = widget.validate;
if(!v) return true;
widget._hasBeenBlurred = true;
if(!widget.validate()) {
canNavigate = false;
}
};
dojo.forEach(mytab1.getChildren(), highlight);
if(canNavigate) {
dijit.byId("tc").selectChild("cp2");
}
这篇关于Dojo在页面上显示多个工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
