pladder

WLadder对PC前端的支持库

Usage no npm install needed!

<script type="module">
  import pladder from 'https://cdn.skypack.dev/pladder';
</script>

README

简介

Ladder是一套企业级集成开发解决方案,它由FLadder[framework],Ladder[.net core],JLadder[java],WLadder[Web],VLadder[Vue Mobile],ALadder[Android],NLadder[.net5]共同组成。WLadder可以PC、WebAPP,但支持PC端更多一些。

WLadder是底层以JQuery+VUE共同支持,以对象操作的方法供用户调用。符合后端工程师|面向对象的惯性书写方式。

WLadder以敏捷开发,能包容的 能节省的 能智能的,以最大诚意和努力,倾其全部给你

WLadder有自定义表单[FormDesign],高级表格[DataGrid],树形组件[Tree],表单框[FormDialog],输入类[Input]

Ladder的故事

做为程序员,翻Q是基本功,应该是。但此Ladder非彼Ladder,它可能是工具链,更多是一个有思想,有主张的Library

阿基米德曾经说过:“给我一个支点,我就能撬起地球。Ladder,让你一步登天,让你上房揭瓦,让你先跑起来。对于39.99岁的我,没有心灵鸡汤,仅给你一个小梯子,愿你爬过坑洼,愿你踏上更高台阶。

WLadder的污点

  1. 一个Json配置即为你生成一个组件
  2. new一个组件即为一个对象操作
  3. 一个引用即为css,js全部依赖完成
  4. 最简插件规则,支持你肆意插拔
  5. 主题和皮肤,支持你当众换衣服
  6. 或同名或精优的API,方便办事
  7. 参数类型识别,来者不拒
  8. 假如有数据接口,前端即为全端
  9. 有admin管理框架,有input小微组件,小床打坐,大床滚动
  10. 帮你集成三方良品,保媒拉线

WLadder使用

CMD引用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试1</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pladder@latest/css/ladder.css">
    <script src="https://cdn.jsdelivr.net/npm/pladder@latest/lib/ladder-skin.js"></script>
</head> 
<body>
    <!-- 页面内容 -->
    <script src="https://cdn.jsdelivr.net/npm/pladder@latest/lib/require.js" data-config="../../config/service.js"></script>
    <script>
        require(['ladder'], function () {
            console.log(Ladder);
        });
    </script>        
</body>
</html>
    
  1. require.js在原版上,进行baseurl处理。
  2. data-config 用以加载本地项目的配置信息。
  3. Ladder已经做了window.Ladder
  4. ladder.css可以不进行引用,但是可能出现页面组件渲染抖动的问题

普通引用实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试1</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pladder@latest/css/ladder.css">
    <script src="https://cdn.jsdelivr.net/npm/pladder@latest/lib/ladder-skin.js"></script>
</head> 
<body>
    <!-- 页面内容 -->
    <script src="../../jquery.js"></script>
    <script src="../../config/service.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pladder@latest/lib/ladder-core.js"></script>
    <script>
        console.log(Ladder);
    </script>        
</body>
</html>

  1. 依赖关系需使用者自行配置
  2. 顺序很重要,很重要

组件类

分类 组件库名称 命名规则 依赖性
容器类 高级表格 DataGrid 原创
容器类 内页选项卡 Intab 原创
容器类 树型框 Tree 原创
容器类 项目选择框 Chooser 原创
容器类 Json编辑器 JsonShow JsonEditor
容器类 图片选择器 ImagePicker 原创
容器类 组织架构 Organize 原创
容器类 明细表 TableSheet 原创
容器类 地图标注 Mapper 百度地图
表单类 自动完成 AutoComplete 原创
容器类 表格选择器 TableCombox 原创
容器类 富文本编辑 Ueditor Ueditor
容器类 树形选择框 TreeDialog 原创
容器类 日历 Calendar 原创
容器类 地址栏 Address 原创
容器类 图片框 Image 原创
表单类 多选框 checkbox 原创
表单类 单选框 radio 原创
表单类 搜索选择器 SearchSelect 原创
表单类 多行文本 TextField 原创
表单类 日期框 DateBox laydate
表单类 下拉框 Combox 原创
表单类 单行文本 Linetext 原创
容器类 图片上传框 Imageupload 原创
容器类 文件上传框 Uploader 原创
表单类 金额输入框 Money 原创
容器类 表单对话框 FormDialog 原创
容器类 主页主框架 BHome 原创
容器类 主页首框架 UDesktop 原创
容器类 提示框 Tiper 原创
容器类 评价卡 Score 原创
表单类 星级输入框 Stars 原创
容器类 列表格 VerticalTableSheet 原创
容器类 确认框 ConfirmTipper 原创
容器类 按钮组 ButtonGroup 原创
容器类 画廊 PictureBox 原创
容器类 抽屉选项卡 Accordion 原创
容器类 数据块 DataBlock 原创
容器类 片贴 TackTips 原创
容器类 选项卡 TabBox 原创
容器类 复合选项卡 CompoundSelect 原创
容器类 图片浏览 Picture 原创
容器类 通知 Note 原创
容器类 更多高级搜索 MoreQuery 原创
容器类 数据明细 DataView 原创
容器类 列表表格 ListGrid 原创
容器类 引导 Leader 原创
容器类 侧滑框 Sider 原创
容器类 聊天对话 Chat 原创