在线演示地址:
( 在线演示 云平台 由 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 中 。
项目里的文件如下 :
jWebForm.js, jWebForm.css 是 jWebForm 的 库文件, 引用 这 2 个 文件 就可以使用 jWebForm 。
Button.htm 是 按钮 的 示例, DropDownList.htm 是 下拉框 示例, PictureBox.htm 是 PictureBox 的 示例, DynamicCreateControl.htm 是 动态创建控件并添加到 Html Dom 的 示例 。
我们来看看代码 :
按钮 :
……
下拉框 :
……
看图中的 Page_Load, 和 WebForm 的 Page_Load 一样 。
PictureBox :
……
动态创建控件 并 添加到 Html Dom :
通过 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 。