JS元件系列——基於Bootstrap Ace模板的選單Tab頁效果優化
前言:之前發表過一篇 JS元件系列——基於Bootstrap Ace模板的選單和Tab頁效果分享(你值得擁有) ,收到很多園友的反饋,當然也包括很多詬病,因為上篇只是將功能實現了,很多細節都沒有處理,這篇博主將帶領大家一起來優化這裡的效果,使之成為一個可以在專案裡面使用的成品。
說點題外話,本來,在網際網路模式下,Tab頁+iframe的組合是不能被大多數平臺接受的,從這些年推出的一些好的產品可以看出,幾乎大家都不這麼玩,即使是一些後臺的管理模板,比如常見的AdminLTE、Ace、I
系列文章
解決iframe高度自適應問題
增加上邊框
美化刪除圖示
標籤頁上面顯示選單圖示
標籤增加邊框
方角邊框
標籤顏色搭配
標籤過多時左右移動
選單選中效果
選單獨立滾動條
var changeFrameHeight = function (that) { $(that).height(document.documentElement.clientHeight - 115); $(that).parent(".tab-pane").height(document.documentElement.clientHeight - 130); }
然後建立iframe的時候呼叫這個方法
content = '<div role="tabpanel" class="tab-pane" id="' + id + '"><iframe id="iframe_'+id+'" src="' + options.url + '" width="100%" height="100%" onload="changeFrameHeight(this)" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe></div>';
為了在瀏覽器的寬高變化時頁面的寬高也跟著變化,還需要註冊頁面的onresize事件
window.onresize = function () { var target = $(".tab-content .active iframe"); changeFrameHeight(target); }
這三個地方都在bootstrap-tab.js裡面更改即可。
改完之後來看看測試效果:
新建檔案,然後在index.html頁面引用該樣式檔案
<link href="Content/bootstrap/css/bootstrap-tab.css" rel="stylesheet"/>
我們增加兩個樣式
.nav-tabs li a{ line-height:2 } .nav-tabs .active a{ border-top: solid 2px #3498db !important; }
檢視效果
是不是看上去趕緊好好看一些~~
3、美化刪除圖示
上圖中標籤頁加上上邊框之後看上去要好看一些了,可是還不夠美觀,看來看去總覺得哪個關閉的小圖示怪怪的,我們來美化一下。比如我們在boostrap-tab.js裡面將關閉按鈕換成帶圓形邊框的
將圖示i標籤的的class由原來的 glyphicon glyphicon-remove 換成 glyphicon glyphicon-remove-sign 即可,我們來看看效果:
為了更加符合使用習慣,我們增加一個滑鼠移動到圖示上面顯示紅色的效果,我們在boostrap-tab.css裡面增加如下樣式:
.nav-tabs li a .glyphicon-remove-sign:hover{ color:red; cursor: pointer; }
效果如下
4、標籤頁帶圖示
標籤頁裡面僅僅顯示文字和關閉的圖示給人感覺太空洞,我們增加頁面的圖示。首先首頁的標籤頁我們增加一個home圖示,在index.html增加如下i標籤:
然後其他每一個動態開啟的tab頁前面的圖示就是對應的點選左邊選單對應的圖示。首先我們在初始化選單的那個做如下更改,在sidebar-menu.js檔案改成這樣
(function ($) { $.fn.sidebarMenu = function (options) { options = $.extend({}, $.fn.sidebarMenu.defaults, options || {}); var target = $(this); target.addClass('nav'); target.addClass('nav-list'); if (options.data) { init(target, options.data); } else { if (!options.url) return; $.getJSON(options.url, options.param, function (data) { init(target, data); }); } var url = window.location.pathname; //menu = target.find("[href='" + url + "']"); //menu.parent().addClass('active'); //menu.parent().parentsUntil('.nav-list', 'li').addClass('active').addClass('open'); function init(target, data) { $.each(data, function (i, item) { var li = $('<li></li>'); var a = $('<a></a>'); var icon = $('<i></i>'); //icon.addClass('glyphicon'); icon.addClass(item.icon); var text = $('<span></span>'); text.addClass('menu-text').text(item.text); a.append(icon); a.append(text); if (item.menus&&item.menus.length>0) { a.attr('href', '#'); a.addClass('dropdown-toggle'); var arrow = $('<b></b>'); arrow.addClass('arrow').addClass('icon-angle-down'); a.append(arrow); li.append(a); var menus = $('<ul></ul>'); menus.addClass('submenu'); init(menus, item.menus); li.append(menus); } else { var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text + '\',close: true,url: \'' + item.url + '\',icon:\''+ item.icon +'\'});'; a.attr('href', href); //if (item.istab) // a.attr('href', href); //else { // a.attr('href', item.url); // a.attr('title', item.text); // a.attr('target', '_blank') //} li.append(a); } target.append(li); }); } } $.fn.sidebarMenu.defaults = { url: null, param: null, data: null }; })(jQuery);sidebar-menu.js
其中有一句
var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text + '\',close: true,url: \'' + item.url + '\',icon:\''+ item.icon +'\'});';
這裡將當前選單的圖示傳到addTabs()方法裡面,然後在addTabs()方法裡面接收這個引數。
var addTabs = function (options) { //可以在此處驗證session //var rand = Math.random().toString(); //var id = rand.substring(rand.indexOf('.') + 1); debugger; var url = window.location.protocol + '//' + window.location.host; options.url = url + options.url; id = "tab_" + options.id; var active_flag = false; if($("#" + id)){ active_flag = $("#" + id).hasClass('active'); } $(".active").removeClass("active"); //如果TAB不存在,建立一個新的TAB if (!$("#" + id)[0]) { //固定TAB中IFRAME高度 mainHeight = $(document.body).height(); //建立新TAB的title title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab"><i class="'+options.icon+'"></i>' + options.title; //是否允許關閉 if (options.close) { title += ' <i class="glyphicon glyphicon-remove-sign" tabclose="' + id + '"></i>'; } title += '</a></li>'; //是否指定TAB內容 if (options.content) { content = '<div role="tabpanel" class="tab-pane" id="' + id + '">' + options.content + '</div>'; } else {//沒有內容,使用IFRAME開啟連結 content = '<div role="tabpanel" class="tab-pane" id="' + id + '"><iframe id="iframe_'+id+'" src="' + options.url + '" width="100%" height="100%" onload="changeFrameHeight(this)" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe></div>'; } //加入TABS $(".nav-tabs").append(title); $(".tab-content").append(content); }else{ if(active_flag){ $("#iframe_" + id).attr('src', $("#iframe_" + id).attr('src')); } } //啟用TAB $("#tab_" + id).addClass('active'); $("#" + id).addClass("active"); }; var changeFrameHeight = function (that) { $(that).height(document.documentElement.clientHeight - 115); $(that).parent(".tab-pane").height(document.documentElement.clientHeight - 130); } var closeTab = function (id) { //如果關閉的是當前啟用的TAB,啟用他的前一個TAB if ($("li.active").attr('id') == "tab_" + id) { $("#tab_" + id).prev().addClass('active'); $("#" + id).prev().addClass('active'); } //關閉TAB $("#tab_" + id).remove(); $("#" + id).remove(); }; $(function () { $("[addtabs]").click(function () { addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true }); }); $(".nav-tabs").on("click", "[tabclose]", function (e) { id = $(this).attr("tabclose"); closeTab(id); }); window.onresize = function () { var target = $(".tab-content .active iframe"); changeFrameHeight(target); } });bootstrap-tab.js
其中有一句
title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab"><i class="'+options.icon+'"></i>' + options.title;
然後寫一個樣式調整標籤頁圖示和標題的距離,我們在bootstrap-tab.css裡面增加如下樣式:
.nav-tabs li a i:first-child{ margin-right: 3px; }
最終得到效果如下:
當然,有可能你覺得加上這個之後tab頁顯得很擁擠,你也可以不加,根據自己的喜好來進行美化
5、標籤頁增加邊框
經過上面三步驟的美化,我們的標籤頁已經好看了許多。如果你對介面要求不高,其實也夠了,但是博主覺得還可以繼續美化呢~
比如我們給標籤也增加一個邊框,使每一個標籤頁看上去更加像一個獨立的整體。我們調整.nav-tabs li a這個樣式為
.nav-tabs li a{ line-height:2; border:1px #ddd solid; margin-right: -1px; color: #999; }
然後增加
.nav-tabs{ background: #fafafa; }
這樣看到的效果:
當然,有人喜歡將邊框的圓角去掉,你也可以在.nav-tabs li a裡面增加 border-radius:0; 得到的效果
博主覺得使用圓角也不錯啊,反正這個取決於個人喜好!
6、標籤頁顏色搭配
以上效果基本夠用,在專案裡面使用起來沒有太大的問題,但博主還想將其優化下。比如我們做如下樣式調整:
.nav-tabs{ background: #fafafa; border-bottom: 3px #3498db solid; } .nav-tabs li a{ line-height:2; border:1px #ddd solid; margin-right: -1px; color: #999; border-radius: 0; } .nav-tabs li a .glyphicon-remove-sign:hover{ color:red; cursor: pointer; } .nav-tabs li a i:first-child{ margin-right: 3px; } .nav-tabs .active a{ border-top: solid 2px #3498db !important; background: #3498db !important; color:#fff !important; }bootstrap-tab.css
可能這裡的顏色搭配並不協調,但至少看上去更加perfect一點吧。
7、標籤頁寬度超限處理
到上面為止Tab頁的樣式已經可以了,可是還有一個最大的問題沒有解決,就是當所有tab頁的寬度的和超過瀏覽器的寬度限制時,就會出現tab的換行,看上去非常“噁心”。不信你多開啟一些tab頁試試。這裡博主花了兩天時間寫了一套可行的樣式方案,來一睹風采吧:
實現思路其實不難,主要就是介面樣式的調整確實非常話時間。下面來看一看實現步驟
首先介面上面在標籤頁的兩邊增加向左移、向右移的圖示
<ul class="nav-my-tab"> <li class="leftbackward"><a href="#" > <i class="icon-backward"></i></a> </li> <li class="middletab"> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#Index" role="tab" data-toggle="tab"> <i class="icon-home"></i>系統首頁</a> </li> </ul> </li> <li class="rightforward"><a href="#"> <i class="icon-forward"></i></a> </li> </ul>
然後就是這兩個圖示以及中間tab頁的樣式
.nav-my-tab{ padding-left: 0px; margin-bottom: 0px; } .nav-my-tab .middletab{ height: 36px; overflow: hidden; border-bottom: 3px #3498db solid; position: relative; background: #fafafa; } .nav-my-tab li{ list-style-type: none; } .nav-my-tab li a{ padding:5px 10px; } .nav-my-tab .leftbackward{ float: left; background: #fff; padding-top: 7px; border-top: 1px #ddd solid; height:36px; border-bottom: 3px #3498db solid; } .nav-my-tab .leftbackward a{ border-left-width: 0px; color: #999; padding-top: 9px; padding-bottom: 8px; margin-right: -1px; } .nav-my-tab .leftbackward a:hover,.nav-my-tab .leftbackward a:focus{ text-decoration: none; background: #ddd; } .nav-my-tab .rightforward{ float:right; position: relative; line-height: 2.6; background: #fff; border-top: 1px #ddd solid; border-bottom: 3px #3498db solid; } .nav-my-tab .rightforward a{ width: 35.5px; line-height: 2; color: #999; height: 35px; padding: 8px 10px; padding-left: 13px; border-left: 1px #ddd solid; } .nav-my-tab .rightforward a:hover,.nav-my-tab .rightforward a:focus{ text-decoration: none; background: #ddd; }
最後就是左移、右移的按鈕事件
$(function () { $("[addtabs]").click(function () { addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true }); }); $(".nav-tabs").on("click", "[tabclose]", function (e) { id = $(this).attr("tabclose"); closeTab(id); }); $('.nav-my-tab .middletab').width($('.nav-my-tab .middletab').width()-37); //固定左邊選單的高度 $('#sidebar').height($(window).height() - 80); window.onresize = function () { var target = $(".tab-content .active iframe"); changeFrameHeight(target); } //tab頁向左向右移動 $('.nav-my-tab .leftbackward').click(function(){ var strLeft=$('.nav-my-tab .middletab .nav-tabs').css('left'); var iLeft = parseInt(strLeft.replace('px', '')); if(iLeft>=0){ return; } else{ debugger; var totalWidth=0; var lis = $(".nav-tabs li"); for(var i=0;i<lis.length;i++){ var item = lis[i]; totalWidth-= $(item).width(); if(iLeft>totalWidth){ iLeft+=$(item).width(); break; } }; if(iLeft>0){ iLeft=0; } $(".nav-my-tab .middletab .nav-tabs").animate({left:iLeft + 'px'}); } }); $('.nav-my-tab .rightforward').click(function(){ var strLeft=$('.nav-my-tab .middletab .nav-tabs').css('left'); var iLeft = parseInt(strLeft.replace('px', '')); var totalWidth=0; $.each($(".nav-tabs li"),function(key, item){ totalWidth+= $(item).width(); }); var tabsWidth = $(".nav-my-tab .middletab").width(); if(totalWidth>tabsWidth){ debugger; if(totalWidth-tabsWidth<=Math.abs(iLeft)){ return; } var lis = $(".nav-tabs li"); totalWidth=0; for(var i=0;i<lis.length;i++){ var item = lis[i]; totalWidth-= $(item).width(); if(iLeft>totalWidth){ iLeft-=$(item).width(); break; } }; $(".nav-my-tab .middletab .nav-tabs").animate({left:iLeft + 'px'}); } }); });
主要原理就是通過計算所有tab頁的寬度的和已經ul當前的左移量來判斷是否需要移動,以及每次移動多少。這裡的移動是通過css樣式的left屬性去控制的。如果你理解了這個原理,其實實現起來並不算太複雜,關鍵的問題還是頁面的樣式和js的配置使用。
8、左邊選單的選中效果和固定高度效果
這部分其實不屬於Tab頁的優化範疇,但既然要把這個做好,順帶也把這個優化了下。
首先在sidebar-menu.js裡面增加如下id
然後在addTabs()方法的最下面加這兩句即可
//啟用左邊選單 $('#menu li').removeClass('active'); $('#li_'+options.id).addClass('active');
得到效果
還有一個就是左邊選單的滾動條,當左邊選單的數量多了以後,每次展開都會導致整個頁面出現滾動條,介面非常不友好,博主打算給左邊選單部分單獨加上滾動條,用來控制選單的滾動。
增加如下樣式
#sidebar{ overflow-x: hidden; overflow-y: auto; }
這裡的sidebar是左邊選單的div容器。
然後在頁面初始化完成的時候給這個div固定一個動態高度。
$(function () { //固定左邊選單的高度 $('#sidebar').height($(window).height() - 80); });
效果如下
,可以右邊隨意 打賞 然後聯絡博主。
歡迎各位轉載,但是未經作者本人同意,轉載文章之後必須在文章頁面明顯位置給出作者和原文連線,否則保留追究法律責任的權利
PS:真心不想跟有些人辯,最近有部分收到我原始碼的同志說我故意刪除這裡的部分程式碼。我想說這種人肯定沒寫過部落格,或者不經常寫部落格,寫部落格都要先本地寫好,然後貼上來部分程式碼,然後本地再修改優化,本文字來就是一個循序漸進的優化過程,有時忘了將修改過的程式碼更新上來這種再正常不過了,所以請你搞清楚了狀況再來發表言論!!!憑什麼說原始碼裡面和這裡貼的有些不一致就說博主故意刪除程式碼呢!!!長腦子沒!!!你是覺得我靠這個打賞來發家致富麼?
相關推薦
JS元件系列——基於Bootstrap Ace模板的選單和Tab頁效果分享(你值得擁有)
前言:最近園子裡多了許多談語言、談環境、談逼格(格局)的文章,看看笑笑過後,殊不知其實都是然並卵。提升自己的技術才是王道。之前博主分享過多篇bootstrap元件的文章,引起了很多園友的關注和支援,看樣子這種風格還是受到很多園友青睞的。本著不辜負園友們的支援的原則,應群友們的要求,今天來分享下專案中使用Ace
JS元件系列——基於Bootstrap Ace模板的選單Tab頁效果優化
前言:之前發表過一篇 JS元件系列——基於Bootstrap Ace模板的選單和Tab頁效果分享(你值得擁有) ,收到很多園友的反饋,當然也包括很多詬病,因為上篇只是將功能實現了,很多細節都沒有處理,這篇博主將帶領大家一起來優化這裡的效果,使之成為一個可以在專案裡面使用的成品。 說點題外話,本來,在網際網
基於Bootstrap Ace模板+bootstrap.addtabs.js的選單
這幾天研究了基於bootstrap Ace模板+bootstra.addtabs.js實現選單的效果 參考了這個人的部落格 https://www.cnblogs.com/landeanfen/p/7601880.html 但是由於我沒能找到bootstrap.tab.js(我不太確定bootstrap.ad
JS元件系列——Bootstrap右鍵選單解決方案:ContextMenu
前言:有段時間沒發表隨筆了,過個年人都變得懶了。新年剛來上班,今天正好得空,將去年遺留的兩個小元件總結記錄下。有朋友跟我說:你的bootstrap元件要能夠形成一個可以滿足一般專案需求的系列元件,才有真正的實用價值。想想說得在理。這不今天來總結下bootstrap的一個小元件的應用。好了,不說廢話,進入正題吧
Bootstrap Ace模板實現選單和Tab頁效果
Bootstrap Ace模板實現選單和Tab頁效果 這篇文章主要為大家分享了基於Bootstrap Ace模板實現選單和Tab頁效果,感興趣的小夥伴們可以參考一下 本文分享了專案中使用Ace模板的選單樣式和基於iframe的Tab頁效果。 一、效果展示 1、折騰了好久,
JS元件系列——兩種bootstrap multiselect元件大比拼[轉載]
轉載原文地址:https://www.cnblogs.com/landeanfen/p/5013452.html 前言:今天繼續來看看bootstrap的另一個元件:multiselect。記得在專案開始之前,博主專案組幾個同事就使用哪些js元件展開過討論,其中就說到了select元件,
JS元件系列——表格元件神器:bootstrap table(三:終結篇,最後的乾貨福利)
前言:前面介紹了兩篇關於bootstrap table的基礎用法,這章我們繼續來看看它比較常用的一些功能,來個終結篇吧,毛爺爺告訴我們做事要有始有終~~bootstrap table這東西要想所有功能覆蓋似乎不太現實,博主挑選了一些自認為比較常用的功能在此分享給各位園友。原始
JS元件系列——表格元件神器:bootstrap table
前言:之前一直在忙著各種什麼效果,殊不知最基礎的Bootstrap Table用法都沒有涉及,罪過,罪過。今天補起來吧。上午博主由零開始自己從頭到尾使用了一遍Bootstrap Table ,遇到不少使用方面的問題,也做了一部分筆記,在此分享出來供需要使用的園友參考。還記得前
JS元件系列——表格元件神器:bootstrap table(二:父子表和行列調序)
前言:上篇 JS元件系列——表格元件神器:bootstrap table 簡單介紹了下Bootstrap Table的基礎用法,沒想到討論還挺熱烈的。有園友在評論中提到了父子表的用法,今天就結合Bootstrap table的父子表和行列調序的用法再來介紹下它稍微高階點的用法
JS元件系列——不容錯過的兩款Bootstrap Icon圖示選擇元件
前言:最近好多朋友在群裡面聊到bootstrap icon圖示的問題,比如最常見的選單管理,每個選單肯定需要一個對應的選單圖示,要是有一個視覺化的圖示選擇元件就好了,最好是直接選擇圖示,就能得到對應的class樣式。於是乎各種百度,皇天不負有心人,最後被博主找到了,感覺效果還不錯,並且支援自定義的圖示,今天就
JS元件系列——再推薦一款好用的bootstrap-select元件,親測還不錯
前言:之前分享過兩篇bootstrap下拉框的元件:JS元件系列——兩種bootstrap multiselect元件大比拼 和 JS元件系列——Bootstrap Select2元件使用小結 ,收到很多園友的關注和提問,最後總結這兩篇裡面的下拉框元件都存在一些大大小小的問題,比如兩種bootstrap m
JS元件系列——自己動手封裝bootstrap-treegrid元件
前言:最近產品需要設計一套相對完整的組織架構的解決方案,由於組織架構涉及到層級關係,在表格裡面展示層級關係,自然就要用到所謂的treegrid。可惜的是,一些輕量級的表格元件本身並沒有自帶樹形表格的功能,比如bootstrapTable就沒有這個功能,怎麼辦呢?如果是jqgrid、easyUI的表格,tree
JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(四):自定義T4模板快速生成頁面
前言:上篇介紹了下ko增刪改查的封裝,確實節省了大量的js程式碼。博主是一個喜歡偷懶的人,總覺得這些基礎的增刪改查效果能不能通過一個什麼工具直接生成頁面效果,啥程式碼都不用寫了,那該多爽。於是研究了下T4的語法,雖然沒有完全掌握,但是算是有了一個大致的瞭解,給需要自定義模板的園友們提供一個參考。於是乎有了今天
JS元件系列——分享自己封裝的Bootstrap樹形元件:jqTree
前言:之前的一篇介紹了下如何封裝自己的元件,這篇再次來體驗下自己封裝元件的樂趣。看過博主部落格的園友應該記得之前分享過一篇樹形選單的使用JS元件系列——Bootstrap 樹控制元件使用經驗分享,這篇裡面第一個Jquery Tree,只是用簡單樣式和js去實現了效果,沒有給出一個系統的封裝,這篇博主就來試試
JS元件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相關知識,好久沒更新JS系列文章了。這兩天做了一個簡單的業務需求,覺得效果還可以,今天在這裡分享給大家,歡迎拍磚~~ 一、業務需求及實現效果 專案涉及到訂單模組,那天突然接到一個需求,說是兩種不同狀態的訂單之間要實現插單的效果,頁面上呈現方式是:左右兩個Table,左邊Table
JS元件系列——Bootstrap 樹控制元件使用經驗分享
前言:很多時候我們在專案中需要用到樹,有些樹僅僅是展示層級關係,有些樹是為了展示和編輯層級關係,還有些樹是為了選中項然後其他地方呼叫選中項。不管怎麼樣,樹控制元件都是很多專案裡面不可或缺的元件之一。今天,博主打算結合自己的使用經歷和網上找到的一些不錯的樹控制元件在這裡做一個分享,希望能幫大家找到最合適的控制元
JS元件系列——Bootstrap元件福利篇:幾款好用的元件推薦
前言:之前分享過很多bootstrap常用元件,包括表格、表單驗證、檔案上傳、複選下拉框、彈出框等。這段時間,博主又收藏了一些好用的元件(有些在專案中已經用起來了),經過兩天的時間,已經整理出了一部分,本著“好東西要與人分享”的原則,今天還是來點福利,將博主收藏的東西分享出來,供需要的園友參考。元件大部分都是
JS元件系列——兩種bootstrap multiselect元件大比拼
前言:今天繼續來看看bootstrap的另一個元件:multiselect。記得在專案開始之前,博主專案組幾個同事就使用哪些js元件展開過討論,其中就說到了select元件,由於專案的整體風格使用的bootstrap風格,所以在選用select元件的時候優先考慮和bootstrap結合使用的。其中就找到了兩個
JS元件系列——Bootstrap寒冬暖身篇:彈出框和提示框效果以及程式碼展示
前言:對於Web開發人員,彈出框和提示框的使用肯定不會陌生,比如常見的表格新增和編輯功能,一般常見的主要有兩種處理方式:行內編輯和彈出框編輯。在增加使用者體驗方面,彈出框和提示框起著重要的作用,如果你的系統有一個友好的彈出提示框,自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件,這
JS元件系列——Bootstrap元件福利篇:幾款好用的元件推薦(二)
前言:上篇 JS元件系列——Bootstrap元件福利篇:幾款好用的元件推薦 分享了幾個專案中比較常用的元件,引起了許多園友的關注。這篇還是繼續,因為博主覺得還有幾個非常簡單、實用的元件,實在不願自己一人獨享,沒辦法,誰讓博主這麼愛分享呢~~ 七、多值輸入元件manifest 關於文字框的多值輸入,一