自定义控件-自定义按钮原创
13人赞赏了该文章
3,553次浏览
编辑于2021年03月09日 17:41:14
![summary-icon](https://cdn-vip.kingdee.com/statics/webfront/summary_icon.png)
本文介绍了如何在一个网页项目中,通过HTML、CSS和JavaScript(利用KDApi和jQuery)来创建和使用一个自定义按钮控件。首先定义HTML中的按钮元素和CSS样式,然后在index.js中通过KDApi注册自定义控件,并在控件的生命周期函数中加载CSS、HTML模板,并绑定点击事件。点击按钮会弹出"hello world"的浏览器提示框。文章还强调了在添加自定义控件时,确保id一致的重要性。
创作不易,如果文章对您有帮助,请为我点击一个朴实无华的赞^_^,我会更有动力地更新文章。
代码请查看附件
效果如下,添加一个自定义按钮,点击这个按钮,弹出浏览器提示框
实现思路:
1.创建.html文件,定义一个按钮
2.创建.css文件,定义按钮样式
3.创建index.js,并使用KDApi
4.在页面添加一个自定义控件
5.自定义控件新增控件方案,要注意id必须和index.js中的id一致
6.自定义控件使用新增的控件方案
testbt.html使用button标签定义一个按钮
<div> <button id="button" class="testbt" >快点我</button> </div>
testbt.css定义按钮样式
.testbt{ width: 200px; height: 50px; }
index.js
/** * 自定义控件书写模板 */ (function(KDApi, $){ // 构造函数,变量名随意,与最后一句代码的KDApi.register的第二个参数一致即可 function testbt (model) { this._setModel(model) } // 原型中封装生命周期函数,固定格式 testbt.prototype = { _setModel: function(model) { this.model = model }, init: function(props){ // TO DO initFunc(this.model, props) }, update: function(props){ // TO DO }, destoryed: function(){ // TO DO } } var initFunc = function(model, props) { // KDApi.loadFile可以通过路径加载js或css文件,并且在html文件头生成script或者link标签,第一个参数是路径,第二个参数是model,第三个参数是加载完成后执行的回调函数 KDApi.loadFile('./css/testbt.css', model, function() { // 通过路径去获取html字符串,第一个参数是路径,第二个参数是model,第三个参数是HTML模板中变量的值 KDApi.getTemplateStringByFilePath('./html/testbt.html', model, { //text: '' }).then(function(result) { model.dom.innerHTML = result initEvent(model, props) }) }) } var initEvent = function(model, props){ //内置了jquery对象,可直接使用$ $('.testbt', model.dom).click(function(){ // model.invoke,用于给后端发送请求,第一个参数是事件名,可自定义;第二个参数是发送给后端的数据,可以是任意类型 // model.invoke('click', 'Hello World!') alert("hello world"); }) } // KDApi注册一个id号,这个id号要和控件方案的id号对应 KDApi.register('clickbt', testbt) })(window.KDApi, jQuery) // 这里的jQuery不是必须要传进去的,可移除,要用到的时候才传,PC端系统默认会有jQuery对象,版本是1.12.4
页面添加一个自定义控件
新增控件方案
自定义控件使用刚刚新增的控件方案
clickbt.zip(1.77KB)