我發起並創立了一個 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 中 。

 

項目里的文件如下 :

 

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         。

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM