jQuery实现dialog设置focus焦点的方法


Posted in Javascript onJune 10, 2015

本文实例讲述了jQuery实现dialog设置focus焦点的方法。分享给大家供大家参考。具体分析如下:

当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效。

查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~

//显示新建项目群组对话框 
function showCreateProjectGroupDialog(i) { 
  $("#layout-createProjectGroup-pane").show().dialog({ 
    modal: true 
    , title: lmslang.listProjectGroup_Create 
    , width: 450 
    , overlay: { 
      opacity: 0.5 
    } 
    , focus: function(ev, data) { 
      $("#txtGroupName").focus(); 
    } 
    , buttons: { 
      "保存": function() { 
        var name = el("txtGroupName").value; 
        var description = el("txtDescription").value; 
        var b = $("#fgroup").valid(); 
        if (b) { 
          createGroupJson(); 
          closeCreateGroupDialog(); 
        } else { 
          showError(lmslang.formValidate_Error); 
        } 
      } 
      , "取消": function() { 
        closeCreateGroupDialog(); 
      } 
    } 
  }); 
} 
//隐藏新建项目群组对话框 
function closeCreateGroupDialog(){ 
  $("#layout-createProjectGroup-pane").dialog("close"); 
}

搞定!O(∩_∩)O..

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript比较两个日期相差天数的方法
Jul 24 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
微信小程序入门教程
Nov 18 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
jQuery替换textarea中换行的方法
Jun 10 #Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 #Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 #Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 #Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 #Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 #Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 #Javascript
You might like
php实现爬取和分析知乎用户数据
2016/01/26 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
详解在Python程序中自定义异常的方法
2015/10/16 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
开学季活动策划方案
2014/02/28 职场文书
保护环境建议书300字
2014/05/13 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
八月一日观后感
2015/06/10 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers