[发明专利]一种可视化网站模版的制作方法

摘要

本发明一种可视化网站模版的制作方法，可以进行自定义多层级嵌套修改布局、跨层级的模块拖放，以及对可视化的控件可以进行可视化编辑；并且可以快速引入共享母版库进行快速的模版制作，可供后续模版制作时反复调用，同时，完全采用js来进行实时操作HTML的dom元素，通过对可视化的控件模块进行拖拽、设置来替换HTML中的元素，相比传统的代码编写模版或者那些操作XML、实时读取数据库的方式的模版制作，在易用性和实时性方便有着明显的提升，而且如果要新增一个模块，只要再建一个文件，添加IH和IF代码就可以了，从而实现了简化、快捷的模块扩展功能。

主权项

一种可视化网站模版的制作方法，其特征在于包括如下步骤：步骤1、制作可视化控件；(1)确定好一个控件的外观后，首先利用基本的HTML语法在控件文件中，根据想要的效果制作出静态HTML字符串，并标记需要进行可视化配置的标签，在标签中添加标示符样式属性，该静态HTML字符串用来展现后面控件拖拽后在显示区域进行展示的效果；(2)利用模版语法在控件文件中，根据静态HTML字符串编写出动态语法字符串，该动态语法字符串的作用是后续模版最终应用后，根据实时的数据源，展示具有静态HTML字符串效果的；(3)在控件文件中，提供一个供实时编辑时展示修改的临时区域，该临时区域可展示静态HTML字符串和动态语法字符串，在该临时区域根据需要修改了静态HTML字符串的可视化配置标签的标示符样式属性后，就可以关联修改动态语法字符串的标签，通过该标示符样式属性关联关系便可实时地改变控件应用后的实时静态效果，同时该临时区域还可以实时提取初始化的静态HTML字符串和动态语法字符串，便于修改后的还原；(4)根据实际的网站功能，可以重复(1)至(3)步骤制作出多种类别、多种展现形式的控件，将这些控件按照不同类别保存入控件库；步骤2、不使用共享母版，只利用独立的可视化控件进行可视化制作一个模版；(1)根据希望展示的模版页面的基本架构，拖动布局控件到模版的可视化编辑区域，编辑区域会根据拖动时填写的布局行数和列数，js代码生成几个行级别的div区域，并控制这些行布局的宽度为目标位置对象即父对象的宽度、高度，通过父对象的高度除以输入布局的行数取整，获得行布局的展现代码；同时要在每个行布局中再构造出列级别的div区域，通过控制这些列布局的高度为所在行布局的高度、宽度，通过所在行布局的宽度除以输入的布局列数再取整，获得列布局的展现代码，这样就将列布局的区域嵌入到行布局区域，再将行布局的代码添加到父对象中，从而在父对象中构造出了几行几列的均匀展现的布局框架的实时展示效果；如果要在某个布局中再嵌套一个多行多列的布局控件，与步骤2的第(1)小步骤操作相同，将当前布局作为父对象，然后构造几行几列的布局代码，添加到当前布局就可以实现布局的任意嵌套；(2)根据实际情况要修改某个布局大小时，可以实时拖动某个布局所在的区域的边框，通过获取鼠标当前操作布局对象的原始坐标和拖拽后的最终坐标进行比对，计算出移动后的目标高度跟宽度并设置到当前布局对象，同时控制兄弟布局的高度，然后根据当前布局和兄弟布局的高度和宽度调整父布局的高度和宽度，因此进行了实时高度和宽度的调整；如果有不想要的多余的布局，可以通过鼠标获取所在布局代码区域对象，将该对象从该布局的父对象中移除，便可以进行布局的数量调整；(3)可视化控件存放在布局位置：从可视化控件库中拖动想要的可视化控件到布局区域，在目标布局区域中，构造出一个可视化控件div块，读取该可视化控件所对应的控件文件，获得该控件文件所包含的静态HTML字符串和动态语法字符串，将静态HTML字符串存放到可视化控件div块中的展现块，将动态语法字符串存放到可视化控件div块中的隐藏域中，然后将可视化控件div块的代码添加到目标布局区域中，目标布局区域就会展示出静态HTML字符串的效果，这样一个控件就存放于模版的布局位置中；(4)可视化控件的位置调整：同步骤2的第(3)小步骤，拖动其他可视化控件到想要的布局，就可以快速的实时展现出想要的效果，如果发现控件的位置不理想，可以拖动相应的控件到其他布局或者相同布局的其他位置，由于可视化控件div块是一个整体的div块，脱离布局区域可以独立存在，所以可以在布局区域内任意移动，通过直接控制可视化控件div块的代码添加到目标布局区域中，就可以将可视化控件div块移动到目标位置；如果发现控件不想要了，可以直接移除可视化控件div块；(5)修改可视化控件的展示效果：拖动后如果要修改可视化控件的展现效果，可以右键进入模块设置界面，弹出一个模态窗口的div层，在div层上会有两块tab标签：可视化编辑区域、代码编辑区域；进入模块设置界面的时候，读取当前编辑的可视化控件的div块，将展现块的内容读取到上述可视化编辑区域，将隐藏域中的内容读取到上述代码编辑区域；在模块可视化区域，读取静态HTML字符串中可编辑的标签进行树形展示，点击具体可编辑的标签的时候，通过js利用对应标签块的标示符寻找到对应dom对象，并展现出可视化需要经常变动的样式属性供编辑，修改了相应的样式属性后，就会立即修改标签块的样式代码，同时会修改代码编辑区域动态语法字符串对应标示符的标签对象的样式属性；如果想直接修改动态语法字符串的代码，可以在代码编辑区域进行修改，修改保存好后，代码编辑区域里的内容会覆盖掉隐藏域的内容，可视化编辑区域的内容会覆盖掉展现块的内容，这样可视化整体编辑区域的展现便可以达到实时改变的效果；修改后的控件还可以继续进行步骤(4)的操作，进行可视化控件的位置调整；(6)通过步骤2的第(1)到第(5)小步骤后，即可展示出一个模版页的静态效果，点击预览通过js获取可视化编辑区域的内容，去除布局的边框后，将可视化区域内容放到新窗口的内容中，这样在新窗口中就能展现一个真正的静态页面效果，从而实现实时预览效果；(7)如果预览效果符合要求，进行保存操作，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将每个控件区域的展现块和隐藏域的内容进行对换，而静态HTML字符串放在了隐藏文本区便于重新编辑时再对换使用，针对动态语法字符串中还存在textarea的情况，对textarea的结束标签进行转义操作，经过保存处理后，就将可视化编辑的代码转化成可以直接应用到实际中的模版文件，生成模版静态页；(8)在步骤(6)若模版整体效果符合复用需要，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将可视化区域的代码保存共享母版库中，不用进行展现块和隐藏域的内容对换，这样一条记录就是一个母版；步骤3、使用共享母版库和可视化控件库，新建一个模版；(1)在进入可视化编辑区域的时候，从共享母版库中加载母版存放到编辑区的共享母版区域中，从共享母版区域中选择符合要求或者相近的母版，拖动到编辑区中，利用ajax去异步读取母版的内容，然后存放到可视化编辑区域，该编辑区域展示出该母版的静态效果；(2)如果发现有些控件不符合要求，可以依照步骤2的内容进行控件、布局的重新调整设置；(3)调整至控件符合要求后，可以进行预览和重新调整，然后进行保存成母版或者保存成可以使用的模版操作；如果预览效果符合要求，可以进行保存操作，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将每个控件区域的展现块和隐藏域的内容进行对换，针对动态语法字符串中还存在textarea的情况，对textarea的结束标签进行转义操作，经过保存处理后，就将可视化编辑的代码转化成可以直接应用到实际中的模版文件，生成模版静态页；(4)若模版整体效果符合复用需要，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将可视化区域的代码保存共享母版库中。