精华内容
下载资源
问答
  • xhEditor使用指南

    千次阅读 2015-11-10 11:20:04
    为了文章的排版布局如word文档编辑器一样美观方便,如:加粗、下划线左右对齐等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率。在这个需求的背景下,HTML在线编辑器就应运而生了...

    在Web程序应用中,经常会有编辑文章等需求。为了文章的排版布局如word文档编辑器一样美观方便,如:加粗、下划线、左右对齐等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率。在这个需求的背景下,HTML在线编辑器就应运而生了。

    1、导入JS库

    您可以访问xhEditor官方网站下载最新版本的xhEditor编辑器,xhEditor官方网站地址为:http://xheditor.com/,打开右上角的免费下载 | 代码向导链接,即可找到最新版本的下载地址。xhEditor无需任何安装,无需任何设置,直接解压缩并拷贝到你的网站相应文件夹下面即可直接调用。

    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="js/xheditor_langzh-cn.js"></script>
    注:jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改

    2、HTML实现可视化的文本框textarea

    <form id="frmDemo" method="post" action="">
    <span style="white-space:pre">	</span><textarea id="elm1" name="elm1" style="width: 860px; height: 180px; display: none;">Hello xhEditor!</textarea>
    </form>
    在需要实现可视化的文本框textarea属性中添加:
     class="xheditor {skin:'default'}"
    注:前面主参数也可以是xheditor-mfull、xheditor-mini或xheditor-simple,分别加载多行完全、迷你和简单工具栏。后面大括号用来定义更多的初始化参数,可以省略。

    3、xhEditor的调用

    通过js调用xheditor插件
    <script>
    $('#elm1').xheditor();
    $('#elm1').xheditor({
    	tools:'full',
    	skin:'default',
    	showBlocktag:true,
    	internalScript:false,
    	internalStyle:false,
    	width:300,
    	height:200,
    	loadCSS:'http://xheditor.com/test.css',
    	fullscreen:true,
    	sourceMode:true,
    	forcePtag:true,
    	upImgUrl:"upload.php",
    	upImgExt:"jpg,jpeg,gif,png"
    	});
    </script>

    xhEditor提供两种方式初始化编辑器:

    • 方法1:利用class属性来初始化和传递各种初始化参数,例:
       class="xheditor {skin:'default'}"
    • 方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例:
      $('#elm1').xheditor(); 
      或者 
      $('#elm1').xheditor({tools:'mini'});

    特别说明:两种初始化方法只能选择其中一种使用,如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。

    我们更倾向于推荐大家使用方法1,因为更简单易用,不涉及任何的Javascript代码。通过简单的参数设置即可定制各种效果的编辑器界面,简单易用且功能强大。

    如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。

    xhEditor也提供了即时的卸载编辑器方法:

    $('#elm1').xheditor(false);

    4、初始化的参数列表

    1. tools:自定义工具按钮

      参数值:full(完全),mfull(多行完全),simple(简单),mini(迷你) 
      或者自定义字符串,例如:'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About' 
       
      完整按钮表: 
      |:分隔符 
      /:强制换行 
      Cut:剪切 
      Copy:复制 
      Paste:粘贴 
      Pastetext:文本粘贴 
      Blocktag:段落标签 
      Fontface:字体 
      FontSize:字体大小 
      Bold:粗体 
      Italic:斜体 
      Underline:下划线 
      Strikethrough:中划线 
      FontColor:字体颜色 
      BackColor:字体背景色 
      SelectAll:全选 
      Removeformat:删除文字格式 
      Align:对齐 
      List:列表 
      Outdent:减少缩进 
      Indent:增加缩进 
      Link:超链接 
      Unlink:删除链接 
      Img:图片 
      FlashFlash动画 
      MediaWindows media player视频 
      Emot:表情 
      Table:表格 
      Source:切换源代码模式 
      Preview:预览当前代码 
      Print:打印 
      Fullscreen:切换全屏模式 
      About:关于xhEditor
    2. skin:皮肤风格选择

      参数值:default(默认风格),o2007blue(Office2007蓝色),o2007silver(Office2007银色),vista(Vista),nostyle(NoStyle)
    3. layerShadow:阴影的深度(按钮面板和模式窗口的背景阴影)

      参数值:0(不显示阴影),大于0的数值(显示阴影并设置阴影的深度)
    4. clickCancelDialog:点击任意位置取消按钮面板功能

      参数值:默认true(开启点击取消功能),false(关闭点击取消功能,必需要点击“取消”按钮才能关闭按钮面板)
    5. showBlocktag:显示段落标签

      参数值:true(显示段落标签),false(不显示)
    6. linkTag:样式链接link标签保留状态

      参数值:true(保留样式链接link标签),false(清理样式链接link标签)
    7. internalScript:内部JS代码保留状态

      参数值:true(保留内部JS代码),false(清理内部JS代码)
    8. inlineScript:内联JS代码保留状态

      参数值:true(保留内联JS代码),false(清理内联JS代码)
    9. internalStyle:内部样式保留状态

      参数值:true(保留内部样式),false(清理内部样式)
    10. inlineStyle:内联样式保留状态

      参数值:true(保留内联样式),false(清理内联样式)
    11. width:编辑器宽度

      参数值:不带单位的数字,例:300
    12. height:编辑器高度

      参数值:不带单位的数字,例:100
    13. loadCSS:加载样式

      参数值:URL地址、URL数组以及直接内部样式,例如:'1.css'、['1.css','2.css']、'<style>body{font-size:20px;}</style>'<br />备注:1.0.0 RC3新添加加载内部样式功能
    14. fullscreen:默认全屏显示

      参数值:true(全屏大小),false(标准大小)
    15. sourceMode:默认源代码模式

      参数值:true(源代码模式),false(编辑模式)
    16. forcePtag:强制P标签

      参数值:true(强制使用P标签),false(不强制),默认true
    17. forcePasteText:强制将粘贴的内容转换为文本

      参数值:true(强制转文本),false(不转文本),默认false 
      备注:v1.1.0新添加
    18. disableContextmenu:禁用编辑区的右键菜单

      参数值:true(禁用右键菜单),false(不禁用),默认false 
      备注:v1.1.0新添加
    19. editorRoot:编辑器JS文件所在的根路径

      参数值:编辑器所在的根路径,用在某些特殊情况下定位编辑器的根路径,默认为空,读取默认的编辑器根路径 
      备注:v1.1.0新添加
    20. shortcuts:自定义键盘快捷方式

      参数:快捷键对应事件代码的对象数组 
      示例:{'ctrl+enter':function(){$('#frmTest').submit();}} 
      备注:1.0.0 beta2新添加
    21. urlBase:相对URL地址的基地址

      参数:字符串的URL地址,用以解决前后台不在同一路径的资源定位问题 
      备注:1.1.0新添加
    22. urlType:本地URL地址强制转换方式选择

      参数:abs(绝对路径),root(根路径),rel(相对路径) 
      备注:1.0.0 beta2新添加,v1.1.0版中名字由localUrl变更为urlType
    23. emotPath:修改表情图片的URL根路径

      参数:字符串的URL地址,默认为空,指向编辑器路径下的默认表情 
      备注:1.1.0新添加
    24. emotMark:是否在表情img标签上标注emot属性

      参数:true(标注),false(不标注),默认为false 
      说明:若使用了ubb插件,请设置此属性为true 
      备注:1.0.0 beta2新添加
    25. emots:添加自定义表情

      参数:可定义多个JSON对象数组,示例如下:{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{name:'MSN',count:40,width:22,height:22,line:8}} 
              name:表情分组名 
              count:表情数量 
              list:表情列表,例:{test1:'表情1',test2:'表情2'},键名代表文件名,扩展名必需为gif,键值代表alt信息 
              width:单个表情区域宽度,必需大于或等于表情最大宽度 
              height:单表情区域高度,必需大于或等于表情最大高度 
              line:单行显示表情数量 
              说明:countlist必需选其中一个值,注意count模式插入表情imgalt为空 
      备注:1.0.0 beta2新添加
    26. wordDeepClean:Word文档深入清理选项

      参数:true(深入清理),false(不深入清理,保留style样式效果),默认为true 
      说明:若网站应用需要保留更多的Word样式效果,请设置此值为false,不过产生的HTML代码体积会大大增大 
      备注:1.0.0 beta2新添加
    27. hoverExecDelay:悬停自动执行延迟的时间

      参数:数值(单位毫秒),默认为100,设置为-1关闭此功能 
      备注:1.0.0 rc2新添加
    28. defLinkText:超链接的默认文字

      参数值:字符串(默认值:“点击打开链接”) 
      说明:只在不选择任何内容的情况下才会用到这个参数值
    29. modalWidth:showModal弹出窗口的默认宽度

      参数值:数值,默认为350 
      说明:弹出窗口的默认宽度
    30. modalHeight:showModal弹出窗口的默认高度

      参数值:数值,默认为220 
      说明:弹出窗口的默认高度
    31. modalTitle:showModal弹出窗口是否显示上方的标题栏

      参数值:true(显示),false(不显示) 
      说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏
    32. upBtnText:上传按钮的文字

      参数值:任意字符串,默认值:“上传” 
      备注:1.0.0 beta2新添加
    33. html5Upload:是否开启HTML5上传支持

      参数值:true(允许),false(不允许),默认为true允许 
      说明:本功能需要浏览器支持HTML5上传 
      备注:1.0.0Final新添加
    34. upMultiple:允许一次上传多少个文件

      参数值:大于0的数值,默认:99,设置为1关闭多文件上传 
      说明:本功能需要浏览器支持HTML5上传 
      备注:1.0.0 RC3新添加
    35. upLinkUrl:超链接文件上传接收URL

      参数值:接收用户上传的服务器端程序URL,默认留空为禁用超链接上传功能,具体使用方法请参考demo8演示文件 
      注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php
    36. upLinkExt:超链接上传前限制本地文件扩展名

      参数值:超链接上传前限制的文件扩展名列表,默认为:zip,rar,txt,建议与服务端扩展名检查列表一致
    37. upImgUrl:图片文件上传接收URL

      参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件 
      注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php
    38. upImgExt:图片上传前限制本地文件扩展名

      参数值:图片上传前限制的文件扩展名列表,默认为:jpg,jpeg,gif,png,建议与服务端扩展名检查列表一致
    39. upFlashUrl:动画文件上传接收URL

      参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件 
      注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php
    40. upFlashExt:动画上传前限制本地文件扩展名

      参数值:动画上传前限制的文件扩展名列表,默认为:swf,建议与服务端扩展名检查列表一致
    41. upMediaUrl:视频文件上传接收URL

      参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件 
      注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php
    42. upMediaExt:视频上传前限制本地文件扩展名

      参数值:视频上传前限制的文件扩展名列表,默认为:avi,建议与服务端扩展名检查列表一致
    43. onUpload:文件上传成功回调函数

      参数值:成功后需要执行的函数 
      说明:这个函数执行时返回的值为上传程序返回的msg变量,可能为字符串或者数组,若为字符串则直接代表url,若是数组,则必需包含一个url的变量,其它可由可开发者自定义 
      备注:1.0.0 beta2新添加
    44. plugins:自定义按钮之插件扩展

      插件对象的属性解释: 
      c:样式表名称 
      t:插件名字(鼠标在按钮上方时显示) 
      s:快捷方式,例:"ctrl+enter" 
      h:是否鼠标悬停直接执行,1:直接执行(省略当前值代表不直接执行) 
      e:按钮点击后需要执行的代码(省略执行代码,则把当前的插件名作为参数,调用浏览器的execCommand函数) 
       
      特别说明: 
      如果您希望样式表存储在系统自带的模板目录ui.css中,请将插件对象的样式名留空,则会自动按照插件名来调用相应的样式,例如:xhEdtBtnCutxhEdtBtnCopy,其中的CutCopy是插件名 
       
      具体调用方法请参考演示文件夹中的demo9

    5、API函数接口列表

    API接口示例代码:

    var editor=$('#elm1').xheditor({tools:'full',skin:'default'}); 
    editor.focus(); 
    editor.setSource('str') 
    sHtml=editor.getSource() 
    editor.appendHTML('<p>aaa</p>') 
    editor.pasteHTML('<p>aaa</p>') 
    editor.pasteText('str') 
    sHtml=editor.formatXHTML('<b>aaa</b>') 
    editor.toggleSource() 
    editor.toggleFullscreen() 
    alert(editor.settings.upImgExt); 
    editor.settings.upImgExt='txt,doc';

    API接口列表:

    1. focus:使编辑器获得焦点

      无参数
    2. setSource:设置编辑器源代码

      参数1:要设置的源代码内容,例:'<p>aaa</p>'
    3. getSource:返回编辑器格式后的源代码

      无参数
    4. appendHTML:粘贴HTML内容到编辑器结尾处

      参数1:要粘贴的HTML代码,例:'<p>uuu</p>' 
      注:0.9.5版添加
    5. getSelect:返回当前选中的内容

      参数1:返回格式,可选'text'返回文本格式,其它所有值都返回HTML格式
    6. pasteHTML:粘贴HTML内容到编辑器当前光标处

      参数1:要粘贴的HTML代码,例:'<p>uuu</p>' 
      参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)
    7. pasteText:粘贴文本到编辑器当前光标处

      参数1:要粘贴的文本,例:'这里的内容完全原样显示<strong>aaa</strong>' 
      参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)
    8. formatXHTML:格式化XHTML代码

      参数1:需要格式化的HTML代码,例:'<b>aaa</b>',返回'<strong>aaa</strong>' 
      参数2:是否代码缩进换行,true(执行缩进格式化),false(不执行缩进格式化),默认为false
    9. toggleSource:在源代码模式和编辑模式之间切换

      参数1:空(切换),true(显示源代码模式),false(显示编辑模式)
    10. toggleFullscreen:在全屏模式和标准大小之间切换

      参数1:空(切换),true(显示全屏模式),false(显示标准模式)
    11. toggleShowBlocktag:切换块标签显示状态

      参数1:空(切换),true(切换为显示块标签),false(切换为不显示块标签)
    12. addShortcuts:添加快捷键

      参数1:快捷键值,例:'ctrl+enter' 
      参数2:用户按下快捷键后需要响应的程序代码,例:function(){$('#frmTest').submit();} 
      说明:允许为某个相同快捷键值重复添加多个响应代码 
      备注:1.0.0 beta2新添加
    13. delShortcuts:删除快捷键

      参数1:快捷键值,例:'ctrl+enter' 
       
      备注:1.0.0Final新添加
    14. exec:立即执行按钮及插件

      参数1:工具按钮名称(不区分大小写),例:Linkimg 
      说明:此函数可以在插件内部或者外部Javascript代码中进行调用
    15. showModal:显示模式窗口

      参数1:模式窗口的标题title 
      参数2:模式窗口的内容content 
      参数3:模式窗口的宽度参数4:模式窗口的高度参数5:模式窗口关闭时的回调函数onRemove
    16. showIframeModal:显示iframe式的模式窗口

      参数1:模式窗口的标题 
      参数2iframe的地址ifmurl,可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}xheditor_plugins/test.html 
      参数3:提供给目标iframe页面回调用的回调函数,可以在iframe页面中以这样的形式调用:callback('1.gif'); 
      参数4:模式窗口的宽度参数5:模式窗口的高度参数6:模式窗口关闭时的回调函数onRemove
    17. settings:获取或者修改编辑器内部参数

      internalScript:是否清除内部代码 
      inlineScript:是否清除内联代码 
      internalStyle:是否清除内部样式 
      inlineStyle:是否清除内联样式 
      forcePtag:强制使用P标签 
      upLinkUrl:超链接上传接口地址 
      upLinkExt:超链接本地上传扩展限制 
      upImgUrl:图片上传接口地址 
      upImgExt:图片本地上传扩展限制 
      upFlashUrl:动画上传接口地址 
      upFlashExt:动画本地上传扩展限制 
      upMediaUrl:视频上传接口地址 
      upMediaExt:视频本地上传扩展限制 
      beforeSetSource:在设置源代码到编辑器前调用此函数 
      beforeGetSource:从编辑器返回源代码前调用此函数 
      focus:编辑器获得焦点时回调此函数 
      blur:编辑器失去焦点时回调此函数 
       
      注:修改有效变量仅限以上,其它的变量都仅在编辑器初始化时使用

    6、案例完整代码

    以上就是xhEditor可视化编辑器的基本用法,下面我附上整篇完整的代码,有需要的随意拿走
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>xhEditor</title>
    </head>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="js/xheditor_langzh-cn.js"></script>
    <link rel="stylesheet" type="text/css" href="css/ui.css" />
    <body>
    <form id="frmDemo" method="post" action="">
    <textarea id="elm1" name="elm1" style="width: 860px; height: 180px; display: none;">Hello xhEditor!</textarea>
    </form>
    <script>
    $('#elm1').xheditor();
    $('#elm1').xheditor({
    	tools:'full',
    	skin:'default',
    	showBlocktag:true,
    	internalScript:false,
    	internalStyle:false,
    	width:300,
    	height:200,
    	loadCSS:'http://xheditor.com/test.css',
    	fullscreen:true,
    	sourceMode:true,
    	forcePtag:true,
    	upImgUrl:"upload.php",
    	upImgExt:"jpg,jpeg,gif,png"
    	});
    </script>
    </body>
    </html>



    展开全文
  • CSS基本使用总结

    2020-01-12 20:26:06
    文章目录文字水平居中和垂直居中如何设置a标签不带下划线控件右对齐div上下居中控件左右居中控件展示在同一行设置文字超出部分...显示 CSS 样式笔记 文字水平居中和垂直居中 水平居中:在该文字的div设置:text-...


    CSS 样式笔记

    文字水平居中和垂直居中

    • 水平居中:在该文字的div设置:text-align: center;
    • 垂直居中:在该文字的div设置:line-height: 60px; 其中60px为该div的高度

    如何设置a标签不带下划线

    a {
      text-decoration: none;
    }
    

    控件右对齐

    float: right;
    

    div上下居中

    height: 50px;
    line-height: 50px
    

    设置line-height的值和div的高一致

    控件左右居中

    margin: 0 auto;
    

    控件展示在同一行

    display: inline-block
    

    设置文字超出部分…显示

    多行文本

    p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4; /* 可以显示的行数,超出部分用...表示*/
        -webkit-box-orient: vertical;
    }
    

    单行文本

    div1{
       overflow: hidden;    
     	text-overflow: ellipsis;    //超出部分以省略号显示
     	white-space: nowrap;
     	width: 20em;    //用px单位亦可行
     }
    
    展开全文
  • F5在线HTML编辑器 v4.0

    2020-10-06 03:16:47
    1、支持字体、段落、大小、粗体、斜体下划线、上下标、左右与居中对齐等基本文本格式排版; 2、数字、项目编号,减少、增加缩进量自如仿word快速排版模式; 3、支持查找、替换,
  • Maco可视化报表设计器

    2019-06-06 15:26:38
    2.1 创建报表 2.2 数据源管理 2.3 数据 ...对齐方式(左对齐、居中、右对齐) 字体加粗、倾斜、下划线 背景颜色 背景圆角 上下左右边距(相对于标题边的高度、宽度) 2.5 选择项 ...

    记得即时保存正在制作的报表! ! !

    1. 报表设计器功能区简介

    数据连接: 获取数据库数据 → 数据集: 添加数据表(数据库, Excel等) → 我的报表(新建 - 配置) → 预览报表

    2. 报表元素组

    2.0 连接数据

    ① Excel文件直接导入, 如果连接的是数据库数据则需要先进行数据连接(测试连接 → 保存)
    为字段选择合适的模型(维度/度量)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2.1 创建报表

    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2.2 数据源管理

    在进行数据绑定前必须先选择数据源! ! !
    在这里插入图片描述
    在这里插入图片描述

    2.3 数据

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    维度=X轴 度量=Y轴
    多个维度时以最下面一个为X轴

    2.4 标题

    在这里插入图片描述
    标题可配置项:
    标题高度
    标题名称
    标题颜色
    标题尺寸(字体大小)
    对齐方式(左对齐、居中、右对齐)
    字体加粗、倾斜、下划线
    背景颜色
    背景圆角
    上下左右边距(相对于标题边的高度、宽度)

    2.5 选择项

    在这里插入图片描述
    可配置项:
    【选择区】
    是否 开启 选择项
    高度
    【文本】
    颜色
    尺寸(字体大小)
    对齐(左对齐、居中、右对齐)
    风格(字体加粗、倾斜、下划线)
    【背景】
    背景颜色
    圆角(数字越大越圆)
    【边框】
    尺寸(边框线粗细)
    颜色
    【边距】
    上下左右边距(相对于标题边的高度、宽度)

    在这里插入图片描述

    -- 【排序SQL表达式】对选择项内容自定义排序
    case 机构名称  
        when '红海公司' then 1
        when '黄海公司' then 2
        when '蓝海公司' then 3
        when '紫海公司' then 4
        else -1
    end;
    
    -- 推荐使用desc倒序,好处是当有未知字段时,会排到最下面
    case 机构名称
        when '红海公司' then 1
        when '黄海公司' then 2
        when '蓝海公司' then 3
        when '紫海公司' then 4
        else -1
    end
    desc;

    在这里插入图片描述

    -- 多个选择项排序
    case 机构名称
        when '红海公司' then 1
        when '黄海公司' then 2
        when '蓝海公司' then 3
        when '紫海公司' then 4
        else -1
    end
    desc;
    
    case 年份
        when '2018' then 1
        when '2019' then 2
        else -1
    end
    desc;

    在这里插入图片描述

    2.6 基本

    多用于背景色、内边距(相对当图表边)、外边距(相对当图表边)的调整
    在这里插入图片描述

    2.7 边框

    调整边框线的粗线、颜色
    在这里插入图片描述

    2.8 联动

    联动是2个以上图表组件,有相同的维度名称时,切换其中一个图的维度,另一个(或多个图表)维度也自动对应切换
    在这里插入图片描述
    不联动配置:联动配置的是被其它组件联动
    在这里插入图片描述

    2.9 轴线

    例如,下面线图的轴线高度、颜色、文字旋转、字体大小(以及是否自动换行)、分割线颜色
    在这里插入图片描述

    2.10 图形

    是否开启图例,以图便摆放位置,颜色、大小、边距
    提示窗:文字、背景的调整
    每个图的图形会有所不同,常见都有图例、提示窗、以及因图形不同特有一些配置项
    在这里插入图片描述

    2.11 指标

    例如柱线图,配置为左轴为柱,显示销售流水,右轴为线,显示折扣情况,以百分数显示

    要制作柱图、线图时,推荐使用柱线图。因为柱线图有左轴、右轴(柱图、线图没右轴),同时柱线图还可以随时快速调整当柱图,或线图

    2.12 过滤

    可以使用:=等于、<>不等于、>大于、>=大于等于、<小于、<=小于等于、And和、or并
    在这里插入图片描述

    2.13 排序

    在这里插入图片描述
    小技巧:对于制作像售罄率的图,切换季度维度,X轴起始月份也会变化,就要用到ID正序
    例如:Q1是从01月、02月、03月……12月(共12个连续月)
    Q2是04月、05月、06月……12月、01月、02月、03月(12个连续月)

    -- SQL表达式对月倒序
    CASE 月份
    	WHEN '十二月' THEN 12
    	WHEN '十一月' THEN 11
    	WHEN '十月' THEN 10
    	WHEN '九月' THEN 9
    	WHEN '八月' THEN 8
    	WHEN '七月' THEN 7
    	WHEN '六月' THEN 6
    	WHEN '五月' THEN 5
    	WHEN '四月' THEN 4
    	WHEN '三月' THEN 3
    	WHEN '二月' THEN 2
    	WHEN '一月' THEN 1
    	ELSE -1 
    END
    DESC;

    2.14 表配置

    表格宽度100%,锁定列1(像EXCEL一样冻结1列),维度列数为1列

    制作双行表头,2个以上列配置–>合并分组 填写一样的名称,将自动合并成一组

    列宽:相对于当前页面,值越大 越宽值类型:选择 百分数,该列显示 百分数千分位:例如12345元 千分位后为 12,345元;即从个位起每3位一个逗号“,”分隔

    动态标题:使用 {{}} 引用数据源中的维度值
    在这里插入图片描述
    表格组件可以不配置度量,增加维度列数,变表格组件为列表或清单
    表格维度一列为http://****.jpg 或.png 图片URL地址,可用于制作如:TOP排行榜等图

    2.15 列配置

    列宽
    合并分组
    值类型:百分数
    小数位:小数点后几位
    千分位:每三位一个,号(例如:10000 显示为10,000)

    2.16 函数

    可对度量数据进行函数加工展示,目前支持求和、平均值、计数、最大值、最小值等函数
    在这里插入图片描述

    可对维度默认值进行设定(例如:默认显示某一项目或某一月份数据等)
    在这里插入图片描述
    也可默认第一个或最后一个维度默认值:first()或者last()
    在这里插入图片描述

    2.17 预警

    通过值的范围自定义颜色,符号样式大小等配置,起到一定的警示效果
    值范围左边为空,表示-∞,反之右边为空,∞;{{度量}}可引用其他数值

    2.18 浮动

    例如使用图标铵钮组件,制作一个浮动的翻页接钮,当报表使用微信打开查看时就很实用

    【浮动】是否开启浮动
    【对齐】自适应、靠左、靠右、靠上、靠下
    【尺寸】浮动组件的大小,按像素 或者 网格 2选1
    【位置】相对于对齐方式,向上(顶部)、下(底部)、左、右移动的位置

    两个浮动组件效果,制作的上下翻页
    也可制作返回首页、浮动页眉、浮动选择器(例如:让用户方便地选择【直营】【加盟】)、浮动维度查询搜索等

    2.19 提示窗

    2.20 标记线

    配置报表水印

    在这里插入图片描述
    在这里插入图片描述

    var today = new moment().format("YYYY-MM-DD"); //获得当前日期
    VSUtils.watermark({message: username+"<br/>"+today}); //水印内容:当前用户名+当前日期

    在这里插入图片描述

    3. 图表组件

    仪表盘(ECharts控件)

    【仪表板】默认最小值:0,最大值:100,可自定义仪表板最小最大值

    【值域】值百分比0.4红色,是指 -25至25区间(50个单位*0.4=20)即:红色显从 -25 ~ -5(20个单位)都显示红色
    在这里插入图片描述
    图形常用的有:
    【分段数量】下图分10段显示,即仪盘板上-25、-20、-15、-10……共10个刻度【刻度线宽度】下图中仪表盘红、黄、绿线的宽度
    【分割线宽度和长度】下图中刻度-20、-15、-10 边上的"-",即刻度线的粗细【值尺寸】下图中 值 -10% 数字的大小
    在这里插入图片描述

    单值图(基础控件)

    地图组件(ECharts控件)

    可细分为"中国地图-面积预警"和"中国地图-地区指向"
    通过地图组件可显示23个省、4个直辖市、5个自治区、2个特别行政区相应的数值
    但需要对每个区域与省份进行映射,如下图所示
    在这里插入图片描述
    映射后相应省份的值为多个地区之和,如上图中广东显示数值为广州及深圳两个地区之和

    可配置项值域范围,如下图所示:
    在这里插入图片描述

    日历过滤器

    轴线图-线、柱、面积(ECharts控件)

    轴线图组件除了集成柱图、线图功能,可从柱图、线图之间切换外,还有左轴、右轴之分,可以变化成多柱、多线、柱线混合图、柱线堆积图

    百度地图(地图控件)

    自定义脚本控件

    自定义选择过滤器

    表格

    展开全文
  • css总结

    2018-06-06 10:04:24
    )2.div水平居中:margin:0px(上下),auto(左右自动对齐)3.图片和文字水平居中 img 添加属性align="absmiddle"(绝对居中)4.字体加粗:font-weight:bold5. &lt;a&gt;标签去下划线 text-decoration...
    1.背景图片设置:background:url("img.jpg")
    2.div水平居中:margin:0px(上下),auto(左右自动对齐)
    3.图片和文字水平居中 img 添加属性align="absmiddle"(绝对居中)
    4.字体加粗:font-weight:bold
    5.  <a>标签去下划线 text-decoration:none;添加下划线:text-decoration:underline
    6. <a>标签鼠标放上去变色  a:hover{}
    7.<a>标签使用浮动后,继承父类的样式
    8.空隙的兼容问题,可用float解决
    9.首行缩进 text-indent:10px;
    10.内敛块级元素的父元素随着子元素的增加而增加 display:inline-block
    11.图片不重复显示 no-repeat
    12.背景图可以同时插入多张,逗号隔开,同1。background:url("img.jpg") no-repeat ,background:url("img2.jpg") no-repeat right top(right top防止两张图片重叠)
    13.css文件中设置background:url(路径)  路径会默认在css文件夹中
    14.定时器设置 var id=setInterval("function(){}",time),clearInterval(id),id从1开始。setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
    展开全文
  • 文章标题

    2016-11-26 22:33:57
    对齐论文封面的下划线方案一:无框表格+绘制直线 1. 插入合适表格填入内容,居中对齐表格及表格内文字,然后去掉表格的所有边框。(注意:表格文字需要上下、左右都居中) 2. 按住Shift键用绘图工具插入一条...
  • doc docx 输出 epub

    2014-04-20 19:53:35
    产品介绍 语言:java语言开发,...段落属性:对齐方式、首行缩进、行间距、段间距,段落左右缩进、段落背景、段落边框、段落线型等 数学公式,可支持输出mathml语言 图片 目录 等 联系bookonestudio@qq.com...
  • HTML03

    2018-07-11 17:36:08
    文本-位置对齐:居中/左右Font-size:字体大小Font-family:字体类型Font-weight:字体粗细Text-decoration:underline/none;字体-下划线;Letter-spacing:px;字与字的距离Line-height:线行高Line-height:4...
  • python小白,文中若有错误或补充请一定帮我指出!蟹蟹~ python碰到的常见错误 2020-2-7 1.原因:if和elif要对齐!...2.原因:类中init()方法一定是左右各2个下划线! 处理:init(self,…,…) 错...
  • 将鼠标移动到水平标尺上,按住鼠标左键不放,左右移动确定制表符位置 松开鼠标后,出现左对齐制表符,定位在表格化数据前,逐行按下Tab键。 在尾部添加足够的空格 添加下划线! #include<iostream> using ...
  • 设置左右缩进、查找;设置对齐方式;设置剪切、复制和粘贴;设置文件的打开、新建和保存;设置撤消和重复、打印等。 考虑了好久,最终做到的文本设计器是一个单文档的文字编辑器,里面能够实现的功能有:新建、打开...
  • 1、支持字体、段落、大小、粗体、斜体下划线、上下标、左右与居中对齐等基本文本格式排版; 2、数字、项目编号,减少、增加缩进量自如仿word快速排版模式; 3、支持查找、替换,撤消、重做等基本编辑操作; 4、提供...
  • 阅读工具 开卷有益

    2012-03-31 14:07:03
    修复:横屏模式下,左右边界没对齐的Bug 10.修复:横屏模式下,拖拽会压盖进度百分比的Bug 11.修复:横屏模式下,无线滚屏遗留横线的Bug 12.修复:图片ZIP文件中,内部文件没有排序的Bug 13.修复:个别CHM文件...
  • 实例151 设置图片对齐方式 241 实例152 设置背景图片透明度 242 实例153 设置背景颜色 243 7.3 处理图表的边框 244 实例154 隐藏图表边框 244 实例155 图表边框笔触 245 实例156 图表边框颜色 247 7.4 修改图表的...
  • 实例225 在TextBox控件底端显示下划线 实例226 屏蔽TextBox控件上的粘贴功能 实例227 屏蔽TextBox控件上默认的右键菜单 11.3 ComboBox控件应用 实例228 设置ComboBox控件的默认选项为第一项 实例229 将数据表...
  • 实例225 在TextBox控件底端显示下划线 实例226 屏蔽TextBox控件上的粘贴功能 实例227 屏蔽TextBox控件上默认的右键菜单 11.3 ComboBox控件应用 实例228 设置ComboBox控件的默认选项为第一项 实例229 将数据表...
  • 实例225 在TextBox控件底端显示下划线 实例226 屏蔽TextBox控件上的粘贴功能 实例227 屏蔽TextBox控件上默认的右键菜单 11.3 ComboBox控件应用 实例228 设置ComboBox控件的默认选项为第一项 实例229 将数据表...
  • 实例074 使文字具有下划线效果 实例075 指定图标的列表项 3.5 文字特效 实例076 文字的发光效果 实例077 文字的阴影效果 实例078 文字的渐变阴影效果 实例079 文字的图案填充效果 实例080 文字的探照灯效果 ...
  • 实例225 在TextBox控件底端显示下划线 299 实例226 屏蔽TextBox控件上的粘贴功能 300 实例227 屏蔽TextBox控件上默认的右键菜单 301 11.3 ComboBox控件应用 302 实例228 设置ComboBox控件的默认选项为 第一项 302 ...
  •  实例166 使窗体标题栏文字右对齐 218  实例167 没有标题栏也可以更改窗体的大小 219  实例168 设置闪烁的标题栏 220 7.4 设置窗体的背景 221  实例169 设置窗体背景颜色为淡蓝色 221  实例170 设置窗体...
  • 实例051 在TextBox控件底端显示下划线 59 实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox...
  • C#程序开发范例宝典(第2版).part02

    热门讨论 2012-11-12 07:55:11
    实例051 在TextBox控件底端显示下划线 59 实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用...
  • C#程序开发范例宝典(第2版).part13

    热门讨论 2012-11-12 20:17:14
    实例051 在TextBox控件底端显示下划线 59 实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用...
  • 实例051 在TextBox控件底端显示下划线 59 实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用...
  • 实例051 在TextBox控件底端显示下划线 59 实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用...
  • 程序开发范例宝典>>

    2012-10-24 10:41:28
    实例113 使用Timer组件制作左右飘动的窗体 166 实例114 使用Timer组件实现奥运倒计时 167 3.8 ServiceController组件 169 实例115 使用ServiceController组件控制计算机的服务 169 3.9 ImageList组件 ...
  • 实例051 在TextBox控件底端显示下划线 59 实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 ...
  • 实例051 在TextBox控件底端显示下划线 59 实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 ...
  • 能否关掉填充, 或者控制结构域的对齐方式? o 3.11 为什么 sizeof 返回的值大于结构的期望值, 是不是尾部有填充? o 3.12 如何确定域在结构中的字节偏移? o 3.13 怎样在运行时用名字访问结构中的域? o 3.14 程序...

空空如也

空空如也

1 2
收藏数 30
精华内容 12
关键字:

下划线左右对齐