使剑道 UI 下拉列表将“选择控件”的“标题”属性显示为剑道工具提示
Make Kendo UI DropDownList display the Title attribute of Select Control as a kendoTooltip
为了使
剑道UI DropDownList将title属性显示为kendoTooltip,我需要做什么?
这就是我正在做的:http://jsfiddle.net/EdsonF/qDRv3/1/
<div class="editor-field">
<select id="Title" name="Title" title="What's your title?">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
$(function () {
var tooltip = $('#Title').kendoTooltip({
position: "right",
autoHide: true,
width: 280,
animation: {
open: {
effects: "slideIn:right",
duration: 300
},
close: {
effects: "slideIn:right",
reverse: true,
duration: 200
}
}
});
$("#Title").kendoDropDownList();
});
问题是title
属于原始select
,但不属于剑道UI装饰元素。当您在 KendoUI DropDownList 中转换select
时,它会创建一些额外的 HTML 元素,但title
不会复制到此元素中。
因此,您可以做的是:
// Create DropDownList
var title = $("#Title").kendoDropDownList().data("kendoDropDownList");
// Copy title from the select into the `wrapper` element
title.wrapper.attr("title", $("#Title").attr("title"));
// Now, define the tooltip for this wrapper element
var tooltip = title.wrapper.kendoTooltip({
position: "right",
autoHide: true,
width: 280,
animation: {
open: {
effects: "slideIn:right",
duration: 300
},
close: {
effects: "slideIn:right",
reverse: true,
duration: 200
}
}
});
这里的JSFiddle:http://jsfiddle.net/OnaBai/qDRv3/4/
如前所述,您的原始标签被 Kendo UI 包装,并且不会复制"title"属性。通过扩展 DropDownList Kendo.UI 类相对容易修复。以下是我在我的项目(TypeScript)中修复它的方式:
export class DropDownListX extends kendo.ui.DropDownList {
// Constructor
constructor(element: Element, options?: kendo.ui.DropDownListOptions) {
super(element, options);
// Copy title attribute from element node to its parent (wrapper created by kendo ui)
$(element).parent().attr("title", $(element).attr("title"));
}
}
// Create an alias of the prototype (required by kendo.ui.plugin)
DropDownListX.fn = DropDownListX.prototype;
// Deep clone the widget default options
DropDownListX.fn.options = $.extend(true, { }, kendo.ui.DropDownList.fn.options);
// Specify the name of your Kendo UI widget. Used to create the corresponding jQuery plugin.
DropDownListX.fn.options.name = "DropDownListX";
// Create a jQuery plugin.
kendo.ui.plugin(DropDownListX);
相关文章:
- 根据值向表的每个 td 添加标题属性
- 正在为禁用的输入设置标题属性
- 为HTML文本区域设置标题属性的样式
- HTML “标题”属性显示单词“未定义” - 例如.“主页未定义”
- 火狐中的标题属性
- 使剑道 UI 下拉列表将“选择控件”的“标题”属性显示为剑道工具提示
- 更改动态表中标题属性的格式
- 如何使用javascript从类中的链接获取标题属性
- “a”标记中标题属性末尾的空格
- 如何添加范围的标题属性值
- jQuery从标题属性获取动态生成的内容
- 将标题属性添加到现有 HTML 的某个位置
- 尝试在火狐扩展中获取标题属性时出错
- 在 asp.net 中使用 javascript 显示标题属性消息
- 引导灯箱:显示标题属性中的图像说明
- 标题属性中的 img 标记
- 在点击函数中将 HTML 标题属性的值作为变量进行访问
- 如何将标题属性添加到d3生成的力定向图的节点中
- 如何将“标题”属性发送到FancyBox库图像
- Kendo UI网格-单元格上的标题属性