溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery LigerUI指的是什么

發(fā)布時(shí)間：2020-12-15 10:37:28 來(lái)源：億速云 閱讀：183 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)jquery LigerUI指的是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

jQuery LigerUI是基于jQuery而設(shè)計(jì)的一系列UI插件集合，其核心設(shè)計(jì)目標(biāo)是快速開發(fā)、使用簡(jiǎn)單、功能強(qiáng)大、輕量級(jí)、易擴(kuò)展，使用UI可以幫助開發(fā)者快速地創(chuàng)建友好的用戶界面。

jquery LigerUI 快速開發(fā)UI框架

LigerUI 是基于jQuery 的UI框架，其核心設(shè)計(jì)目標(biāo)是快速開發(fā)、使用簡(jiǎn)單、功能強(qiáng)大、輕量級(jí)、易擴(kuò)展。簡(jiǎn)單而又強(qiáng)大，致力于快速打造Web前端界面解決方案，可以應(yīng)用于.net,jsp,php等等web服務(wù)器環(huán)境。

LigerUI有如下主要特點(diǎn)：

  • 使用簡(jiǎn)單，輕量級(jí)

  • 控件實(shí)用性強(qiáng)，功能覆蓋面大，可以解決大部分企業(yè)信息應(yīng)用的設(shè)計(jì)場(chǎng)景

  • 快速開發(fā)，使用LigerUI可以比傳統(tǒng)開發(fā)減少極大的代碼量

  • 易擴(kuò)展，包括默認(rèn)參數(shù)、表單/表格編輯器、多語(yǔ)言支持等等

  • 支持Java、.NET、PHP等web服務(wù)端

  • 支持 IE6+、Chrome、FireFox等瀏覽器

  • 開源，源碼框架層次簡(jiǎn)單易懂。

Jquery LigerUI怎么使用

在寫具體的使用之前先簡(jiǎn)單的說(shuō)明下，小弟也是在項(xiàng)目上現(xiàn)學(xué)現(xiàn)賣，有不對(duì)的地方歡迎指正，小弟先謝過(guò)了。好了言歸正傳，大家可以在LigerUI的官方網(wǎng)站上下載一份源碼，我們可以在 lib/ligerUI 目錄下找到LigerUI的所有插件如下圖：

jquery LigerUI指的是什么

jquery LigerUI指的是什么

可以看到ligerUI目錄下面主要包括了，腳本，和皮膚這兩個(gè)目錄，JS下存放著ligerUi的所有插件，Skin目錄下提供了淺綠色，和灰色兩種不同風(fēng)格的皮膚，大家可以根據(jù)自己的喜好選擇使用哪種皮膚。json2.js文件是用來(lái)解決ie6 和ie7不支持json對(duì)象的問(wèn)題（JSON.Parse(),和JSON.stringify()）,如果你需要你的程序支持ie6和ie7瀏覽器，你可能需要引用改腳本。接下來(lái)我們用簡(jiǎn)單例子來(lái)說(shuō)明：

<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: '張三', id: '1' },
                    { text: '李四', id: '2' },
                    { text: '趙武', id: '44' }
                ], valueFieldID: 'test3'
            }); 
        });
   
    </script>

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

</body>
</html>

效果如圖：

jquery LigerUI指的是什么

從上面的代碼我們可以看出，首先需要引入對(duì)應(yīng)你風(fēng)格的皮膚下的ligerui-all.css文件，需要引入jquery文件，需要引入js/core/base.js文件，這個(gè)文件就如同你在使用jquery的時(shí)候需要引入jquery 的api文件一樣，是個(gè)基礎(chǔ)類吧，我個(gè)人的理解是這樣。但在ligerui給出的demo中布局頁(yè)面沒(méi)有使用該文件而使用了/js/ligerui.min.js文件，我在一個(gè)項(xiàng)目中嘗試過(guò)，如果同時(shí)引入了這兩個(gè)則會(huì)出現(xiàn)錯(cuò)誤，所以我在使用過(guò)程中除了布局頁(yè)面，在別的畫面中在引用ligerui別的插件之前都引用base.js文件。其次，你當(dāng)前頁(yè)面使用到了哪些ligerui的控件，則必須引用js/plugins下面對(duì)應(yīng)的js插件。比如上面的例子中使用了ligerui的combox控件，則必須要引用對(duì)應(yīng)的ligerComboBox.js插件。 控件的初始化如例子代碼中的js部分，需要放在$(function(){...})中也就是，不同控件的初始化方法都類似，比如combox的初始化方法為$("...").ligerComboBox({...}), grid的初始化方法為("...").ligerGrid({...}).如上面的例子其中Data參數(shù)為該控件數(shù)據(jù)源參數(shù)，在ligerui中所有的數(shù)據(jù)源只能試用JSON格式，不同插架的具體參數(shù)、事件、方法請(qǐng)參考官方api：

在實(shí)際的項(xiàng)目中我們的數(shù)據(jù)源肯定是動(dòng)態(tài)從數(shù)據(jù)庫(kù)中存取，下面我將我在項(xiàng)目中使用的將DataTable轉(zhuǎn)換為Json格式的類貼出來(lái)，有需要的可以拿去用。

public class JsonOperation
    {
        /// <summary>
        /// DataTable轉(zhuǎn)換Json
        /// </summary>
        /// <param name="dtSource">轉(zhuǎn)換數(shù)據(jù)源</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轉(zhuǎn)換Json
        /// </summary>
        /// <param name="dtSource">轉(zhuǎn)換數(shù)據(jù)源</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();
        }
    }

關(guān)于jquery LigerUI指的是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)
AI
助
手