个人中心
gpt4 book ai didi

jquery - Bootstrap 3.0 的 DropDown 登录表单

转载 作者：行者123 更新时间：2023-11-28 01:49:45 25 4
gpt4 key购买 nike

我不确定这是否适用于 3.0，但我正在关注的是:http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/

我在 rails 4.0 上使用 ruby​​，这段代码来 self 的 View /布局/_header 文件

<header class = "navbar  navbar-fixed-top navbar-inverse ">
  <div class = "navbar-inner">
  <div class = "container">
<%= link_to "InYourShoes" , '#', id: "logo" %>
<nav>
 <ul class = "nav navbar-nav navbar-right">
   <li><%= link_to "Home", '#'%></li>
   <li><%= link_to "Help", '#'%></li>
   <li><%= link_to "Sign up", '#'%></li>
   <li class = "dropdown">
    <a class = "dropdown-toggle" href = "#" data-toggle = "dropdown"> Sign In<strong class "caret"></strong></a>
    <div class="dropdown-menu" style = "padding: 15px; padding-bottom: 0px;">
     <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
        <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
        <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
        <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
        <label class="string optional" for="user_remember_me"> Remember me</label>
        <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
       </form>
      </div>
      </li>
     </ul>
     </nav>
     </div>
    </div>
   </header>

在浏览解决方案后，我发现了一篇与此相关的旧帖子，但我不知道这两行代码在哪里:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

和

  <script>
 $(document).ready(function()
 {
   //Handles menu drop down`enter code here`
   $('.dropdown-menu').find('form').click(function (e) {
    e.stopPropagation();
    });
  });
  </script>

这是我的第一个网站，非常感谢您的帮助。我知道 Rails 有 coffescript，但我还没有找到使用它的教程。谢谢!

最佳答案

在您的 application.html.erb 文件中，您可以将脚本元素放在 head 中。

<head>
<title>.....</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script>
 $(document).ready(function()
 {
   //Handles menu drop down`enter code here`
   $('.dropdown-menu').find('form').click(function (e) {
    e.stopPropagation();
    });
  });
  </script>
</head>

不过javascript一般都是写在app/assets/javascript目录下，然后在application.html.erb文件的head标签中引入这段代码<%= stylesheet_link_tag "application", :media => "all"%> .

编辑:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

我尝试使用这两个 js 文件，它们对我有用，来自 google 的 jquery 和来自 Bootstrap CDN 的整个 bootstrap javascript 文件.

要让“InYourShoes”在左侧对齐，您可以使用 :class => "navbar-brand"。

<%= link_to "InYourShoes" , '#', id: "logo", :class => "navbar-brand" %>

关于jquery - Bootstrap 3.0 的 DropDown 登录表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20759153/

25 4 0
文章推荐： 用于事件处理的 JavaScript 库出现奇怪的 'undefined' 错误
文章推荐： javascript - 如何使用 jquery 有效地搜索具有中间有索引的名称属性的输入？
文章推荐： javascript - 从 angularjs Controller 访问外部 JavaScript 函数和类
文章推荐： c++ - 从项目 VS 2015/2017 中删除 math.h
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com