安信娱乐谁是老板

拼图开发文档

表单样式美化

因浏览器不同,部份输入框样式存在差异或受应用场景限制,需要统一效果及优化。

默认样式

inputradiocheckboxfile不适用.input样式,因些我们需要针对性的美化,默认效果如下:

单选

安信娱乐谁是老板单选为多个选项中,只能选择其中一个。

    <div class="input-check">
      <label><input type="radio" name="radio" /><i></i> 单选1</label>
      <label><input type="radio" name="radio" checked="checked" /><i></i> 单选2</label>
      <label><input type="radio" name="radio" disabled /><i></i> 单选3(禁用)</label>
    </div>
  

内联显示

内联显示,则叠加样式.input-check-inline

    <div class="input-check input-check-inline">
      <label><input type="radio" name="radio" /><i></i> 单选1</label>
      <label><input type="radio" name="radio" checked="checked" /><i></i> 单选2</label>
      <label><input type="radio" name="radio" disabled /><i></i> 单选3(禁用)</label>
    </div>
  

复选

复选为多个选项中,可选择一个及以上选项的。

    <div class="input-check">
      <label><input type="checkbox" name="checkbox" /><i></i> 复选1</label>
      <label><input type="checkbox" name="checkbox" checked="checked" /><i></i> 复选2</label>
      <label><input type="checkbox" name="checkbox" disabled /><i></i> 复选3(禁用)</label>
    </div>
  

内联显示

内联显示,同样,叠加样式.input-check-inline

    <div class="input-check input-check-inline">
      <label><input type="checkbox" name="checkbox" /><i></i> 复选1</label>
      <label><input type="checkbox" name="checkbox" checked="checked" /><i></i> 复选2</label>
      <label><input type="checkbox" name="checkbox" disabled /><i></i> 复选3(禁用)</label>
    </div>
  

开关

开关为单个复选框勾选及未勾选时的效果。

    <form>
      <label class="input-switch"><input type="checkbox" name="switch" /><i></i> 开关</label>
      <label class="input-switch"><input type="checkbox" name="switch" checked="checked" /><i></i> 开关</label>
      <label class="input-switch"><input type="checkbox" name="switch" disabled /><i></i> 开关(禁用)</label>
    </form>
  

下拉菜单

当数量比较多的单选或复选时,使用下拉菜单选项。

    <form>
      <div class="input-select drop drop-toggle" data-form="select">
        <select class="input">
          <option value="1">下拉菜单1</option>
          <option value="2">下拉菜单2</option>
          <option value="3">下拉菜单3</option>
        </select>
        <div class="input input-text"></div>
        <div class="dropdown">
          <ul class="list-group list-box bg-white"></ul>
        </div>
      </div>
    </form>
  

验证框

密码或验证码输入分隔显示框,需要设置输入框属性data-form="verify",同时也需设置最大长度值maxlength;同时支持密码输入。

    <form>
      <div class="input-verify" data-form="verify">
        <input type="text" maxlength="6" class="input" />
        <ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
      </div>
    </form>
  

浏览文件

安信娱乐谁是老板上传文件,显示上传文件名称,同时可对上传文件的后缀、大小做验证。

浏览 ... 未选择文件
未选择文件 浏览 ...
浏览(禁用) ... 未选择文件
    <form class="demo-div">
      <div class="input-upfile">
        <a class="button border" href="javascript:;"><input type="file" data-form="upfile" data-validate='{"file":{"ext":"doc,docx","size":"<1024"},"invalid":"请上传1M以内的doc文件"}' />浏览 ...</a>
        <span>未选择文件</span>
      </div>
      <div class="input-upfile input-upfile-block">
        <span>未选择文件</span>
        <a class="button text" href="javascript:;"><input type="file" data-form="upfile" data-validate='{"file":{"ext":"doc,docx","size":"<1024"},"invalid":"请上传1M以内的doc文件"}' />浏览 ...</a>
      </div>
      <div class="input-upfile">
        <a class="button border" disabled href="javascript:;"><input type="file" />浏览(禁用) ...</a>
        <span>未选择文件</span>
      </div>
    </form>
  
提示:data-validate为表单验证属性,值为JSON格式数据,包含文件验证file及错误提示invalid;其中file包含后缀ext及文件大小size

浏览图片

上传图片,可预览图片,同时可对上传图片的后缀、大小做验证,验证方式与上传文件相同;如需改变图片框的尺寸,直接在.input-upimage安信娱乐谁是老板元素上定义尺寸大小即可。

提示
    <form>
      <div class="input-upimage">
        <a href="javascript:;">
          <input type="file" data-form="upimage" data-validate='{"file":{"ext":"jpg,jpeg,png,gif","size":"<2048"},"invalid":"请上传2M以内的图片"}' />
        </a>
        <span></span>
        <img name="image" />
      </div>
      <div class="input-upimage">
        <a href="javascript:;" disabled><input type="file" data-form="upimage" /></a>
        <span></span>
        <img name="image" />
      </div>
      <div class="input-upimage input-imgnote" style="width:150px;height:120px;">
        <a href="javascript:;"><input type="file" data-form="upimage" /></a>
        <span>提示</span>
        <img name="image" />
        <i data-dismiss="upimage"></i>
      </div>
    </form>
  
开发提示:文件浏览及图片浏览均为前端效果展示,未执行文件上传,上传需要异步或提交后端处理,建议在后端再次对文件格式及文件大小判断。
提示样式,在异步操作时,可显示上传百分比或其他信息。
在部份浏览器中,需要在input上添加accept限制文件类似属性,值为image/gif,image/jpeg等才能正常使用。