Flat UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap实现。这套界面工具包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块,导航元素等等。
对于我们这些不会前端的小码农来说,是绝对的神器。
但也正是因为不了解前端,所以哪怕是丁点的问题,对我们来说都是痛不欲生。
这次让我痛不欲生的便是flat ui的switch组件。
该组件是用来替代 checkbox 的组件, 关于它的用法,可以参见这里。
switch有两种状态,开启和关闭
组件如图所示:
对于该组件的初始化、响应事件可以这样写:
$(‘#forFriend‘).on({ ‘init.bootstrapSwitch‘: function() { $(‘#forFriend‘).bootstrapSwitch("state", true); }, ‘switchChange.bootstrapSwitch‘: function(event, state) { // 按钮状态发生改变 } });
这样,就可以在加载完页面后对 switch 动态初始化值、并对switch组件状态切换事件进行响应。
想要对switch动态初始化,还需要一个条件,初始化switch状态时,不应该响应switch状态切换事件。
上面的代码是做不到这一点的,为了能够做到,必须想一些办法,即使用代码改变swtch状态和用户改变switch状态有什么不同呢?答案是焦点。
当用户点击switch时,switch组件获得焦点; 相反的,如果使用代码改变swith组件时,焦点不能在switch上。通过这样判断方法就可以实现“随心所欲”的选择是否响应switch切换事件。
简单来写就是这样:
$(‘#switch‘).on({ ‘init.bootstrapSwitch‘: function() { $("#switch").bootstrapSwitch("state", state);// 初始化状态 }, ‘switchChange.bootstrapSwitch‘: function(event, state) { // 如果没有焦点,证明不是用户触发的, 不做任何处理 if ($("#switch").is(":focus") == false) return; // 处理 } });
我们可能还有一些需求,比如当用户开启switch时,弹出模态框,提示是否要开启,如果确认,则开启switch,否则不开启。
用户关闭模态框的方法有很多,可以选择右上角的关闭按钮、可以单击返回、可以点击确认,甚至是按下esc或者点击模态框以外的区域
模态框如图所示:
关闭方法很多,但除了点击确认外,其他的所有关闭模态框都认为拒绝 开启switch。
代码如下:
$(‘#switch‘).on({ ‘init.bootstrapSwitch‘: function() { // 确保一开始焦点不在switch上 var state = true; // 从服务器获取按钮状态 $("#switch").bootstrapSwitch("state", state);// 初始化状态 }, ‘switchChange.bootstrapSwitch‘: function(event, state) { // 如果没有焦点,证明不是用户触发的, 不做任何处理 if ($("#switch").is(":focus") == false) return; if (state == true) { // 如果状态为 on, 需要开启模态框 // 让其失去焦点,这时使用代码改变按钮状态就不会触发事件 $("#switch").blur(); // 防止模态框意外关闭,先设置按钮的状态为关闭 $("#switch").bootstrapSwitch("state", false); // 弹出模态框 $("#modal-switch").modal({backdrop: ‘static‘, keyboard: false}); } else { // 如果当前状态为off // 处理 } } }); // 单击了模态框中的确定按钮 $(‘#modal-switch-confirm‘).click(function () { // 处理 ... // 处理成功改变 switch 状态 $("#switch").bootstrapSwitch("state", true); });
时间: 2024-11-05 22:32:06