Heim > Backend-Entwicklung > PHP-Tutorial > Easyui---模态对话框实现ESC键一键锁屏(输入密码解锁)

Easyui---模态对话框实现ESC键一键锁屏(输入密码解锁)

WBOY
Freigeben: 2016-07-29 09:00:56
Original
1923 Leute haben es durchsucht

1 功能

??通过按ESC键,促发模态对话框,从而使除了对话框之外的界面都不能操作,这样能够在工作人员离开时,防止别人操作页面,而只能通过本人的密码才能解除锁屏。

Easyui---模态对话框实现ESC键一键锁屏(输入密码解锁)

2 功能实现

??通过jQuery的按键松开检测事件keyup(),当按下ESC松开时,会触发该事件,从而进入事件的运行函数keyup(),在这个函数里面我们将模态对话框调出来,从而锁屏。
??锁屏后,模态对话框中可以输入密码和提交,将输入的内容进行ajax判断,密码正确则关闭模态对话框,密码错误不动作。

<code>keyup事件运行函数
</code>
Nach dem Login kopieren
<code>$(document).keyup(<span><span>function</span><span>(event)</span>{</span><span>switch</span>(event.keyCode){
        <span>case</span><span>27</span>:
            {
                <span>//检测按键:ESC,锁住网页</span><span>//alert("ESC");</span>
                $(<span>'#dlg-lock'</span>).dialog(<span>'open'</span>).dialog(<span>'center'</span>);
                $(<span>'#lock_form'</span>).form(<span>'clear'</span>);                 
            }
            <span>break</span>;  
    }
});</code>
Nach dem Login kopieren
<code>模态对话框
</code>
Nach dem Login kopieren
<code><span><!-- 一键锁定屏幕解锁对话框 模态对话框 --></span><span>div</span><span>id</span>=<span>"dlg-lock"</span><span>class</span>=<span>"easyui-dialog"</span><span>style</span>=<span>"width:360px;height:120px;"</span><span>data-options</span>=<span>"closed: true,modal:true,title:''"</span>><span>form</span><span>id</span>=<span>"lock_form"</span>><span>div</span><span>style</span>=<span>"float:left;"</span>><span>label</span><span>style</span>=<span>"margin-right:5px;height:30px;font-size:12px;"</span>>解锁密码:<span><span>label</span>></span><span>input</span><span>class</span>=<span>"easyui-textbox"</span><span>style</span>=<span>"float:left;width:250px;height:30px;"</span><span>type</span>=<span>"password"</span><span>id</span>=<span>"unlock_passwd"</span><span>data-options</span>=<span>"required:true,prompt:'请输入解锁密码!'"</span>/><span><span>div</span>></span><span>div</span><span>style</span>=<span>"float:left;margin-left:115px;margin-top:5px;"</span>><span>a</span><span>href</span>=<span>"javascript:void(0)"</span><span>class</span>=<span>"easyui-linkbutton c3"</span><span>style</span>=<span>"float:left;width:80px;height:26px;"</span><span>onclick</span>=<span>"unlockSubmit('{$login_name}');"</span>>提交<span><span>a</span>></span><span><span>div</span>></span><span><span>form</span>></span><span><span>div</span>></span></code>
Nach dem Login kopieren
<code>密码提交ajax处理
</code>
Nach dem Login kopieren
<code><span><span>function</span><span>unlockSubmit</span><span>(login_name)</span>
{</span><span>var</span> passwd = document.getElementById(<span>'unlock_passwd'</span>).value;
    $.ajax({
        url: localhostPaht + <span>'/Home/Operator/unlockSubmit/'</span>,
        type: <span>'POST'</span>,
        dataType: <span>'json'</span>,
        data: {
            <span>'passwd'</span>: passwd,
            <span>'login_name'</span>:login_name
        },
        success: <span><span>function</span><span>(data)</span>{</span><span>if</span>(data == <span>1</span>){                              
                $(<span>'#dlg-lock'</span>).dialog(<span>'close'</span>);                
            }
            <span>else</span><span>if</span>(data == <span>0</span>) {

            }
        },
        error: <span><span>function</span><span>()</span>{</span>
            alert(<span>"解锁出错!"</span>);                         
        }
    });     
}</code>
Nach dem Login kopieren
<code>后台处理代码
</code>
Nach dem Login kopieren
<code><span>public</span><span><span>function</span><span>unlockSubmit</span><span>()</span>{</span><span>if</span>(IS_POST){
            <span>$passwd</span> = <span>$_POST</span>[<span>'passwd'</span>];
            <span>$login_name</span> = <span>$_POST</span>[<span>'login_name'</span>];
        }   
        <span>$passwd</span> = md5(<span>$passwd</span>);       
        <span>$sql</span> = <span>"select count(*) as count from t_user where login_name='%s' and passwd='%s';"</span>;
        <span>$data</span> = M()->query(<span>$sql</span>,<span>$login_name</span>,<span>$passwd</span>);
        <span>if</span>(<span>$data</span>[<span>0</span>][<span>'count'</span>] > <span>0</span>){
            <span>$this</span>->ajaxReturn(<span>'1'</span>);
        }
        <span>else</span> {
            <span>$this</span>->ajaxReturn(<span>'0'</span>);
        }       
    }</code>
Nach dem Login kopieren
').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

以上就介绍了Easyui---模态对话框实现ESC键一键锁屏(输入密码解锁),包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage