对话框是通知用户某些信息的方法。这是在用户窗口上弹出以显示下一步将发生的信息或开发人员想要向用户澄清的任何信息的一种好方法。 jQueryUI对话框方法用于在页面内部创建基本的对话框窗口。它具有标题栏和内容区域,默认情况下可以使用“ X”图标进行移动,调整大小和关闭。当对话框获得焦点时,将触发焦点事件。
用法:
$(".selector").dialog ( focused:function( event, ui ) { console.log('focused') },
CDN链接:首先,添加项目所需的jQuery Mobile脚本。
<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel =”stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
范例1:
- “打开对话框”按钮将触发点击函数(#gfg),该函数将在对话框(#gfg2)中进一步打开‘textarea’。
- focus(event,ui):触发框获得焦点。此焦点具有附加的回调函数。
事件:类型->事件ui:类型->对象
回调函数:function(event,ui){console.log(‘focused’)}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"/>
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script type="text/javascript">
$(function () {
$("#gfg2").dialog({
autoOpen:false,
focus:function (event, ui) {
console.log("focused");
},
});
$("#gfg").click(function () {
$("#gfg2").dialog("open");
});
});
</script>
</head>
<body>
<div id="gfg2" title="GeeksforGeeks">
<textarea>jQuery UI | focus(event, ui) Event</textarea>
</div>
<button id="gfg">Open Dialog</button>
</body>
</html>
输出:
参考:https://api.jqueryui.com/1.9/dialog/#event-focus
相关用法
- jQuery UI dialog resizeStart(event, ui)用法及代码示例
- jQuery UI dialog dragStop(event, ui)用法及代码示例
- jQuery UI dialog dragStart(event, ui)用法及代码示例
- jQuery UI dialog create(event, ui)用法及代码示例
- jQuery UI dialog close(event, ui)用法及代码示例
- jQuery UI dialog resize(event,ui)用法及代码示例
- jQuery UI dialog open(event,ui)用法及代码示例
- jQuery UI dialog resizeStop()用法及代码示例
- jQuery UI Dialog closeOnEscape用法及代码示例
- jQuery UI Dialog closeText用法及代码示例
- jQuery UI Dialog draggable用法及代码示例
- jQuery UI Dialog height用法及代码示例
- jQuery UI Dialog minHeight用法及代码示例
- jQuery UI Dialog title用法及代码示例
- jQuery UI Dialog maxHeight用法及代码示例
- jQuery UI dialog option()用法及代码示例
- jQuery UI dialog open()用法及代码示例
- jQuery UI Dialog resizable用法及代码示例
- jQuery UI Dialog modal用法及代码示例
注:本文由纯净天空筛选整理自taran910大神的英文原创作品 jQuery UI dialog focus(event,ui) Event。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。