1 기능
?? ESC
키를 누르면 모달 대화 상자가 실행되어 대화 상자 이외의 인터페이스는 동작하지 않게 되어 직원이 나갈 때, 다른 사람이 페이지를 조작하는 것을 방지하고, 잠금 화면은 본인의 비밀번호를 통해서만 잠금 해제할 수 있습니다.
2 함수 구현
?? jQuery의 키 해제 감지 이벤트 keyup()을 통해 ESC
을 눌렀다 떼면 이 동작이 발생합니다. 이벤트는 이벤트의 실행 함수 keyup()을 시작합니다. 이 함수에서는 모달 대화 상자를 호출하고 화면을 잠급니다.
??화면을 잠근 후 비밀번호를 입력하고 모달 대화 상자에 제출하면 입력 내용이 ajax에 의해 판단됩니다. 비밀번호가 올바르면 모달 대화 상자가 닫힙니다. 아무런 조치도 취하지 않습니다.
<code>keyup事件运行函数 </code>
<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>
<code>模态对话框 </code>
<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>
<code>密码提交ajax处理 </code>
<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>
<code>后台处理代码 </code>
<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>
위 내용은 관련 내용을 포함하여 ESC 키(잠금 해제하려면 비밀번호 입력)를 사용하여 원클릭 잠금 화면을 실현하는 Easyui---모달 대화 상자를 소개합니다. PHP 튜토리얼에 관심이 있는 친구에게 도움이 되기를 바랍니다.