首頁 > 文章 > web前端 > jquery LigerUI是什麼？

jquery LigerUI是什麼？

青灯夜游原創: 2020-12-11 14:53:442661瀏覽

jQuery LigerUI是基於jQuery而設計的一系列UI插件集合，其核心設計目標是快速開發、使用簡單、功能強大、輕量級、易擴展，使用UI可以幫助開發者快速地創建友善的使用者介面。

jquery LigerUI是什麼？

本文操作環境：windows10系統、jquery 2.2.4、thinkpad t480電腦。

相關推薦：《jQuery教學》

jquery LigerUI 快速開發UI框架

LigerUI 是基於jQuery 的UI框架，其核心設計目標為快速開發、使用簡單、功能強大、輕量、易擴充。簡單又強大，致力於快速打造Web前端介面解決方案，可應用於.net,jsp,php等等web伺服器環境。

LigerUI有以下主要特點：

#使用簡單，輕量級
##控制項實用性強，功能覆蓋範圍大，可以解決大部分企業資訊應用的設計場景
快速開發，使用LigerUI可以比傳統開發減少極大的程式碼量
容易擴展，包括預設參數、表單/表格編輯器、多語言支援等等
#支援Java、.NET、PHP等web服務端
支援IE6 、Chrome、FireFox等瀏覽器
#開源，原始碼框架層次簡單易懂。

Jquery LigerUI怎麼使用

#在寫具體的使用之前先簡單的說明下，小弟也是在專案上現學現賣，有不對的地方歡迎指正，小弟先謝過了。好了言歸正傳，大家可以在LigerUI的官方網站下載一份原始碼，我們可以在lib/ligerUI 目錄下找到LigerUI的所有插件如下圖：

jquery LigerUI是什麼？

可以看到ligerUI目錄下面主要包括了，腳本，和皮膚這兩個目錄，JS下存放著ligerUi的所有插件，Skin目錄下提供了淺綠色，和灰色兩種不同風格的皮膚，大家可以依照自己的喜好選擇使用哪一種皮膚。 json2.js檔案是用來解決ie6 和ie7不支援json物件的問題（JSON.Parse(),和JSON.stringify()）,如果你需要你的程式支援ie6和ie7瀏覽器，你可能需要引用改腳本。接下來我們用簡單例子來說明：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
    <script src="http://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>  
    <script src="http://www.cnblogs.com/lib/ligerUI/js/core/base.js" type="text/javascript"></script>  
    <script src="http://www.cnblogs.com/lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script> 
      <script type="text/javascript">
        $(function ()
        {


            $("#test1").ligerComboBox({  
                data: [
                    { text: &#39;张三&#39;, id: &#39;1&#39; },
                    { text: &#39;李四&#39;, id: &#39;2&#39; },
                    { text: &#39;赵武&#39;, id: &#39;44&#39; }
                ], valueFieldID: &#39;test3&#39;
            }); 
        });
   
    </script>

</head>
<body style="padding:10px"> 
      <input type="text" id="test1" />

</body>
</html>

效果如圖：

jquery LigerUI是什麼？

#從上面的程式碼我們可以看出，首先需要引入對應你風格的皮膚下的ligerui-all.css文件，需要引入jquery文件，需要引入js/core/base.js文件，這個文件就如同你在使用jquery的時候需要引入jquery 的api文件一樣，是個基礎類吧，我個人的理解是這樣。但在ligerui給出的demo中佈局頁面沒有使用該文件而使用了/js/ligerui.min.js文件，我在一個專案中嘗試過，如果同時引入了這兩個則會出現錯誤，所以我在使用過程中除了版面配置頁面，在別的畫面中在引用ligerui別的插件之前都引用base.js檔。其次，你目前頁面使用到了哪些ligerui的控件，則必須引用js/plugins下面對應的js插件。例如上面的範例中使用了ligerui的combox控件，則必須引用對應的ligerComboBox.js外掛程式。控制項的初始化如範例程式碼中的js部分，需要放在$(function(){...})中也就是，不同控制項的初始化方法都類似，例如combox的初始化方法為$("..." ).ligerComboBox({...}), grid的初始化方法為("...").ligerGrid({...}).如上面的範例其中Data參數為此控制項資料來源參數，在ligerui中所有的資料來源只能試用JSON格式，不同插架的具體參數、事件、方法請參考官方api：

在實際的專案中我們的資料來源肯定是動態從資料庫中訪問，下面我將我在專案中使用的DataTable轉換為Json格式的類別貼出來，有需要的可以拿去用。

public class JsonOperation
    {
        /// <summary>
        /// DataTable转换Json
        /// </summary>
        /// <param name="dtSource">转换数据源</param>
        /// <param name="strJosonCols">Joson格式列</param>
        /// <param name="strParCols">DataTable格式列</param>
        /// <returns>Json字符串</returns>
        public static string DataTableToJson(DataTable Source, string[] strJosonCols, string[] strParCols)
        {
            StringBuilder Json = new StringBuilder();
            Json.Append("[");
            if (Source.Rows.Count > 0)
            {
                for (int intRow = 0; intRow < Source.Rows.Count; intRow++)
                {
                    Json.Append("{");
                    for (int intCol = 0; intCol < strJosonCols.Length; intCol++)
                    {
                        Json.Append(strJosonCols[intCol] + ":\"" + Source.Rows[intRow][strParCols[intCol]].ToString().Replace("\"","").Trim() + "\"");

                        if (intCol < strJosonCols.Length - 1)
                        {
                            Json.Append(",");
                        }
                    }
                    Json.Append("}");
                    if (intRow < Source.Rows.Count - 1)
                    {
                        Json.Append(",");
                    }
                }
            }
            Json.Append("]");
            return Json.ToString();

        }

        /// <summary>
        /// DataTable转换Json
        /// </summary>
        /// <param name="dtSource">转换数据源</param>
        /// <returns>Json字符串</returns>
        public static string DataTableToJson(DataTable Source)
        {
            StringBuilder Json = new StringBuilder();
            Json.Append("[");
            if (Source.Rows.Count > 0)
            {
                for (int i = 0; i < Source.Rows.Count; i++)
                {
                    Json.Append("{");
                    for (int j = 0; j < Source.Columns.Count; j++)
                    {
                        Json.Append(Source.Columns[j].ColumnName.ToString() + ":\"" + Source.Rows[i][j].ToString() + "\"");
                        if (j < Source.Columns.Count - 1)
                        {
                            Json.Append(",");
                        }
                    }
                    Json.Append("}");
                    if (i < Source.Rows.Count - 1)
                    {
                        Json.Append(",");
                    }
                }
            }
            Json.Append("]");
            return Json.ToString();
        }
    }

更多程式相關知識，請造訪：

程式設計課程！！

以上是jquery LigerUI是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery如何判斷捲軸是否到底部下一篇：jquery如何判斷捲軸是否到底部

看更多