jQuery WeUI学习笔记二

其他 2018-07-24 05:10:31 阅读次数: 0

三  扩展组件

1  滚动加载

当用户滚动到页面底部的时候加载更多内容。首先你需要把一段显示加载状态的代码放入需要滚动加载的容器中，这里我们默认是 document.body，加载指示器的代码如下：

<div class="weui-loadmore">
  <i class="weui-loading"></i>
  <span class="weui-loadmore__tips">正在加载</span>
</div>

然后调用JS初始化滚动加载插件：

$(document.body).infinite();

从 v0.4.0 版本开始，可以在任何div内初始化滚动加载组件，并且一个页面内可以初始化多个。

参数

infinite 方法接收一个 distance 参数：

$(document.body).infinite(100);

默认的 distance 值是 50，表示滚动到距离底部 50 px 的时候会触发加载.

事件

当用户滚动到页面底部的时候，会在 body 上触发 infinite 事件。监听此事件即可:

  $(".infinite").infinite().on("infinite", function() {
        var self = this;
        if(self.loading) return;
        console.log(self)
        self.loading = true;
        console.log(self);
        setTimeout(function() {
          $(self).find(".content-padded").append("<p>我是加载的新内容。我是加载的新内容。。。我是加载的新内容。。。我是加载的新内容。。。我是加载的新内容。。。我是加载的新内容。。。我是加载的新内容。。。我是加载的新内容。。。我是加载的新内容。。。。。</p>");
          self.loading = false;
        }, 2000);   //模拟延迟
      });
注意一点，因为插件并不知道你是否正在加载，所以只要滚动到距离底部 50px 以内都会触发事件。因此 infinite 事件可能会触发多次。需要自己来控制不要同时进行多个加载。可以参考上面的代码通过一个 loading 标记位来控制。

销毁

如果你不需要滚动加载了，比如已经加载完了所有内容，调用 $(document.body).destroyInfinite() 可以销毁插件。之后你可以再次调用 $(document.body).infinite() 来重新初始化.

不过即使销毁插件，也不会把加载指示器的HTML代码删除，所以你需要自己来隐藏或者删除它。

滚动加载结合TAB

同样可以在每一个 .weui-tab__bd-item 都初始化一个独立的滚动加载：

 <div class="weui-tab">
      <div class="weui-navbar">
        <div class="weui-navbar__item weui-navbar__item--on" href="#tab1">
          选项一
        </div>
        <div class="weui-navbar__item" href="#tab2">
          选项二
        </div>
        <div class="weui-navbar__item" href="#tab3">
          选项三
        </div>
      </div>
      <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active infinite">
          <h1 class="doc-head">页面一</h1>
          <div class="content-padded">
            <p>jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.</p>
            <p>jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.</p>
            <p>jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
          </div>
          <div class="weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
          </div>
        </div>
        <div id="tab2" class="weui-tab__bd-item infinite">
          <h1 class="doc-head">页面二</h1>
          <div class="content-padded">
            <p>A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.</p>
            <p>A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.</p>
            <p>A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.</p>
            <p>A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
          </div>
          <div class="weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
          </div>
        </div>
        <div id="tab3" class="weui-tab__bd-item infinite">
          <div class="content-padded">
            <h1 class="doc-head">页面三</h1>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
            <p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
          </div>
          <div class="weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
          </div>
        </div>
      </div>
    </div>

2  select

Select 是一种支持单选或者多选的弹出层，它可以用来代替原生的 select 元素提供更好更一致的用户体验。Select 是一个JS组件，只能通过JS方法来调用.

简单用法

基本用法如下：

$("#job").select({
  title: "选择职业",
  items: ["法官", "医生", "猎人", "学生", "记者", "其他"]
});

设置不同的显示值和实际值

Select 可以设置不用的显示值和实际值，很多时候显示给用户看的字符串和实际提交值是不同的，比如：

$("#mobile").select({
  title: "选择手机",
  items: [
    {
      title: "iPhone 3GS",
      value: "001",
    },
    {
      title: "iPhone 5",
      value: "002",
    },
    {
      title: "iPhone 5S",
      value: "003",
    },
    {
      title: "iPhone 6",
      value: "004",
    },
    {
      title: "iPhone 6S",
      value: "005",
    },
    {
      title: "iPhone 6P",
      value: "006",
    },
    {
      title: "iPhone 6SP",
      value: "007",
    },
    {
      title: "iPhone SE",
      value: "008",
    },
    {
      title: "iPhone 7",
      value: "009"
    }
  ]
});

当设置了不同的显示值和实际值时请注意，这个时候 input 的 value 依然是显示值，而实际值存储在 data-values 属性中。如果你设置了初始值，请保证同时设置了 value 和 data-values 两个值。

多选

增加一个 multi: true 参数，就可以设置为多选:

$("#in").select({
  title: "您的爱好",
  multi: true,
  items: [
    { title: "画画",
      value: 1
    },
    {title: "打球",
      value: 2
    },
    {title: "唱歌",
      value: 3
    },
    {title: "游泳",
      value: 4
    },
  ]
});

默认配置

Select 的默认配置是 $.fn.select.prototype.defaults:

参数名 默认值 说明
input undefined 输入框的初始值，如果设置了这个值，那么他会覆盖 input 本身的 value 值。 从 V0.7.0 开始支持此配置。
autoClose true 自动关闭，只有在单选模式下才可用，选择完成之后自动关闭弹窗
closeText "关闭" 关闭按钮的文案
multi false 是否多选
max undefined 多选模式下，最多可选个数, V0.7.2
min undefined 多选模式下，最少可选个数, V0.7.2
split "," 分隔符
title "请选择" 弹窗的标题
onChange undefined 用户选择之后的回调，注意从 V0.6.1 版本之后才支持。你也可以在 input 上监听 `change` 事件。
onOpen undefined 弹层打开之后执行此回调函数。 V0.7.0 开始支持此配置
onClose undefined 弹层关闭之后执行此回调函数。 V0.7.0 开始支持此配置
beforeClose undefined 弹层关闭之前执行此回调函数，如果返回 false 则可以阻止关闭。 V0.7.2

你可以直接修改默认配置，但是建议通过 $().select(config) 的方式来配置。

方法

通过 $(xxx).select("method", args) 方式可以调用 已经初始化完成 的select组件的方法。

全部可用方法如下:

方法名 示例 说明
update $("input").select("update", { items: ["法官", "猎人", ...] }) 动态更新配置，传入的参数是一个 config 对象，初始化时候设定的任何参数都可以通过这种方式进行修改。
open $("input").select("open") 打开弹层
close $("input").select("close") 关闭弹层

再次强调一点，必须是通过 $(input).select(config) 初始化之后才能调用对应的方法，否则请先初始化。

3  picker

是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一

picker 需要初始化才能使用，你可以在一个 input 元素上初始化picker，当用户点击input的时候会弹出picker的弹层

picker 会自动读取 input 的value作为初始值。对于有多个cols的情况，可能初始值无法正确解析，因为picker并不知道该如何进行分割。默认的规则是：多列模式下，会把input中的值以空格分隔作为每一列的值。如果你有多列并且不是以空格分隔的，那么你需要自己通过参数传入这个初始值，而不能通过 input 元素的 value属性设置。

示例如下：html片段如下：

<div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">称呼</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="name" type="text" value="">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date" class="weui-label">手机</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="mobile" type="text" value="">
        </div>
      </div>

为id="name"的div元素绑定picker事件（有两列）

 $("#name").picker({
        title: "怎么称呼您？",
        cols: [
          {
            textAlign: 'center',
            values: ['Mr', 'Ms']
          },
          {
            textAlign: 'center',
            values: ['Amy', 'Bob', 'Cat', 'Dog', 'Ella', 'Fox', 'Google']
          }
        ]
      });

运行结果如下：

为id=”mobile“的div元素绑定picker事件

 $("#mobile").picker({
        title: "请选择您的手机",
        cols: [
          {
            textAlign: 'center',
            values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
          }
        ],
        onChange: function(p, v, dv) {
          console.log(p, v, dv);
        },
        onClose: function(p, v, d) {
          console.log("close");
        }
      });

运行结果如下：

内联模式

从 V0.8.0 版本开始，可以使用内联模式，只需要在初始化的时候指定一个 container 参数即可，picker会自动在这个容器中初始化。时间日期选择器以及地址选择器等因为继承自 picker，因此也都支持完全相同的内联模式。

$.picker({
  input: '#input',
  container: '#container'
})

注意，内联模式只是指定了容器，因此 input 参数还是必须的，而且强烈建议通过 input 来获取用户输入的值。如果你不希望显示一个输入框，可以把它设置成 type="hidden"。

示例如下：

 <div class="weui-cell">
        <div class="weui-cell__hd"><label for="inline" class="weui-label">内联显示</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="inline" type="text" value="">
        </div>
 </div> 
<div id="picker-container"></div>
 $("#inline").picker({
        container: '#picker-container',
        cols: [
          {
            textAlign: 'center',
            values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
          }
        ],
        onChange: function(p, v, dv) {
          console.log(p, v, dv);
        },
        onClose: function(p, v, d) {
          console.log("close");
        }
      });

 4  日历

日历组件用来选择年月日，可以代替系统原生的日历组件，提供更统一的视觉和交互以及更好的兼容性。

日历组件需要初始化才能使用，最简单的方式是通过一下JS代码来初始化，绑定到一个input元素上：

$("#my-input").calendar();
当你点击input元素后，会自动弹出一个JS生成的日历组件。当用户选择日期之后，input的值会被设置为用户选择的日期。

如果你不想写js，可以通过以下方式来自动初始化：

<input type="text" data-toggle='date' />

内联日历

在初始化 Calendar 的时候可以通过 container 参数来指定一个容器，如果把这个容器指定为页面上的一个元素，那么日历就会默认显示出来。

$("#inline-calendar").calendar({
  container: "#inline-calendar",
  input: "#date3"
});
如果你在内联日历的时候，不希望有一个 input 会显示用户的输入值，那么只需要指定一个 type="hidden" 的input即可。

示例代码如下:

<div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date" class="weui-label">日期</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="date" type="text">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date2" class="weui-label">中文</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="date2" type="text" value="">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date-multiple" class="weui-label">多选</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="date-multiple" type="text" value="">
        </div>
      </div>
    </div>

    <div class="demos-header">
      <h2 class="demos-second-title">内联日历</h2>
    </div>

    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date3" class="weui-label">日期</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="date3" type="text">
        </div>
      </div>
    </div>
    <div id="inline-calendar"></div>
默认日历显示： 
$("#date").calendar({
        onChange: function (p, values, displayValues) {
          console.log(values, displayValues);
        }
      });
运行结果如下：


自定义日历：

$("#date2").calendar({
        value: ['2016-12-12'],
        dateFormat: 'yyyy年mm月dd日'  // 自定义格式的时候，不能通过 input 的value属性赋值 '2016年12月12日' 来定义初始值，这样会导致无法解析初始值而报错。只能通过js中设置 value 的形式来赋值，并且需要按标准形式赋值（yyyy-mm-dd 或者时间戳)
      });

运行结果如下：


日期多选：只需设置multiple参数为true即可

$("#date-multiple").calendar({
        multiple: true,
        onChange: function (p, values, displayValues) {
          console.log(values, displayValues);
        }
      });

运行结果如下：


内联日历显示：

 $("#date3").calendar({
        container: "#inline-calendar"
      });
运行结果如下：



5  日期时间选择器

日期时间选择器是一个定制的picker，因此他的用法和picker完全一致。

注意，从 V0.8.0 版本开始，在日期时间选择器中几乎可以配置任何 picker 中的配置，包括 onChange, title 等

datetime-picker 会自动解析 input 的 value 作为初始值，但是要注意初始值的格式一定要和自己定义的格式相同，不然会出现弹窗中的值和input初始值不相同的情况（因为无法解析）

<input type="text" id='datetime-picker'/>
<script>
  $("#datetime-picker").datetimePicker();
</script>

除了 `Picker` 的所有参数外， 日期时间选择器还有自己的如下参数可用:

如果你只想选择年月日，建议使用 日历。

示例代码如下：

<div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time" class="weui-label">默认配置</label></div>
        <div class="weui-cell__bd"> <input class="weui-input" id="time" type="text" value=""></div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time2" class="weui-label">无分钟</label></div>
        <div class="weui-cell__bd"> <input class="weui-input" id="time2" type="text" value="2012-12-12 12时"></div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time3" class="weui-label">上午下午</label></div>
        <div class="weui-cell__bd"> <input class="weui-input" id="time3" type="text"></div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time4" class="weui-label">定制时间</label></div>
        <div class="weui-cell__bd"><input class="weui-input" id="time4" type="text" value="2012-12-12 上午8点"> </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time-format" class="weui-label">自定义格式</label></div>
        <div class="weui-cell__bd"> <input class="weui-input" id="time-format" type="text" value="2012年12月12日 12时13分"></div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time-format" class="weui-label">限制年月</label></div>
        <div class="weui-cell__bd"> <input class="weui-input" id="years-monthes" type="text" value="2017-06-20 12:00"> </div>
      </div>
    </div>

    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="time-inline" class="weui-label">内联显示</label></div>
        <div class="weui-cell__bd"><input class="weui-input" id="time-inline" type="text" value=""></div>
      </div>
    </div>
<div id="time-container"></div>

默认时间日期显示:

 $("#time").datetimePicker({
        title: '出发时间',
        min: "1990-12-12",
        max: "2022-12-12 12:12",
        onChange: function (picker, values, displayValues) {
          console.log(values);
        }
      });

注意，上述max参数用到了12:12，经测试证明，时间可以是2022-12-12 12：46，可知，max参数的时间设置无效。

运行结果如下：


上午下午的时间日期显示：

$("#time3").datetimePicker({
        times: function () {
          return [
            {
              values: ['上午', '下午']
            }
          ];
        },
        value: '2012-12-12 上午',
        onChange: function (picker, values, displayValues) {
          console.log(values);
        }
      });

运行结果如下：


限制年月显示：

 $("#years-monthes").datetimePicker({
        title: '限定年月',
        years: [2017, 2018],
        monthes: ['06', '07'],
        onChange: function (picker, values, displayValues) {
          console.log(values);
        }
      });
运行结果如下：

内联显示：

$("#time-inline").datetimePicker({
        container: '#time-container',
        onChange: function (picker, values, displayValues) {
          console.log(values);
        }
      })

6  地址选择器

地址选择器需要引入额外的JS文件：

<script type="text/javascript" src="js/city-picker.js" charset="utf-8"></script>

地址选择器是一个定制的 picker，所以其用法和 Picker 是一样的。

从 v0.8.1+ 版本开始，可以设置除了 cols 和 cssClass 之外的全部picker中的参数。

<input type="text" id='city-picker'/>
<script>
  $("#city-picker").cityPicker({
    title: "请选择收货地址"
  });
</script>

input 的 value 属性可以设置默认值，以空格分割。

<input type="text" id='city-picker' value="浙江 杭州 拱墅区" />
参数

除了 `Picker` 的全部参数可用之外，`city-picker` 还有如下参数可以配置:

参数名 默认值 说明
showDistrict true 是否显示地区

比如如下设置可以不显示地区（只选择省市):

//禁用地区选择
$("#city-picker").cityPicker({
  showDistrict: false
});

你可以通过 $.fn.cityPicker.prototype.defaults 来改变默认值。

示例代码如下：

 <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">发出地</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="start" type="text" value="湖北省 武汉市 武昌区">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date" class="weui-label">目的地</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="end" type="text" value="">
        </div>
      </div>
    </div>

    <h2 class="demos-second-title">只选择城市</h2>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="home-city" class="weui-label">城市</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="home-city" type="text">
        </div>
      </div>
    </div>

默认地址选择器显示：

 $("#start").cityPicker({
        title: "选择出发地",
        onChange: function (picker, values, displayValues) {
          console.log(values, displayValues);
        }
      });
      $("#end").cityPicker({
        title: "选择目的地"
      });

运行结果如下：



不显示地区：只需给showDistrict设置为false.

$("#home-city").cityPicker({
        title: "选择目的地",
        showDistrict: false,
        onChange: function (picker, values, displayValues) {
          console.log(values, displayValues);
        }
      });
运行结果如下：



7 通知

模仿iOS风格的通知。你可以自定义标题，文案和图标。通过滑动手势可以关闭。

使用JS来打开和关闭通知:

  
$.notification({
  title: "Baby",
  text: "I miss you",
  media: "<img src='...'>",
  data: "123",
  onClick: function(data) {
    $.alert("Click" + data);
  },
  onClose: function(data) {
    $.alert("Close "+data);
  }
});

//close notification
$.closeNotification();

示例代码如下：

<div class='demos-content-padded'>
      <a href="javascript:;" id='show-notification' class="weui-btn weui-btn_primary">显示通知</a>
    </div>
 $(document).on("click", "#show-notification", function() {
        $.noti({
          title: "中奖啦！",
          text: "点击领取腾讯撸啊撸杯二等奖！",
          media: "<img src='./images/present.png' />",
          data: {
            message: "逗你玩的!"
          },
          time: 3000,
          onClick: function(data) {
            $.alert(data.message);
          }
        });
      });
点击按钮，顶部出现通知框，点击通知框，会出现alert（）弹出框，弹出框内容为data.message 运行结果如下：


8  Popup

Popup 是一个覆盖式的弹出层，可以完全盖住当前页面。

模板：

<div id="" class="weui-popup__container">
  <div class="weui-popup__overlay"></div>
  <div class="weui-popup__modal">
    你的内容放在这里...
  </div>
</div>

设置一个链接，当点击的时候就会打开这个模板:

<a href="javascript:;" class="open-popup" data-target="">About</a>

其中 class='open-popup' 和 data-target="" 两个属性不可缺少，前者表示点击链接需要打开一个 popup，后者是这个popup的选择器。当然，你也可以通过调用 JS 方法来打开一个 popup：

$("#about").popup();
非全屏模式

在容器上增加一个类 popup-bottom 即可：

<div id="" class="weui-popup__container popup-bottom">
  <div class="weui-popup__overlay"></div>
  <div class="weui-popup__modal">
    你的内容放在这里...
  </div>
</div>
关闭 Popup

给任何链接加上 class='close-popup' 则点击之后可以关闭当前打开的 popup. 你也可以通过 $.closePopup() 来关闭。

注意，从 V0.8.0 版本开始，才可以可以加入 .weui-popup-overlay 这个半透明遮罩层。

代码示例如下：

<div class='demos-content-padded'>
      <a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#full">显示全屏(默认)Popup</a>
      <a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#half">显示底部的Popup</a>
    </div>

    <div id="full" class='weui-popup__container'>
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <header class='demos-header'>
          <h2 class="demos-second-title">关于 jQuery WeUI</h2>
          <p class="demos-sub-title">By 言川 @2016/03/30</p>
        </header>
        <article class="weui-article">
          <h1>大标题</h1>
          <section>
            <h2 class="title">章标题</h2>
            <section>
              <h3>1.1 节标题</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
              </p>
              <p>
                <img src="./images/pic_article.png" alt="">
                <img src="./images/pic_article.png" alt="">
              </p>
            </section>
            <section>
              <h3>1.2 节标题</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </section>
          </section>
        </article>
        <a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>
      </div>
    </div>

    <div id="half" class='weui-popup__container popup-bottom'>
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="toolbar">
          <div class="toolbar-inner">
            <a href="javascript:;" class="picker-button close-popup">关闭</a>
            <h1 class="title">标题</h1>
          </div>
        </div>
        <div class="modal-content">
          <div class="weui-grids">
            <a href="javascript:;" class="weui-grid js_grid" data-id="dialog">
              <div class="weui-grid__icon">
                <img src="images/icon_nav_dialog.png" alt="">
              </div>
              <p class="weui-grid__label">
                发布
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid" data-id="progress">
              <div class="weui-grid__icon">
                <img src="images/icon_nav_progress.png" alt="">
              </div>
              <p class="weui-grid__label">
                编辑
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid" data-id="msg">
              <div class="weui-grid__icon">
                <img src="images/icon_nav_msg.png" alt="">
              </div>
              <p class="weui-grid__label">
                保存
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid" data-id="dialog">
              <div class="weui-grid__icon">
                <img src="images/icon_nav_dialog.png" alt="">
              </div>
              <p class="weui-grid__label">
                发布
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid" data-id="progress">
              <div class="weui-grid__icon">
                <img src="images/icon_nav_progress.png" alt="">
              </div>
              <p class="weui-grid__label">
                编辑
              </p>
            </a>
            <a href="javascript:;" class="weui-grid js_grid" data-id="msg">
              <div class="weui-grid__icon">
                <img src="images/icon_nav_msg.png" alt="">
              </div>
              <p class="weui-grid__label">
                保存
              </p>
            </a>
          </div>
        </div>
      </div>
    </div>
运行结果如下：

全屏模式遮罩层：


非全屏模式：

运行结果如下：


9  fastclick

iOS 系统下默认的 click 事件会有300毫秒的延迟，这个延迟是iOS系统的特性而不是jQuery WeUI设定的，可以使用 fastclick 来消除这个延迟。

jQuery WeUI 是不包含 fastclick 的，你只需要按照标准的用法引用并初始化即可，可以参考以下代码：

<script src="../lib/fastclick.js"></script>
<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>
注意，从 V0.8.1 开始支持 fastclick，在以前版本引入会导致个别组件出现无法点击的情况。

猜你喜欢

转载自blog.csdn.net/runner_123/article/details/80034015
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022