电竞比分直播
建站知識

h5框架之layui和uikit哪個是你的首選?

標簽: ? | 作者:DT范福州網站建設 | TIMES:2018-08-27
     隨著前端的流行,福州網站建設前端也跟后端一樣出現了很多的框架,比較流行的可能就是layui和uikit了。那今天對這兩款的框架進行全面的對比:
    layui(諧音:類UI) 是一款采用自身模塊規范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。layui 首個版本發布于2016年金秋,她區別于那些基于 MVVM 底層的 UI 框架,卻并非逆道而行,而是信奉返璞歸真之道。準確地說,她更多是為服務端程序員量身定做,你無需涉足各種前端工具的復雜配置,只需面對瀏覽器本身,讓一切你所需要的元素與交互,從這里信手拈來。
   
UIkit 是 YOOtheme 團隊開發的一款輕量級、模塊化的前端框架,可快速構建強大的web前端界面。UIKit提供了全面的HTML、CSS及JS組件,它們使用簡單,容易定制和擴展。
它基于LESS開發,代碼結構清晰簡單,易于擴展和維護,并且具有體積小、反應靈敏的響應式組件,你可以根據 UIKit 基本的風格樣式,輕松地自定義創建出自己喜歡的主題樣式。
   LayUI優點

由于開發項目必須要在IE8上支持,選擇LayUI前端UI框架,Layui兼容除IE6/7以外的全部瀏覽器,并且多數結構支持響應式。
LayUI使用

 

需要引入layui的js和css文件,引入方式如下:

 

<!-- layoutui -->

<link rel="stylesheet" href="<%=realPath%>/layui/css/layui.css" media="all">

<script  src="<%=realPath%>/layui/layui.js"></script>

LayUI導航欄的使用

注意點:假如引入layui.js而不是layui.all.js時需要在<script></script>標簽中引入

 

layui.use('element'function(){

    var element = layui.element();

    }); 

代碼,類似于加載layui模塊的元素才能正常使用導航欄。

1.在<script></script>標簽中定義導航欄的結構如下:

 

        var checkManageTree = [

               {

             name: "產品",

             alias:"產品",

                 href:"",

                state:{

            selected:isCurrent("產品",false)

        }

               },

               {

             name: "供方",

             alias:"供方",

                 href:"",

                state:{

            selected:isCurrent("供方",false)

        }

                }];

2.定義添加導航的導航欄的div如下:

 

<!-- 左側導航 -->

<div id="left" class="site-text" lay-filter="left-div">

</div>

3.通過id獲取div標簽初始化導航欄視圖,getHtml()方法負責根據代碼動態生成導航欄視圖

   $('#left').html(getHtml(checkManageTree));

    4.getHtml()方法的實現,通過動態創建導航欄可以減少重復代碼,只需要定義json的格式的導航欄即可

 

/**

     * 獲取html字符串

     * @param {Object} data

     */

    function getHtml(data) {

        var ulHtml = '<ul class="layui-nav layui-nav-tree" id="leftMenuUl">';

        for (var i = 0; i < data.length; i++) {

            if (data[i].spread !== undefined &&data[i].spread) {

                ulHtml += '<li class="layui-nav-item layui-nav-itemed">';

            } else {

            if(data[i].state.selected !== undefined && data[i].state.selected){

             ulHtml += '<li class="layui-nav-item layui-this">';

            }else

             ulHtml += '<li class="layui-nav-item">';

            }

            }

            if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {

                ulHtml += '<a href="javascript:;">';

                if (data[i].icon !== undefined && data[i].icon !== '') {

                    if (data[i].icon.indexOf('fa-') !== -1) {

                        ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';

                    } else {

                        ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';

                    }

                }

                ulHtml += '<cite>' + data[i].name + '</cite>'

               /*  ulHtml +='<span class="layui-nav-more"></span>'  */

                ulHtml += '</a>';

                ulHtml += '<dl class="layui-nav-child">'

                for (var j = 0; j < data[i].children.length; j++) {

                 if(data[i].children[j].state.selected){

                 ulHtml += '<dd title="' + data[i].children[j].name +'"'+'class="layui-this"' +'>';

                 }else{

                 ulHtml += '<dd title="' + data[i].children[j].name + '">';

                 }

                    

                    /* ulHtml += '<a href="javascript:;" data-url="' + data[i].children[j].href + '">'; */

                    ulHtml += '<a href="'+data[i].children[j].href+'">';

                    if (data[i].children[j].icon !== undefined && data[i].children[j].icon !== '') {

                        if (data[i].children[j].icon.indexOf('fa-') !== -1) {

                            ulHtml += '<i class="fa ' + data[i].children[j].icon + '" data-icon="' + data[i].children[j].icon + '" aria-hidden="true"></i>';

                        } else {

                            ulHtml += '<i class="layui-icon" data-icon="' + data[i].children[j].icon + '">' + data[i].children[j].icon + '</i>';

                        }

                    }

                    ulHtml += '<cite>' + data[i].children[j].name + '</cite>';

                    ulHtml += '</a>';

                    ulHtml += '</dd>';

                }

                ulHtml += '</dl>';

            } else {

                /* var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';

                ulHtml += '<a href="javascript:;" ' + dataUrl + '>'; */

                var dataUrl =  (data[i].href !== undefined && data[i].href !== '') ? data[i].href  : '';

                ulHtml += '<a href="'+dataUrl+'">';

                if (data[i].icon !== undefined && data[i].icon !== '') {

                    if (data[i].icon.indexOf('fa-') !== -1) {

                        ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';

                    } else {

                        ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';

                    }

                }

                ulHtml += '<cite>' + data[i].name + '</cite>'

                ulHtml += '</a>';

            }

            ulHtml += '</li>';

        }

        ulHtml += '</ul>';

 

        return ulHtml;

 

    }

上面我們講到了核心的組件就是一個js,一個css,所以我們在應用的時候只要把這兩個引用上就可以解決大部分的問題了。(注意UIkit是需要jqurey支持的,而且需要2.0以上的版本,也正是如此,它不支持IE8以下的瀏覽器,這也是不受歡迎的原因之一)。

   如下所示,我們需要先引用這些東西在我們的html頁面中:

 

[html] view plain copy
 
  1. <link rel="stylesheet" type="text/css" href="css/uikit.css">  
  2. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>          
  3. <script type="text/javascript" src="js/uikit.min.js"></script>  


值得注意的是,我們需要把jquery引用在uikit.js之前,如果相反的話,uikit就會出現uikit need jquery的錯誤,影響頁面的顯示。

 

然后我們就可以根據教程中核心組件中的教程來寫控件了,下面是個例子:

 

 

[html] view plain copy
 
  1. <body>  
  2.    <div class="uk-container uk-container-center uk-margin-top">  
  3.     <div class="uk-panel uk-panel-box uk-text-center">  
  4.         <h1>Hello Universe</h1>  
  5.         <p>Lorgen ipsum dolor sit amet,consecletur elit,in antus libero debitis?</p>  
  6.         <a href="" class="uk-button uk-button-primary uk-button-large">Buy the Universe Now</a>  
  7.     </div>  
  8.    </div>  
  9. </body>  


這個里面用到了一個框和一個按鈕加標題字體的顯示設置,整個頁面的代碼如下:

 

 

[html] view plain copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>UIkit-Demo2</title>  
  5.         <meta charset="UTF-8">  
  6.         <link rel="stylesheet" type="text/css" href="css/uikit.gradient.min.css">  
  7.         <link rel="stylesheet" type="text/css" href="css/uikit.css">  
  8.         <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>          
  9.         <script type="text/javascript" src="js/uikit.min.js"></script>  
  10.     </head>  
  11.     <body>  
  12.         <div class="uk-container uk-container-center uk-margin-top">  
  13.             <div class="uk-panel uk-panel-box uk-text-center">  
  14.                 <h1>Hello Universe</h1>  
  15.                 <p>Lorgen ipsum dolor sit amet,consecletur elit,in antus libero debitis?</p>  
  16.                 <a href="" class="uk-button uk-button-primary uk-button-large">Buy the Universe Now</a>  
  17.             </div>  
  18.         </div>  
  19.     </body>  
  20. </html>  


僅供參考,另外如果想使用附加組件中的功能的話,需要注意里面所引用的高級樣式和JS文件,才可以應用。

相關新聞
首頁 | 網站制作 | 網站模板 | 定制設計 | 建站知識 | 建站幫助
电竞比分直播 重庆时时彩0369方法 云南时时彩开奖官方网站 梭哈的钱不对等 胜负彩比分直播新浪 四川时时爱乐 2004年全年七星彩开奖结果 老时时组六玩法技巧 四川时时走试图 新疆时时每天号 105333全年开奖记录