近期項目中用到的一些本身寫的或者整理而成的前端效果乾貨（二）

時間 2019-12-14

標籤近期項目用到一些本身寫的或者整理前端效果乾貨简体版

原文原文鏈接

快速瀏覽全部PUI Demo

想查看源代碼，能夠自行F12，或在github中直接查看源碼，或者歡迎直接留言。vue

1、相似Mobiscroll的vue選擇器組件－vue-mobiscroll

以前已經用jQuery實現了一個類Mobiscroll的插件，jquery-scroll-cascade-select，並且代碼更加精簡，如今考慮用比較火的Vue.js來作出相似的組件。jquery

思路：css3

由於Vue.js是mvvm模式，數據驅動視圖，實現起來跟jQuery的Dom驅動視圖有點不同，但數據驅動更加簡單，只要改變數據，視圖將自動被更新。git

步驟1、先給組件添加一些屬性或者綁一些數據變量；github

步驟2、這一步跟jQuery實現的思路相似，給組件的Dom元素綁定一些Touch、Mouse事件去動態更新組件的屬性或者變量。這樣就能夠了，視圖會自動被更新的。mvvm

效果以下：ide

點擊查看　在線演示優化

Github地址

2、超簡單的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');
            });
        });