jQuery LigerUI is a collection of UI plug-ins designed based on jQuery. Its core design goals are rapid development, simple use, powerful functions, lightweight, and easy to expand. Using the UI can help developers quickly create Friendly user interface.
The operating environment of this article: windows10 system, jquery 2.2.4, thinkpad t480 computer.
Related recommendations: "jQuery Tutorial"
jquery LigerUI rapid development UI framework
LigerUI is a UI framework based on jQuery , its core design goals are rapid development, simple use, powerful functions, lightweight, and easy to expand. Simple yet powerful, it is dedicated to quickly creating Web front-end interface solutions, which can be applied to .net, jsp, php and other web server environments.
LigerUI has the following main features:
Easy to use, lightweight
The controls are practical It has strong flexibility and large functional coverage, and can solve the design scenarios of most enterprise information applications
Rapid development, using LigerUI can reduce the amount of code significantly compared with traditional development
Easy to expand, including default parameters, form/table editor, multi-language support, etc.
-
Supports Java, .NET, PHP and other web servers
Supports IE6, Chrome, FireFox and other browsers
Open source, the source code framework level is simple and easy to understand.
How to use Jquery LigerUI
Before writing the specific use, let me briefly explain it. I also learned and sold it on the project. Feel free to correct me if I find anything wrong, thank you in advance. Okay, let’s get down to business. You can download a copy of the source code from the official website of LigerUI. We can find all the plug-ins of LigerUI in the lib/ligerUI directory as shown below:
You can see that the ligerUI directory mainly includes two directories, scripts and skins. All plug-ins of ligerUi are stored under JS. The Skin directory provides light green and gray. Different styles of skins, you can choose which skin to use according to your own preferences. The json2.js file is used to solve the problem that ie6 and ie7 do not support json objects (JSON.Parse(), and JSON.stringify()). If you need your program to support ie6 and ie7 browsers, you may need to change the reference script. Next, we use a simple example to illustrate:
<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 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>The effect is as shown:
From the above code we can see that you first need to introduce the style corresponding to yours The ligerui-all.css file under the skin needs to import the jquery file and the js/core/base.js file. This file is just like the api file of jquery that you need to import when using jquery. It is a basic class. This is my personal understanding. But in the demo given by Ligerui, the layout page does not use this file but uses the /js/ligerui.min.js file. I tried it in a project. If these two are introduced at the same time, an error will occur, so I During use, in addition to the layout page, the base.js file is referenced in other screens before referencing other plug-ins of Ligerui. Secondly, which Ligerui controls are used on your current page, you must reference the corresponding js plug-in under js/plugins. For example, in the above example, the combobox control of ligerui is used, and the corresponding ligerComboBox.js plug-in must be referenced. The initialization of the control, such as the js part in the example code, needs to be placed in $(function(){...}). That is, the initialization methods of different controls are similar. For example, the initialization method of combox is $("..." ).ligerComboBox({...}), the initialization method of grid is ("...").ligerGrid({...}). As in the above example, the Data parameter is the control data source parameter, in ligerui All data sources can only be used in JSON format. For specific parameters, events, and methods of different plug-ins, please refer to the official API:
In actual projects, our data sources must be dynamically accessed from the database, as follows I posted the class I used in the project to convert DataTable into Json format. You can use it if you need it.
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();
}
}For more programming-related knowledge, please visit: Programming Course! !
The above is the detailed content of What is jquery LigerUI?. For more information, please follow other related articles on the PHP Chinese website!
Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AMWhether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.
Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AMPython and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.
JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AMJavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.
JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AMJavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.
Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AMChoosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.
JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AMThe power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.
The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AMIntroduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr
Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AMNode.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Dreamweaver Mac version
Visual web development tools
WebStorm Mac version
Useful JavaScript development tools
Dreamweaver CS6
Visual web development tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
