移动端注册登录

所属分类：UI-布局

49290 394 查看评论 (13)

分享到微信朋友圈

查看演示立即下载

插件描述：基于materialize开发移动端注册登录

表单集

<div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input placeholder="占位提示" id="first_name" type="text" class="validate">
          <label for="first_name">姓名</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">爱好</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input disabled value="我不能输入" id="disabled" type="text" class="validate">
          <label for="disabled">禁用</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">密码</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">邮件</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          这是一行输入文本:
          <div class="input-field inline">
            <input id="email" type="email" class="validate">
            <label for="email" data-error="wrong" data-success="right">邮件</label>
          </div>
        </div>
      </div>
    </form>
  </div>

弹出

<!-- Modal Trigger -->
  <a class="waves-effect waves-light btn" href="#modal1">模态</a> <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>模态标题</h4>
      <p>一堆文本</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">同意</a>
    </div>
  </div>
  //jQuery 插件初始化使用触发器开启模态:
  $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal').modal();
  });

你也可以通过程序打开模态，下面的代码将使你模态打开。