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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery弹出框代码封装DialogHelper

    看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. 复制代码 代码如下: //require ScrollHelper.js function DialogHelper() {     var _this

  • 修改jquery中dialog的title属性方法(推荐)

    好久都没办法尝试成功 在网上找的经测试也不行 于是在官方文档上看到了 结果终于成功了 $("#overTime").dialog({ autoOpen: false, width: 400, modal: true, title: "Dialog Title", buttons: { "确定": function () { }, "取消": function () { } } }); 在初始化的时候要写title属性(官方文档

  • 修改Jquery Dialog 位置的实现方法

    今天在做一个功能的时候使用到了Jquery UI中的dialog组件,因为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了. 我今天解决的就是这个问题:解决这种问题有两种方式(个人认为) 1.修改属性让可拖动局域可见,进行拖动 2.不让出现可拖动区域不可见的情况. 针对第一种情况,我没有想到合适的办法.下面给出第二种情况

  • JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法

    背景:想通过Esc键关闭展示中的Dialog对话框,发现有些对话框可以,有些会失效. 原因分析: 1.对话框上可以输入内容的标签元素可以,反之不行. 2.如果鼠标点击对话框后,也可以Esc键关闭. 可以看出对话框上是需要聚焦就可以了. 解决方案: 方案一: focus:function(){ $("#id").focus(); } 方案二: 延迟聚焦 setTimeout(function() { $("#id").focus(); }, 500); 以上所述是小编

  • jQuery UI库中dialog对话框功能使用全解析

    对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript 的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 一．开启多个dialog    只要设置不同的id 即可实现. $('#x').dialog(); $('#y').dialog(); 二．修改dialog 样式    在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看 元素.可以看看dialog 的样式,对dialog 的标题背景进行修

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

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

    本文实例讲述了jQuery实现dialog设置focus焦点的方法.分享给大家供大家参考.具体分析如下: 当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效. 查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~ //显示新建项目群组对话框 function showCreateProjectGroupDialog(i) { $("#l

  • MFC设置对话框焦点的方法简述

    本文简单讲述了MFC设置对话框焦点的方法,分享给大家供大家参考.具体实现方法如下: 具体的方法有两种: 1. 设置对话框控件的tab order. 按Ctrl+D即可看见.将需要被设置到焦点的空间的tab order设为1. 2. 对话框的OnInitDialog返回FALSE.解释如下:(摘抄至msdn)   If OnInitDialog returns nonzero, Windows sets the input focus to the first control in the dia

  • jQuery获取与设置iframe高度的方法

    本文实例讲述了jQuery获取与设置iframe高度的方法.分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定. 1.首先获取到iframe中页面的高度: 复制代码 代码如下: var iframeHeight = $("#UpdateUserItem").contents().find("body").height(); 2.设置iframe的高度: $("#UpdateUserItem"

  • js/jquery获取文本框输入焦点的方法

    方法一. 复制代码 代码如下: function CheckForm() {             if(document.form1.trainingName.value==""){                     alert("培训班名称不能为空!");                     document.form1.trainingName.focus();                     return false;          

  • jquery动态更换设置背景图的方法

    有些时候,我们可以为用户提供很贴心的功能,比如判断用户是什么时候来访问的,然后给出一句问候,晚上好,下午好之类的.并且更换网页的背景颜色,比如晚上的时候就可以用满天星星的背景,白天就用阳光灿烂,或者特定节日就用该主题背景,让你的网站显得非常灵活,不枯燥. 下面就如何实现背景更换给出一种解决方法: 如何实现 很简单,下面是 JQuery 代码: 复制代码 代码如下: function doChangeBkg(){ var bkgUrl=$("#inputBkgUrl").val(); v

  • JQuery中使文本框获得焦点的方法实例分析

    本文实例分析了JQuery中使文本框获得焦点的方法.分享给大家供大家参考.具体分析如下: 由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: $("#id").focus(); $("#id")[0].focus(); 第一个是增加

  • JQuery Dialog的内存泄露问题解决方法

    对于页面来说,JQuery中的Dialog从效果上来说还可以,而且使用简单,只要短短几行绑定的代码就可以实现弹出效果. 代码 复制代码 代码如下: $('#dialog').dialog({ autoOpen: false, width: 600, buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog(&quo

  • jquery点击回车键实现登录效果并默认焦点的方法

    最近在做项目登录时,每次都需要点击登录按钮才可以进入相应的页面,给用户一个很不好的体验,所以我就添加使用回车键来实现登录. 方法: <form> <input type="text" id="username_txt" placeholder="用户名" /> <input type="password" id="userpass_txt" placeholder="

  • jQuery基于$.ajax设置移动端click超时处理方法

    本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为移动端click事件会比touchstart事件慢几拍 移动设备某个元素上事件执行顺序是: touchstart touchmove touchend click{mousedown->mousemove->mouseup} click事件在移动设备上虽然会识别但却是最后一个执行的,所以如果不把c

  • jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

    jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

    本文实例讲述了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法.分享给大家供大家参考,具体如下: 1.问题背景 设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色 2.实现源码 (1)图形自分配颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-设置折线图中折线线条颜色和折线点颜色</t

随机推荐