github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

code组件优化：添加了是否显示行号；优化右上角的 about；更新了 examples/code

pull/1058/head
Jack 2 years ago
parent
fc689186db
commit
8e9b793b0e
3 changed files with 81 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 63
      examples/code.html
  2. 18
      src/css/modules/code.css
  3. 27
      src/modules/code.js

63
examples/code.html
Unescape View File

@ -14,7 +14,27 @@ pre{margin-bottom: 20px;}
</head>
<body>
<pre class="layui-code" lay-title="JavaScript" lay-height="300px">
<pre class="layui-code" lay-title="JavaScript" lay-line-no="true" lay-height="300px">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
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 id="line-no">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@ -34,7 +54,7 @@ LAY.fn.router = function(hash){
};
</pre>
<pre class="layui-code" lay-skin="notepad">
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@ -54,21 +74,28 @@ LAY.fn.router = function(hash){
};
</pre>
<pre class="layui-code">
<pre class="layui-code" lay-line-no="true">
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code">
<pre class="layui-code" lay-title="不显示行号">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-line-no="true">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
</pre>
</pre>
</pre>
<pre class="layui-code" lay-skin="notepad">
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
@ -86,19 +113,19 @@ LAY.fn.router = function(hash){
}
return param;
};
<pre class="layui-code" lay-skin="notepad">
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-skin="notepad">
<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">
<pre class="layui-code" lay-skin="notepad" lay-line-no="true">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
@ -110,18 +137,36 @@ var item, param = {
</pre>
<pre class="layui-code" lay-encode="true">
<pre class="layui-code" lay-encode="true" lay-line-no="true">
<div>
123
</div>
</pre>
<pre id="about">
about
</pre>
<script src="../src/layui.js"></script>
<script>
layui.use('code', function(){
layui.code();
layui.code({
elem: '#line-no',
title: 'JavaScript（不显示行号）',
lineNo: false,
height: '300px'
});
layui.code({
elem: '#about',
title: '右侧 About',
about: 'code'
})
});
</script>

18
src/css/modules/code.css
Unescape View File

@ -11,18 +11,20 @@ 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-h3{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
.layui-code-h3 a{position: absolute; right: 10px; top: 0; color: #999;}
.layui-code-view .layui-code-ol{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:first-child{padding-top: 10px;}
.layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;}
.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-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:first-child, .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 pre{margin: 0;}
/* notepadd++ 风格 */
.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
.layui-code-notepad .layui-code-h3{border-bottom: none;}
.layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;}
.layui-code-notepad > .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-notepad > .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;}

27
src/modules/code.js
Unescape View File

@ -17,8 +17,7 @@ layui.define(['util'], function(exports){
options = options || {};
options.elem = $(options.elem||'.layui-code');
options.lang = 'lang' in options ? options.lang : 'code';
options.elem.each(function(){
elems.push(this);
});
@ -26,22 +25,30 @@ layui.define(['util'], function(exports){
layui.each(elems.reverse(), function(index, item){
var othis = $(item);
var html = trim(othis.html());
var about = othis.attr('lay-about') || options.about || (
othis.attr('lay-lang') || options.lang
) || '';
var about = othis.attr('lay-about') || options.about || othis.attr('lay-lang') || options.lang || '';
//是否显示行号
var lineNo;
if(othis.attr('lay-line-no'))
{
lineNo = othis.attr('lay-line-no').toLowerCase() === 'true';
}
lineNo = options.lineNo === undefined ? lineNo === undefined ? false : lineNo : options.lineNo;
// 转义 HTML 标签
if(othis.attr('lay-encode') || options.encode){
html = util.escape(html);
}
othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>')
var list = lineNo ? 'ol' : 'ul';
othis.html('<' + list + ' class="layui-code-' + list + '"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></' + list + '>');
if(!othis.find('>.layui-code-h3')[0]){
othis.prepend('<h3 class="layui-code-h3">'+ (othis.attr('lay-title')||options.title||'&lt;/&gt;') + '<a href="javascript:;">'+ about +'</a>' + '</h3>');
if(!othis.find('>.layui-code-title')[0]){
var aboutWrapper = about === '' ? '' : '<div class="layui-code-about">' + about + '</div>';
othis.prepend('<div class="layui-code-title">' + (othis.attr('lay-title') || options.title || '&lt;/&gt;') + aboutWrapper + '</div>');
}
var ol = othis.find('>.layui-code-ol');
var ol = othis.find('>.layui-code-' + list);
othis.addClass('layui-box layui-code-view');
//识别皮肤

Write Preview
Loading…
Cancel
Save