لقد قمت مؤخرًا بإنشاء مشروع تتضمن متطلبات المشروع التحكم في الوصول. عند الوصول إلى الصفحات أو الوظائف التي تتطلب استخدام تسجيل الدخول ، سيظهر مربع تسجيل الدخول:
الآثار هي كما يلي:
الشكل 1 - عند النقر على اسم المستخدم ، إذا لم يتم تسجيل الدخول ، فإن مربع تسجيل الدخول سيظهر
وصف مفصل لهذه الوظيفة:
عندما لا يتم إشراك تسجيل الدخول ، يتم إخفاء مربع تسجيل الدخول
عند تسجيل الدخول ، يظهر مربع تسجيل الدخول إلى الزاوية اليسرى العلوية من الصفحة
مربع تسجيل الدخول مخفي بعد أن ينجح تسجيل الدخول
أفكار التنفيذ:
أدخل Div المسجلة قبل علامة نهاية الجسم ، على افتراض أن طريقة تحديد موقعها مطلقة ، وموقفه في الزاوية اليسرى العليا.
خاصية العرض الافتراضية لمربع تسجيل الدخول هي لا شيء. عندما يتم تشغيل تسجيل الدخول ، قم بتغيير العقار إلى حظر
مرفق مع نموذج رمز:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> العنوان </title> </head> <style> h3 {width: 100 ٪ ؛ padding-bottom: 10px ؛ border-bottom: 2px solid #cc ؛ span {padding: 3px 10px ؛ خلفية اللون: #999 ؛ حجم الخط: 20px ؛ اللون: أبيض ؛ المؤشر: مؤشر ؛} #log {display: none ؛ العرض: 400 بكسل ؛ الارتفاع: 400 بكسل ؛ الحشو: 30px 40px ؛ لون الخلفية: #f3f5f6 ؛ الموقف: ثابت ؛ أعلى: 70 بكسل ؛؛ اليمين: 30px ؛} .error {float: يمين ؛ اللون: أحمر ؛ الحجم: 1.2EM ؛ الهامش-رايت: 10px} </style> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src =" // cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><boudebody> OnClick = "document.getElementById ('log'). style.display = 'block'"> popin up up </utton> <div id = "log"> <form action = "../ control/logIncheck.php" </post "> <h3> الرجاء تسجيل الدخول </h3> <div> type = "text" name = "username" id = "username" placeholder = "username" onblur = 'checkName ()' is in influd/> </viv> <div> <label for = "password"> password*</label> <span id = "psword"> </spans> <passion type = "password" = "password". </viv> <viv> <label> <span> <input type = "checkbox" value = 'true'> تذكرني </span> </billy> </div> <input type = "إرسال" value = "login"/> <p> <a href = "register.html" >>> لا تملك حساب حتى الآن؟ انتقل إلى التسجيل </a> </p> </form> <div id = "close"> <span onClick = "document.getElementById ('log'). style.display = 'none'"> elut </span> </viv> </viv> <script> var checkName = function () {document.getElementByid ("user"). var name = eval (document.getElementById ('username')). القيمة ؛ if (name.length> 20 || name.length <1) document.getElementById ("user"). innerhtml = "طول المستخدم بين 1-20!" ؛ } var checkpassword = function () {document.getElementById ("psword"). innerhtml = "" ؛ var name = eval (document.getElementById ('password')). value ؛ if (name.length> 12 || name.length <6) document.getElementById ("psword"). innerhtml = "طول كلمة المرور بين 6-12!" ؛ } </script> </body> </html>طريقة لتنفيذ التحقق والمطالبة بالكامل مع AngularJS:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <h2> ng-controller = "validatectrl" name = "myform" novalidate> <p> اسم المستخدم: <br> <input type = "text" name = "user" ng-model = "user" مطلوب> <span style = "color: red" ng-show = "myform.user. $ dirty && myform.user. $ غير صالح. اسم المستخدم مطلوب. </span> </span> </p> <p> البريد الإلكتروني: <br> <input type = "email" name = "البريد الإلكتروني" ng-model = "البريد الإلكتروني" المطلوبة> <span style = "color: red" ng-show = "myform.email. $ dirty && myform.email. $ invalid"> <span ng-show = "myform.email. </span> <span ng-show = "myform.email. $ error.email"> عنوان بريد إلكتروني غير قانوني. </span> </span> </p> <p> <propt type = "submit" ng-disabled = "myform.user. $ dirty && myform.user. $ invalid دالة ($ scope) {$ scope.user = 'Enter Username' ؛ما ورد أعلاه هو مثال رمز تسجيل دخول bootstrap المنبثقة مع الشيك الشرعي [الموصى به] المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!