CodeMirror与jquery UI-Tabs混合使用 注意事项

简介:
第一步:.将代码高亮渲染
第二步:jquery Tab输出;
第三步:点击Tab切换时,将代码块刷新;

具体操作:
1.在jQuery tabs之前,创建CodeMirror实例:如:
var tocm = document.getElementById("codifyme"); 
$("#tabifyme").tabs();
CodeMirror.fromTextArea(tocm);

需将第三句与第二句位置互换,像下面这样:
vartocm=document.getElementById("codifyme"); 
CodeMirror.fromTextArea(tocm);
$("#tabifyme").tabs();



2.在点击jQuery tabs时,在Tab被激活时,刷新编辑器:
$("#tabifyme").tabs({
    activate:function(event,ui){
        // activate event is fired every time a tab is selected
        // refresh CodeMirror to ensure that its contents display correctly
        cminst.refresh();
    }
}); 
var tocm=document.getElementById("#codifyme");    
var cminst=CodeMirror.fromTextArea(tocm); 

摘自:http://jtmorris.net/2013/06/codemirror-editor-not-displaying-default-value/
目录
相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1395 0
|
8月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
57 4
|
JavaScript
jQuery学习(三)—jQuery使用步骤以及注意事项
jQuery学习(三)—jQuery使用步骤以及注意事项
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
JavaScript
jquery实现状态灯转换的注意事项
jquery实现状态灯转换的注意事项
52 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
178 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
380 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
264 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
188 0
|
JavaScript
jQuery UI 自定义样式的日历控件
在线演示 本地下载
1298 0