js 公式编辑器 - 自定义匹配规则 - 带提示下拉框(7)
调用获取坐标方法
// 调用获取坐标方法 show(elem) $(this).keyup(function(){ show(this); }); // 调用 kingwolfofsky, 获取光标坐标 function show(elem) { var p = kingwolfofsky.getInputPositon(elem); var s = _this.dropdown.get(0); var ttop = parseInt(_this.css("marginTop")); var tleft = parseInt(_this.css("marginLeft")); s.style.top = p.bottom-ttop+10+'px'; s.style.left = p.left-tleft + 'px'; }
js代码 -- 设置默认参数
var defaults = { triggerCharacter : '$', // 默认触发事件 字符 levelCharacter: '.', // 默认多层检索触发字符 dropdownWidth:'150px' // 下拉框默认宽度 };
js代码 -- 插件调用
此处只为展示效果 在 keyPressAction 中能自定义匹配规则进行拓展
$("#test").editTips({ triggerCharacter : '$', levelCharacter: '.', dropdownWidth:'150px', keyPressAction:function(selectVal,callbacktips){ var arr_json; if( selectVal == "" ){ arr_json = ["a","ab","b","bb"] } if(selectVal && selectVal.indexOf("a")== 0){ arr_json = ["a","ab"]; } if(selectVal && selectVal.indexOf("b")== 0){ arr_json = ["b","bb"]; } if(selectVal && selectVal.indexOf("a.")== 0){ arr_json = ["a.a","a.b","a.c"]; } if(selectVal && selectVal.indexOf("b.")== 0){ arr_json = ["b.a","b.b","b.c"]; } if(selectVal && selectVal.indexOf("ab.")== 0){ arr_json = ["ab.a","ab.b","ab.c"]; } if(selectVal && selectVal.indexOf("bb.")== 0){ arr_json = ["bb.a","bb.b","bb.c"]; } callbacktips(arr_json); } });
由于代码比较多,这里就不展示所有代码了,最终效果图:
在此附上demo下载链接:
不管你信不信,我已经设置了下载口令,亲们必须在心里说出我的一个优点才能点击下载~
下载demo
总结
以上所述是小编给大家介绍的js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!