2015-11-14 44 views
2

我是Laravel的新手,我开始做下拉菜单登录菜单 但我不知道如何直接从Laravel的这个表单登录,不需要使用auth/login。非常感谢!如何从Laravel 5的下拉菜单中获取数据

这是下拉样品我尝试

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
$('.active-links').click(function() { 
 
     if ($('#signin-dropdown').is(":visible")) { 
 
      $('#signin-dropdown').hide() 
 
\t \t \t $('#session').removeClass('active'); 
 
     } else { 
 
      $('#signin-dropdown').show() 
 
\t \t \t $('#session').addClass('active'); 
 
     } 
 
\t \t return false; 
 
    }); 
 
\t $('#signin-dropdown').click(function(e) { 
 
     e.stopPropagation(); 
 
    }); 
 
    $(document).click(function() { 
 
     $('#signin-dropdown').hide(); 
 
\t \t $('#session').removeClass('active'); 
 
    }); 
 
});  
 
</script>
<style type="text/css"> 
 
* { 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
body { 
 
\t background:#fff; 
 
\t position:relative; 
 
\t font:13px Arial, Helvetica, sans-serif; 
 
} 
 

 
a { 
 
\t text-decoration:none; 
 
\t color:#00c6ff; 
 
} 
 

 
h1 { 
 
\t font: 4em normal Arial, Helvetica, sans-serif; 
 
\t padding: 20px; \t margin-top: 100px; 
 
\t text-align:center; 
 
} 
 

 
h1 small{ 
 
\t font: 0.2em normal Arial, Helvetica, sans-serif; 
 
\t text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em; 
 
\t display: block; 
 
} 
 

 
.content {width: 960px; margin: 0 auto; overflow: hidden;} 
 

 
#top-stuff { 
 
\t left:0; 
 
\t position:fixed; 
 
\t top:0; 
 
\t width:100%; 
 
\t z-index:12; 
 
} 
 

 
#top-bar-out { 
 
\t display:block; 
 
\t position:relative; 
 
\t width:100%; 
 
\t height:40px; 
 
\t background: -moz-linear-gradient(center top, #333333, #111111); 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111)); 
 
\t background: -o-linear-gradient(top, #333333, #111111); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#111111'); 
 
\t box-shadow:0 1px 2px #666666; 
 
\t -webkit-box-shadow: 0 1px 2px #666666; 
 
} 
 

 
.active-links { 
 
\t position:absolute; 
 
\t right:8px; 
 
\t top:0; 
 
} 
 
#container { 
 
    width:780px; 
 
    margin:0 auto; 
 
    position: relative; 
 
} 
 

 
#topnav { 
 
    text-align:right; 
 
} 
 

 
#session { 
 
\t cursor:pointer; 
 
\t display:inline-block; 
 
\t height:20px; 
 
\t padding:10px 12px; 
 
\t vertical-align: top; 
 
\t white-space: nowrap; 
 
} 
 

 
#session.active, #session:hover { 
 
\t background:rgba(255,255,255,0.1); 
 
\t color:fff; 
 
} 
 

 

 
a#signin-link { 
 
\t color:#bababa; 
 
\t position:relative; 
 
} 
 

 
a#signin-link em { 
 
\t font-size:10px; 
 
\t font-style:normal; 
 
\t margin-right:4px; 
 
} 
 

 
a#signin-link strong { 
 
\t color:#fff; 
 
} 
 

 
#signin-dropdown { 
 
\t background-color:#202020; 
 
\t border-bottom-left-radius:5px; 
 
\t border-bottom-right-radius:5px; 
 
\t box-shadow:0 1px 2px #666666; 
 
\t -webkit-box-shadow: 0 1px 2px #666666; 
 
\t min-height:200px; 
 
\t min-width:160px; 
 
\t position:absolute; 
 
\t right:0; 
 
\t display:none; 
 
} 
 

 
#signin-dropdown form{ 
 
\t cursor:pointer; 
 
\t padding:10px; 
 
\t text-align:left; 
 
} 
 

 
#signin-dropdown .textbox span { color:#BABABA;} 
 
#signin-dropdown .textbox input { width:200px; } 
 

 
fieldset { 
 
\t border:none; 
 
} 
 

 
form.signin .textbox label { 
 
\t display:block; 
 
\t padding-bottom:7px; 
 
} 
 

 
form.signin .textbox span { 
 
\t display:block; 
 
} 
 

 
form.signin p, form.signin span { 
 
\t color:#999; 
 
\t font-size:11px; 
 
\t line-height:18px; 
 
} 
 

 
form.signin .textbox input { 
 
\t background:#666666; 
 
\t border-bottom:1px solid #333; 
 
\t border-left:1px solid #000; 
 
\t border-right:1px solid #333; 
 
\t border-top:1px solid #000; 
 
\t color:#fff; 
 
\t -moz-border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
\t font:13px Arial, Helvetica, sans-serif; 
 
\t padding:6px 6px 4px; 
 
} 
 

 
form.signin .remb { 
 
\t padding:9px 0; 
 
\t position:relative; 
 
\t text-align:right; 
 
} 
 

 
form.signin .remb .remember { 
 
\t text-align:left; 
 
\t position:absolute; 
 
\t left:0; 
 
} 
 

 
.button { 
 
\t background: -moz-linear-gradient(center top, #f3f3f3, #dddddd); 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd)); 
 
\t background: -o-linear-gradient(top, #f3f3f3, #dddddd); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd'); 
 
\t border-color:#000; 
 
\t border-width:1px; 
 
\t -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
\t color:#333; 
 
\t cursor:pointer; 
 
\t display:inline-block; 
 
\t padding:4px 7px; 
 
\t margin:0; 
 
\t font:12px; 
 
} 
 

 
.button:hover { background:#ddd; } 
 

 
</style>
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Signin Dropdown Box with jQuery</title> 
 
</head> 
 
<body> 
 
<div id="top-stuff"> 
 
\t <div id="top-bar-out"> 
 
    \t <div id="container"> 
 
    \t <div id="topnav"> 
 
     <div class="active-links"> 
 
      <div id="session"> 
 
      <a id="signin-link" href="#"> 
 
      <em>Have an account?</em> 
 
      <strong>Sign in</strong> 
 
      </a> 
 
      </div> 
 
      \t <div id="signin-dropdown"> 
 
     \t \t <form method="post" class="signin" action="#"> 
 
       <fieldset class="textbox"> 
 
      \t <label class="username"> 
 
       <span>Username or email</span> 
 
       <input id="username" name="username" value="" type="text" autocomplete="on"> 
 
       </label> 
 
       
 
       <label class="password"> 
 
       <span>Password</span> 
 
       <input id="password" name="password" value="" type="password"> 
 
       </label> 
 
       </fieldset> 
 
       
 
       <fieldset class="remb"> 
 
       <label class="remember"> 
 
       <input type="checkbox" value="1" name="remember_me" /> 
 
       <span>Remember me</span> 
 
       </label> 
 
       <button class="submit button" type="button">Sign in</button> 
 
       </fieldset> 
 
       <p> 
 
       <a class="forgot" href="#">Forgot your password</a> 
 
       <br> 
 
       <a class="mobile" href="#">Already using Twitter via SMS?</a> 
 
       </p> 
 
       </form> 
 
      \t \t </div> 
 
     \t \t </div> 
 
       \t </div> 
 
    \t </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

+0

'下拉菜单登录'?那是什么??请稍微陈述一下。 –

+0

我的意思是它是一个下拉菜单类型,其中包含登录表单:) – Shui

+0

@Shui你的代码中有什么问题? –

回答

0

请看看你形成开放标签<form method="post" class="signin" action="#"> 在你能看到动作#其更改为提供的用户authenfication另一个URL ,如果您没有禁用CSRF保护,您还需要添加CSRF令牌。要了解如何添加它,请看看documentation

相关问题