近期项目中用到的一些自己写的或者整理而成的前端效果干货（二）

目录

一、类似Mobiscroll的vue选择器组件
二、超简单的jQuery的Tab选项卡和Accordion折叠菜单
三、jQuery+CSS3流星弹幕优化版
四、jQuery+CSS3轮播公告栏
五、js+CSS3世界时钟

更多项目...

快速浏览所有PUI Demo

想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。

一、类似Mobiscroll的vue选择器组件－vue-mobiscroll

之前已经用jQuery实现了一个类Mobiscroll的插件，jquery-scroll-cascade-select，而且代码更加精简，现在考虑用比较火的Vue.js来做出类似的组件。

思路：

因为Vue.js是mvvm模式，数据驱动视图，实现起来跟jQuery的Dom驱动视图有点不一样，但数据驱动更加简单，只要改变数据，视图将自动被更新。

步骤一、先给组件添加一些属性或者绑一些数据变量；

步骤二、这一步跟jQuery实现的思路类似，给组件的Dom元素绑定一些Touch、Mouse事件去动态更新组件的属性或者变量。这样就可以了，视图会自动被更新的。

效果如下：

点击查看　在线演示

Github地址

 

二、超简单的jQuery的Tab选项卡和Accordion折叠菜单

有效js代码只有12行就可以实现两种功能，完全由jQuery+css控制显示隐藏

效果如下：

点击查看　在线演示

代码如下：

        $(function () {
            // 绑定tabs
            var $ne_tabs = $('#ne_tabs'),
                $ne_body = $('#ne_body');
            $ne_tabs.find('li').click(function () {
                var This = $(this);
                $ne_tabs.find('li').removeClass('selected');
                $ne_body.find('.page').removeClass('selected');
                This.addClass('selected');
                $ne_body.find('#' + This.attr('id') + '_page').addClass('selected');
            });
            $ne_body.find('li').click(function () {
                $(this).toggleClass('active');
            });
        });

View Code