Question

我正在尝试使用Semantic UI框架为网站创建一个下拉登录表单，并且无法确定是否有更好的方法来制作它。目前，表单位于菜单上的项目中，因此当您单击它时，下拉菜单将消失。这是我现在的代码：

     <div class="ui dropdown">Login
      <div class="dropdown menu">
        <div class="item">
          <form class="ui form">
            <div class="ui stacked segment">
              <div class="ui one column middle aligned very relaxed stackable grid">
                <div class="column">
                  <div class="ui form">
                    <div class="field">
                      <label>Username</label>
                      <div class="ui left icon input">
                        <input placeholder="Username" type="text">
                        <i class="icon-user-tie icon"></i>
                      </div>
                    </div>
                    <div class="field">
                      <label>Password</label>
                      <div class="ui left icon input">
                  <input placeholder="Password" type="password">
                  <i class="icon-lock icon"></i>
                </div>
              </div>
              <div class="ui blue submit button">Login</div>
            </div>
          </div>
        </div>
      </div>

          </form>
        </div>
      </div>
    </div>

是否有另一种方法可以将表单添加到下拉列表而不将其作为下拉菜单中的实际项目？谢谢！

Answer 1

我遇到了同样的问题......这是我的解决方案

<div class="ui teal buttons">
    <div class="ui button">Login</div>
    <div class="ui floating dropdown icon button">
        <i class="dropdown icon"></i>

        <div id="login-form" class="menu">
            <div class="ui basic segment">
                <form class="ui form">
                    <div class="field">
                        <input type="text" name="username" placeholder="Username">
                    </div>
                    <div class="field">
                        <input type="password" name="password" placeholder="Password">
                    </div>
                    <div class="item fluid">
                        <button class="ui fluid button" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

然后我将登录表单设置为宽度为300px，否则它与输入的宽度相匹配。

Answer 2

遇到同样的问题。感谢@ MA206，我对他的解决方案做了一些改进。

我认为关键是菜单必须有商品，而且表单不应该是商品。所以我认为使用另一个虚拟项目可能有所帮助。

<div class="item"></div>

尽管如此，要实现完美的下拉登录表单，还有一些其他问题。似乎没有预期的响应性显示。我不知道如何解决这个问题。

这是我的解决方案：

＆＃13;

$(function() {
  $('.ui.dropdown').dropdown();
  $('form#signIn').form({
    fields: {
      userID: {
        identifier: 'userID',
        rules: [{
          type: 'empty',
          prompt: 'Please enter your username.'
        }, {
          type: 'regExp',
          value: /^[a-z0-9\_]+$/i,
          prompt: `You must only use 'a'-'z','A'-'Z','0'-'9','_'
for your username.`
        }]
      },
      password: {
        identifier: 'password',
        rules: [{
          type: 'minLength[6]',
          prompt: 'Your password must be at least 6 characters.'
        }, {
          type: 'regExp',
          value: /^[a-z0-9\_\@\.]+$/i,
          prompt: `You must only use 'a'-'z','A'-'Z','0'-'9','_','@','.'
for your password.`
        }]
      }
    }
  });
  $('form#signIn input').keydown(function(e) {
    if (e.which == 13) {
      $('form#signIn').submit();
      return false;
    }
  });
});

＆＃13;

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
</head>

<body>
  <div class="ui top fixed borderless compact massive stackable menu" style="display: flex">
    <div class="ui container">
      <div class="ui search white disabled fluid item" style="flex-grow:1;">
        <div class="ui transparent icon input">
          <input class="prompt" type="text" placeholder="Search books...">
          <i class="search link icon"></i>
        </div>
        <div class="results"></div>
      </div>

      <div class="right menu">
        <div class="ui dropdown item">
          <div>
            <i class="sign in icon"></i>
            <span class="text">Sign in</span>
          </div>

          <div class="menu">
            <form id="signIn" class="ui form" action="/signIn" method="post">
              <div class="ui stacked segment">
                <div class="field">
                  <div class="ui left icon input">
                    <i class="user icon"></i>
                    <input type="text" name="userID" placeholder="Username" maxlength="16">
                  </div>
                </div>

                <div class="field">
                  <div class="ui left icon input">
                    <i class="lock icon"></i>
                    <input type="password" name="password" placeholder="Password" maxlength="24">
                  </div>
                </div>

                <div class="ui fluid submit button">Sign in</div>

                <div class="ui error message"></div>
              </div>
            </form>

            <span class="item"></span>
          </div>
        </div>

        <a class="item">
          <i class="user plus icon"></i>
          <span class="text">Sign up</span>
        </a>
      </div>
    </div>
  </div>
</body>

＆＃13;

语义UI下拉登录表单

2 个答案: