![](E:\GeChier\WLadder\logo.jpg)

## 简介



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引用实例

```html
<!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可以不进行引用，但是可能出现页面组件渲染抖动的问题

#### 普通引用实例

```html

<!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|原创|


