mirror of https://github.com/layui/layui
improve `code` component
贤心
parent
aeb5075e65
commit
09c7dc8517
|
|
@ -1,174 +1,132 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>代码修饰器 - layui</title>
|
<title>Code blocks adorn - Layui</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../src/css/layui.css">
|
<link href="../src/css/layui.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
<style>
|
body{padding: 32px;}
|
||||||
body{padding: 50px 100px;}
|
pre{margin-bottom: 20px;}
|
||||||
pre{margin-bottom: 20px;}
|
</style>
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<pre class="layui-code" lay-title="JavaScript" lay-line-no="true" lay-height="300px">
|
<pre class="layui-code" lay-height="300px">
|
||||||
//路由
|
// 在里面存放任意的文本内容
|
||||||
LAY.fn.router = function(hash){
|
code line
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
code line
|
||||||
var item, param = {
|
code line
|
||||||
dir: []
|
code line
|
||||||
};
|
code line
|
||||||
for(var i = 0; i < hashs.length; i++){
|
code line
|
||||||
item = hashs[i].split('=');
|
code line
|
||||||
/^\w+=/.test(hashs[i]) ? function(){
|
code line
|
||||||
if(item[0] !== 'dir'){
|
code line
|
||||||
param[item[0]] = item[1];
|
code line
|
||||||
}
|
code line
|
||||||
}() : param.dir.push(hashs[i]);
|
code line
|
||||||
item = null;
|
code line
|
||||||
}
|
code line
|
||||||
return param;
|
code line
|
||||||
};
|
code line
|
||||||
|
code line
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre id="line-no">
|
<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
|
||||||
//路由
|
code line
|
||||||
LAY.fn.router = function(hash){
|
code line
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
code line
|
||||||
var item, param = {
|
code line
|
||||||
dir: []
|
code line
|
||||||
};
|
code line
|
||||||
for(var i = 0; i < hashs.length; i++){
|
|
||||||
item = hashs[i].split('=');
|
|
||||||
/^\w+=/.test(hashs[i]) ? function(){
|
|
||||||
if(item[0] !== 'dir'){
|
|
||||||
param[item[0]] = item[1];
|
|
||||||
}
|
|
||||||
}() : param.dir.push(hashs[i]);
|
|
||||||
item = null;
|
|
||||||
}
|
|
||||||
return param;
|
|
||||||
};
|
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
|
<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
|
||||||
//路由
|
code line
|
||||||
LAY.fn.router = function(hash){
|
code line
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
code line
|
||||||
var item, param = {
|
code line
|
||||||
dir: []
|
code line
|
||||||
};
|
code line
|
||||||
for(var i = 0; i < hashs.length; i++){
|
|
||||||
item = hashs[i].split('=');
|
|
||||||
/^\w+=/.test(hashs[i]) ? function(){
|
|
||||||
if(item[0] !== 'dir'){
|
|
||||||
param[item[0]] = item[1];
|
|
||||||
}
|
|
||||||
}() : param.dir.push(hashs[i]);
|
|
||||||
item = null;
|
|
||||||
}
|
|
||||||
return param;
|
|
||||||
};
|
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="layui-code" lay-line-no="true">
|
<pre class="layui-code" lay-title="嵌套">
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
code line
|
||||||
var item, param = {
|
code line
|
||||||
dir: []
|
code line
|
||||||
};
|
code line
|
||||||
<pre class="layui-code" lay-title="不显示行号">
|
<pre class="layui-code" lay-options="{ln: false}">
|
||||||
//代码中的代码
|
code line
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
code line
|
||||||
var item, param = {
|
code line
|
||||||
dir: []
|
<pre class="layui-code">
|
||||||
};
|
code line
|
||||||
<pre class="layui-code" lay-line-no="true">
|
code line
|
||||||
//代码中的代码
|
code line
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
|
||||||
var item, param = {
|
|
||||||
dir: []
|
|
||||||
};
|
|
||||||
</pre>
|
</pre>
|
||||||
</pre>
|
</pre>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
|
<pre class="layui-code" lay-options="{skin: 'dark'}">
|
||||||
//路由
|
code line
|
||||||
LAY.fn.router = function(hash){
|
code line
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
code line
|
||||||
var item, param = {
|
code line
|
||||||
dir: []
|
code line
|
||||||
};
|
code line
|
||||||
for(var i = 0; i < hashs.length; i++){
|
<pre class="layui-code" lay-options="{skin: 'dark'}">
|
||||||
item = hashs[i].split('=');
|
code line
|
||||||
/^\w+=/.test(hashs[i]) ? function(){
|
code line
|
||||||
if(item[0] !== 'dir'){
|
code line
|
||||||
param[item[0]] = item[1];
|
code line
|
||||||
}
|
code line
|
||||||
}() : param.dir.push(hashs[i]);
|
code line
|
||||||
item = null;
|
<pre class="layui-code" lay-options="{skin: 'dark', ln: false}">
|
||||||
}
|
code line
|
||||||
return param;
|
code line
|
||||||
};
|
code line
|
||||||
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
|
code line
|
||||||
//代码中的代码
|
code line
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
code line
|
||||||
var item, param = {
|
|
||||||
dir: []
|
|
||||||
};
|
|
||||||
<pre class="layui-code" lay-skin="notepad" lay-title="不显示行号">
|
|
||||||
//代码中的代码
|
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
|
||||||
var item, param = {
|
|
||||||
dir: []
|
|
||||||
};
|
|
||||||
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
|
|
||||||
//代码中的代码
|
|
||||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
|
||||||
var item, param = {
|
|
||||||
dir: []
|
|
||||||
};
|
|
||||||
</pre>
|
</pre>
|
||||||
</pre>
|
</pre>
|
||||||
</pre>
|
</pre>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<pre class="layui-code" lay-options="{encode: true}">
|
||||||
<pre class="layui-code" lay-encode="true" lay-line-no="true">
|
<div>
|
||||||
<div>
|
123
|
||||||
123
|
</div>
|
||||||
</div>
|
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<pre class="layui-code" lay-about="code">
|
||||||
|
About
|
||||||
|
</pre>
|
||||||
|
|
||||||
<pre id="about">
|
<pre id="custom1">
|
||||||
about
|
custom more about
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
<script src="../src/layui.js"></script>
|
<script src="../src/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
layui.use('code', function(){
|
layui.use('code', function(){
|
||||||
layui.code();
|
// 通用实例，根据元素属性定制化参数
|
||||||
|
|
||||||
layui.code({
|
layui.code({
|
||||||
elem: '#line-no',
|
//about: 'code' // 右上角默认显示 code
|
||||||
title: 'JavaScript（不显示行号）',
|
|
||||||
lineNo: false,
|
|
||||||
height: '300px'
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// custom more about
|
||||||
layui.code({
|
layui.code({
|
||||||
elem: '#about',
|
elem: '#custom1',
|
||||||
title: '右侧 About',
|
about: [
|
||||||
about: 'code'
|
'<a href="javascript:;">复制</a>',
|
||||||
|
'<a href="about:blank" target="_blank">跳转</a>'
|
||||||
|
].join('')
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
/**
|
/**
|
||||||
|
* code
|
||||||
@Name: layui.code
|
|
||||||
@Description：Classic modular front-end UI framework
|
|
||||||
@License：MIT
|
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* 加载就绪标志 */
|
/* 加载就绪标志 */
|
||||||
|
|
@ -12,19 +8,24 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
|
||||||
/* 默认风格 */
|
/* 默认风格 */
|
||||||
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
|
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
|
||||||
.layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
|
.layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
|
||||||
.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #999;}
|
.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #B7B7B7;}
|
||||||
.layui-code-view > .layui-code-ol, .layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
|
.layui-code-about > a{padding-left: 10px;}
|
||||||
|
.layui-code-view > .layui-code-ol,
|
||||||
|
.layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
|
||||||
.layui-code-view > .layui-code-ol > li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
|
.layui-code-view > .layui-code-ol > li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
|
||||||
.layui-code-view > .layui-code-ol > li:first-child, .layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
|
.layui-code-view > .layui-code-ol > li:first-child,
|
||||||
.layui-code-view > .layui-code-ol > li:last-child, .layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
|
.layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
|
||||||
|
.layui-code-view > .layui-code-ol > li:last-child,
|
||||||
|
.layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
|
||||||
.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px; list-style-type: none; *list-style-type: none; background-color: #fff;}
|
.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px; list-style-type: none; *list-style-type: none; background-color: #fff;}
|
||||||
.layui-code-view pre{margin: 0;}
|
.layui-code-view pre{margin: 0;}
|
||||||
|
|
||||||
/* notepadd++ 风格 */
|
/* 深色风格 */
|
||||||
.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
|
.layui-code-dark{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
|
||||||
.layui-code-notepad > .layui-code-title{border-bottom: none;}
|
.layui-code-dark > .layui-code-title{border-bottom: none;}
|
||||||
.layui-code-notepad > .layui-code-ol > li, .layui-code-notepad > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
|
.layui-code-dark > .layui-code-ol > li,
|
||||||
.layui-code-notepad > .layui-code-ul > li{margin-left: 6px;}
|
.layui-code-dark > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
|
||||||
|
.layui-code-dark > .layui-code-ul > li{margin-left: 6px;}
|
||||||
|
|
||||||
/* 代码预览 */
|
/* 代码预览 */
|
||||||
.layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;}
|
.layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;}
|
||||||
|
|
|
||||||
|
|
@ -1,73 +1,99 @@
|
||||||
/**
|
/**
|
||||||
* code
|
* code
|
||||||
* 代码区简易修饰
|
* 代码块简易修饰
|
||||||
*/
|
*/
|
||||||
|
|
||||||
layui.define(['util'], function(exports){
|
layui.define(['lay', 'util'], function(exports){
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var $ = layui.$;
|
var $ = layui.$;
|
||||||
var util = layui.util;
|
var util = layui.util;
|
||||||
|
|
||||||
|
var ELEM_TITLE = 'layui-code-title';
|
||||||
|
|
||||||
|
// 默认参数项
|
||||||
|
var config = {
|
||||||
|
elem: '.layui-code', // 元素选择器
|
||||||
|
title: '</>', // 标题
|
||||||
|
about: '', // 右上角信息
|
||||||
|
ln: true // 是否显示行号
|
||||||
|
};
|
||||||
|
|
||||||
|
var trim = function(str){
|
||||||
|
return $.trim(str).replace(/^\n|\n$/, '');
|
||||||
|
};
|
||||||
|
|
||||||
|
// export api
|
||||||
exports('code', function(options){
|
exports('code', function(options){
|
||||||
var elems = [];
|
var opts = options = $.extend({}, config, options);
|
||||||
var trim = function(str){
|
|
||||||
return $.trim(str).replace(/^\n|\n$/, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
options = options || {};
|
// 目标元素是否存在
|
||||||
options.elem = $(options.elem||'.layui-code');
|
options.elem = $(options.elem);
|
||||||
|
if(!options.elem[0]) return;
|
||||||
|
|
||||||
options.elem.each(function(){
|
// 从内至外渲染
|
||||||
elems.push(this);
|
layui.each(options.elem.get().reverse(), function(index, item){
|
||||||
});
|
|
||||||
|
|
||||||
layui.each(elems.reverse(), function(index, item){
|
|
||||||
var othis = $(item);
|
var othis = $(item);
|
||||||
var html = trim(othis.html());
|
var html = trim(othis.html());
|
||||||
var about = othis.attr('lay-about') || options.about || othis.attr('lay-lang') || options.lang || '';
|
|
||||||
|
|
||||||
//是否显示行号
|
// 合并属性上的参数，并兼容旧版本属性写法 lay-*
|
||||||
var lineNo;
|
var options = $.extend({}, opts, lay.options(item), function(obj){
|
||||||
if(othis.attr('lay-line-no'))
|
var attrs = ['title', 'height', 'encode', 'skin', 'about'];
|
||||||
{
|
layui.each(attrs, function(i, attr){
|
||||||
lineNo = othis.attr('lay-line-no').toLowerCase() === 'true';
|
var value = othis.attr('lay-'+ attr);
|
||||||
}
|
if(typeof value === 'string'){
|
||||||
lineNo = options.lineNo === undefined ? lineNo === undefined ? false : lineNo : options.lineNo;
|
obj[attr] = value;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return obj;
|
||||||
|
}({}));
|
||||||
|
|
||||||
|
// 有序或无序列表
|
||||||
|
var listTag = options.ln ? 'ol' : 'ul';
|
||||||
|
var listElem = $('<'+ listTag +' class="layui-code-'+ listTag +'">');
|
||||||
|
|
||||||
|
// header
|
||||||
|
var headerElem = $('<div class="'+ ELEM_TITLE +'">');
|
||||||
|
|
||||||
|
// 添加组件 clasName
|
||||||
|
othis.addClass('layui-code-view layui-box');
|
||||||
|
|
||||||
|
// 自定义风格
|
||||||
|
if(options.skin){
|
||||||
|
if(options.skin === 'notepad') options.skin = 'dark';
|
||||||
|
othis.addClass('layui-code-'+ options.skin);
|
||||||
|
}
|
||||||
|
|
||||||
// 转义 HTML 标签
|
// 转义 HTML 标签
|
||||||
if(othis.attr('lay-encode') || options.encode){
|
if(options.encode) html = util.escape(html);
|
||||||
html = util.escape(html);
|
html = html.replace(/[\r\t\n]+/g, '</li><li>'); // 转义换行符
|
||||||
|
|
||||||
|
// 生成列表
|
||||||
|
othis.html(listElem.html('<li>' + html + '</li>'));
|
||||||
|
|
||||||
|
// 创建 header
|
||||||
|
if(!othis.children('.'+ ELEM_TITLE)[0]){
|
||||||
|
headerElem.html(options.title + (
|
||||||
|
options.about
|
||||||
|
? '<div class="layui-code-about">' + options.about + '</div>'
|
||||||
|
: ''
|
||||||
|
));
|
||||||
|
othis.prepend(headerElem);
|
||||||
}
|
}
|
||||||
|
|
||||||
var list = lineNo ? 'ol' : 'ul';
|
// 按行数适配左边距
|
||||||
othis.html('<' + list + ' class="layui-code-' + list + '"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></' + list + '>');
|
(function(autoIncNums){
|
||||||
|
if(autoIncNums > 0){
|
||||||
if(!othis.find('>.layui-code-title')[0]){
|
listElem.css('margin-left', autoIncNums + 'px');
|
||||||
var aboutWrapper = about === '' ? '' : '<div class="layui-code-about">' + about + '</div>';
|
}
|
||||||
othis.prepend('<div class="layui-code-title">' + (othis.attr('lay-title') || options.title || '</>') + aboutWrapper + '</div>');
|
})(Math.floor(listElem.find('li').length/100));
|
||||||
}
|
|
||||||
|
// 限制最大高度
|
||||||
var ol = othis.find('>.layui-code-' + list);
|
if(options.height){
|
||||||
othis.addClass('layui-box layui-code-view');
|
listElem.css('max-height', options.height);
|
||||||
|
|
||||||
//识别皮肤
|
|
||||||
if(othis.attr('lay-skin') || options.skin){
|
|
||||||
othis.addClass('layui-code-' +(othis.attr('lay-skin') || options.skin));
|
|
||||||
}
|
|
||||||
|
|
||||||
//按行数适配左边距
|
|
||||||
if((ol.find('li').length/100|0) > 0){
|
|
||||||
ol.css('margin-left', (ol.find('li').length/100|0) + 'px');
|
|
||||||
}
|
|
||||||
|
|
||||||
//设置最大高度
|
|
||||||
if(othis.attr('lay-height') || options.height){
|
|
||||||
ol.css('max-height', othis.attr('lay-height') || options.height);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
}).addcss('modules/code.css?v=2', 'skincodecss');
|
}).addcss('modules/code.css?v=3', 'skincodecss');
|
||||||
|
|
||||||
Loading…
Reference in New Issue