我发起并创立了一个 Javascript 前端库 开源项目 jWebForm

时间:2023-03-09 00:39:24
我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

在线演示地址:

( 在线演示 云平台 由 Kooboo 提供  https://www.kooboo.com/ )

按钮:      http://iwebform.kgeking.kooboo.site/jWebForm-master/Button.htm

下拉:      http://iwebform.kgeking.kooboo.site/jWebForm-master/DropDown.htm

下拉框:    http://iwebform.kgeking.kooboo.site/jWebForm-master/DropDownList.htm

PictureBox:       http://iwebform.kgeking.kooboo.site/jWebForm-master/PictureBox.htm

动态创建添加控件:   http://iwebform.kgeking.kooboo.site/jWebForm-master/DynamicCreateControl.htm

下拉菜单:          http://iwebform.kgeking.kooboo.site/jWebForm-master/DropMenu.htm

文本编辑器:       http://iwebform.kgeking.kooboo.site/jWebForm-master/EditArea.htm

文本编辑器(自适应窗口大小):  http://iwebform.kgeking.kooboo.site/jWebForm-master/EditArea_Fit_Window.htm

可拖拽对象:       http://iwebform.kgeking.kooboo.site/jWebForm-master/DragObj.htm

可拖拽对话框:       http://iwebform.kgeking.kooboo.site/jWebForm-master/DragDialog.htm

可拖拽 PictureBox:       http://iwebform.kgeking.kooboo.site/jWebForm-master/DragPictureBox.htm

多窗口 MDI 模块化:      http://iwebform.kgeking.kooboo.site/jWebForm-master/MultiWindow_MDI_Modulize/Main.html

复杂界面 通常 用 模块化 的 方式开发 。

PictureBoxFit (适应图片自身比例的 PictureBox):   http://iwebform.kgeking.kooboo.site/jWebForm-master/PictureBoxFit.htm

DragPictureBoxFit (可拖拽 PictureBoxFit):   http://iwebform.kgeking.kooboo.site/jWebForm-master/DragPictureBoxFit.htm

ContextMenu (右键菜单):          http://iwebform.kgeking.kooboo.site/jWebForm-master/ContextMenu.htm

jWebForm  的 实际应用 还可参考 《我发起并创立了一个 EPWA 的 开源项目》  https://www.cnblogs.com/KSongKing/p/10745935.html  。

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm  。

起因是我前几天写了一篇文章《.Net Core 没有 WebForm 是 历史 的 退步》

https://www.cnblogs.com/KSongKing/p/10293643.html

然后有网友说, 现在都是 前端渲染 了,

然后想了一下, 觉得可以把 2 者 想法 结合 起来,  写一个 可以用 WebForm 控件 方式 在 Html 里 写控件 的 前端库,  这就是  jWebForm  。

项目地址 :

https://github.com/kelin-xycs/jWebForm

目前支持  按钮(Button), 下拉框(DropDownList), PictureBox(可以播放图片), 下拉菜单(DropMenu)   4 种 控件,

以及 动态 创建 控件 并 添加 到 Html Dom 中 。

项目里的文件如下 :

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

jWebForm.js, jWebForm.css  是 jWebForm 的 库文件,  引用 这 2 个 文件 就可以使用  jWebForm  。

Button.htm 是 按钮 的 示例, DropDownList.htm 是 下拉框 示例, PictureBox.htm 是 PictureBox 的 示例, DynamicCreateControl.htm 是 动态创建控件并添加到 Html Dom 的 示例 。

我们来看看代码 :

按钮 :

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

……

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

下拉框 :

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

……

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

看图中的  Page_Load,  和  WebForm  的 Page_Load  一样  。

PictureBox :

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

……

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

动态创建控件 并 添加到 Html Dom :

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

我发起并创立了一个 Javascript 前端库 开源项目  jWebForm

通过 Element() 属性(函数)返回 Control 最外层 的 Element,添加到 Html Dom 就可以了  。

下拉菜单(DropMenu) 是 后来新增的, 看 DropMenu.htm 示例 就可以 。

jWebForm 不打算提供 表格控件(比如像 Asp.net WebForm 里的 GridView 那样),  开发人员 可以自己写一个 Util 类 来 实现类似 GridView 的 数据绑定为表格 的 功能,  可以用 jWebForm 提供的 动态创建控件 的 方式 动态创建 jWebForm Control 并添加到 Html Dom 里,  这种方式 是  简单 直观 * 透明  的  。

Html 的 <table /> 元素(table 对象) 是一个  简单 直观 易用  的 表格对象,  开发人员 自己写一个  Util 类 来 绑定数据 生成 table 对象 就可以  。

jWebForm 也不打算提供 布局控件,  开发人员 自己 用  Html + Css + Js  来 布局 是 简单 直观 * 透明 的  。

jWebForm 的 特点 就是 几乎没有什么侵入性 。  可以和  Html + Css + Js  混合使用 。

这就是 “库”(Lib) 的 观念,  按需取用库, 即插即用, 即拔即无 。  而不像框架,  动不动先整个框架给你套起来 。

我之前还写过一个 Js 库  jlet ,    也可以看看 :     https://www.cnblogs.com/KSongKing/p/9455238.html         。