前端三方库零碎（持续更新）

LoserChaser

已于 2024-08-02 16:20:43 修改

阅读量392

点赞数 1

分类专栏： JavaScript学习前端文章标签：前端 javascript

于 2024-07-26 20:34:33 首次发布

本文链接：https://blog.csdn.net/sinat_30491515/article/details/138316486

版权

JavaScript学习同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

本文主要记录开发实践过程中遇到的前端库，做个记录总结，以备不时之需

一、UI相关

1、jQuery EasyUI

jQuery EasyUI 是一个基于 jQuery 的开源用户界面库，专注于提供易于使用和功能丰富的用户界面组件，适用于 Web 应用程序的开发。
主要特性和组件：

布局组件：

Panel：面板布局，用于容纳和组织其他组件。
Accordion：手风琴布局，展示多个折叠面板，只展开一个面板。

表单组件：

Form：表单布局和处理，包括验证和提交。
Textbox：文本框输入控件。
Combo：下拉框组件，支持单选和多选。
Datebox：日期选择框，支持日期和时间选择。

数据网格：

DataGrid：数据表格，支持排序、分页、编辑和自定义布局。
TreeGrid：树形数据表格，支持展开和折叠行。

对话框和窗口：

Dialog：模态对话框，用于显示消息、表单或自定义内容。
Window：可移动和可调整大小的窗口组件。

其他组件：

Menu：菜单组件，支持横向和纵向的菜单。
Tabs：选项卡组件，支持动态添加和关闭选项卡。
Tooltip：工具提示组件，显示鼠标悬停时的提示信息。

示例

初始化一个data-grid

<table id="dg"></table>

<script>
$(function(){
    $('#dg').datagrid({
        url: 'get_data.php', // 加载数据的远程 URL
        columns:[[
            {field:'id', title:'ID', width:100},
            {field:'name', title:'Name', width:100},
            {field:'price', title:'Price', width:100, align:'right'}
        ]]
    });
});
</script>

初始化一个 Dialog

<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;"
        closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post" novalidate>
        <div style="margin-bottom:10px">
            <input name="name" class="easyui-textbox" required="true" label="Name:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
        </div>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">Cancel</a>
</div>

<script>
function saveUser(){
    $('#fm').form('submit',{
        url: 'save_user.php',
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(result){
            var data = JSON.parse(result);
            if (data.success){
                $('#dlg').dialog('close'); // 关闭对话框
                $('#dg').datagrid('reload'); // 重新加载数据表格
            } else {
                $.messager.show({
                    title: 'Error',
                    msg: data.message
                });
            }
        }
    });
}
</script>

2、jQuery UI

jQuery UI 是一个基于 jQuery JavaScript 库的插件集合，它提供了丰富的用户界面组件和交互效果，使得在网页应用程序中创建交互式和美观的用户界面变得更加容易。
主要特性和组件：

交互组件：

拖放（Draggable）：使元素可以被拖动到指定的位置。
可调整大小（Resizable）：允许用户通过调整边界改变元素的大小。
选择（Selectable）：允许用户选择一组元素。
排序（Sortable）：允许用户通过拖放重新排序元素。

界面组件：

对话框（Dialog）：创建模态对话框，用于显示重要信息或进行用户输入。
按钮（Button）：增强和定制化按钮的外观和行为。
进度条（Progressbar）：显示任务进度的动态条形图。
日期选择器（Datepicker）：提供交互式的日期选择功能。

效果组件：

动画（Animation）：通过预定义的动画效果增强页面元素的交互性。
效果（Effect）：提供了各种元素显示和隐藏的效果。

工具：

小部件工厂（Widget Factory）：支持创建自定义小部件，并提供了面向对象的方式来扩展和组织代码。
示例

初始化一个对话框

//初始化一个对话框
// HTML
<div id="dialog" title="Basic dialog">
  <p>This is an example dialog.</p>
</div>
$(document).ready(function() {
  $("#dialog").dialog({
    autoOpen: false, // 初始时不自动打开
    width: 400, // 设置宽度
    modal: true, // 设置为模态对话框
    buttons: {
      "OK": function() {
        $(this).dialog("close"); // 关闭对话框
      },
      "Cancel": function() {
        $(this).dialog("close"); // 关闭对话框
      }
    }
  });

  // 打开对话框的按钮点击事件
  $("#opener").on("click", function() {
    $("#dialog").dialog("open");
  });
});

初始化一个时间选择器

// HTML
<input type="text" id="datepicker">

// JavaScript
$(document).ready(function() {
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd' // 设置日期格式
  });
});

3、Dat.GUI

Dat.GUI 是一个用于在网页上创建和管理简单用户界面的 JavaScript 库。它通常用于调试和交互式控制，特别是用于调整参数和选项的场景。
主要特点和用途：

轻量级和易于集成
Dat.GUI 轻量级且易于集成到现有的网页项目中。它不需要复杂的依赖项或配置，只需简单的 JavaScript 引入即可开始使用。
创建控件：
Dat.GUI 允许你创建各种控件，如滑块、颜色选择器、复选框等，用于调整和控制参数的值。
实时更新：
控件的值在用户调整时会实时更新，这使得它非常适合于调试和交互式调整。
跨浏览器兼容性：
Dat.GUI 兼容多种现代浏览器，并提供一致的用户体验。
简单的 API：
Dat.GUI 提供了简单且易于理解的 API，使得开发者可以快速创建和定制控件。
示例：

// 创建 GUI 实例
const gui = new dat.GUI();

// 定义参数对象：创建一个 parameters 对象，包含要控制的参数，如背景颜色、宽度和高度。
const parameters = {
  backgroundColor: '#ffffff', // 初始背景颜色为白色
  width: 100, // 初始宽度为100
  height: 100 // 初始高度为100
};

// 添加颜色选择器
gui.addColor(parameters, 'backgroundColor').onChange(function(value) {
  document.getElementById('elementToStyle').style.backgroundColor = value; // 更新背景颜色
});

// 添加滑块控件用于调整宽度
gui.add(parameters, 'width', 50, 300).onChange(function(value) {
  document.getElementById('elementToStyle').style.width = value + 'px'; // 更新宽度
});

// 添加滑块控件用于调整高度
gui.add(parameters, 'height', 50, 300).onChange(function(value) {
  document.getElementById('elementToStyle').style.height = value + 'px'; // 更新高度
});

// 初始设置页面元素的样式
const elementToStyle = document.getElementById('elementToStyle');
elementToStyle.style.backgroundColor = parameters.backgroundColor;
elementToStyle.style.width = parameters.width + 'px';
elementToStyle.style.height = parameters.height + 'px';