ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

WeUI——CheckBox表单复选框

2020-10-23 11:02:25  阅读:451  来源: 互联网

标签:toast CheckBox min weui JS WeUI https 复选框 js


前端:

文章来源:https://weui.io/#form_checkbox

CSS、JS下载地址:

  weui.css:https://blog-static.cnblogs.com/files/ZM191018/weui.css

  weui.min.js:https://blog-static.cnblogs.com/files/ZM191018/weui.min.js

  weui.min.js:https://blog-static.cnblogs.com/files/ZM191018/weui.min.js

引入CSS样式、JS脚本文件

要注意:在引用路径下必须找得到对应的CSS样式文件或者JS脚本文件,否则会异常。

<link rel="stylesheet" href="\js\weui\weui.css">
<script src="\js\weui\jquery.min.js"></script>
<script src="\js\weui\weui.min.js"></script>

HTML代码

<div class="page">
  <div class="weui-form">
    <div class="weui-form__text-area">
      <h2 class="weui-form__title">复选框样式展示</h2>
    </div>
    <div class="weui-form__control-area">
      <div class="weui-cells__group weui-cells__group_form">
        <div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-cell_active weui-check__label" for="s11">
                <div class="weui-cell__hd">
                    <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/>
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>standard is dealt for u.</p>
                </div>
            </label>
            <label class="weui-cell weui-cell_active weui-check__label" for="s12">
                <div class="weui-cell__hd">
                    <input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>standard is dealicient for u.</p>
                </div>
            </label>
            <a href="javascript:" class="weui-cell weui-cell_active weui-cell_link">
                <div class="weui-cell__bd">添加更多</div>
            </a>
        </div>
      </div>
    </div>
    <div class="weui-form__opr-area">
      <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">下一步</a>
    </div>
    <div class="weui-form__tips-area">
      <p class="weui-form__tips">
        点击下一步即表示<a href="javascript:">同意用户协议</a>
      </p>
    </div>
  </div>
  <div id="js_toast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
          <p class="weui-toast__content">已完成</p>
      </div>
  </div>
</div>

 

JS事件

<script type="text/javascript">
    $(function(){
        var $tooltips = $('.js_tooltips');
      var $toast = $('#js_toast');

        $('#showTooltips').on('click', function(){
            // toptips的fixed, 如果有`animation`, `position: fixed`不生效
            $('.page.cell').removeClass('slideIn');

            $toast.fadeIn(100);
            setTimeout(function () {
              $toast.fadeOut(100);
            }, 2000);
        });
    });
</script>

 

 

演示

 

标签:toast,CheckBox,min,weui,JS,WeUI,https,复选框,js
来源: https://www.cnblogs.com/ZM191018/p/13862954.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有