[发明专利]一种修改前端框架中样式的方法及系统

说明书

技术领域

本发明涉及网页样式的修改，尤其涉及一种修改前端框架中样式的方法及系统。

背景技术

一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合，用户可以在设计中使用它们，利用框架，可以花最少的力气创建响应式且符合标准的网站，常用的前端框架：Bootstrap，jQuery UI，jQuery Mobile，Sencha Ext JS，Dojo Mobile。

其中Jqueryeasyui前端框架的easyui是一个基于jquery的插件，开发出来的一套轻量级的ui框架，非常小巧而且功能丰富，是一种基于jQuery的用户界面插件集合。easyui是js框架，对于新手来说直接使用easyui学习会快很多，缺点是样式比较单一。

因为jquery-easyui框架是基于js方法的一个前端框架，样式很少，不能满足网页对样式的需求。

发明内容

针对现有技术存在的问题，现提供了一种修改前端框架中样式的方法及系统。

具体的技术方案如下：

一种修改前端框架中样式的方法，应用于JqueryeasyUI前端框架中，所述方法包括：

步骤S1，查找easyUI库中网页样式对应的css元素；

步骤S2，编写第一css文件，所述第一css文件对应所述css元素的新样式；

步骤S3，加载所述easyUI库中的css文件；

步骤S4，加载所述第一css文件，以使所述新样式覆盖所述JqueryeasyUI前端框架的样式。

优选的，所述网页样式包括菜单栏位置。

优选的，所述网页样式包括边缘长、宽、高。

优选的，所述网页样式包括网页背景颜色。

优选的，所述网页样式包括网页背景图像。

一种修改前端框架中样式的系统，应用于JqueryeasyUI前端框架中，所述系统包括：

查找模块，用以查找easyUI库中网页样式对应的css元素；

编写模块，连接所述查找模块，用以编写第一css文件，其中，所述第一css文件对应所述css元素的新样式；

加载模块，分别连接所述查找模块和所述编写模块，用以加载所述easyUI库中的css文件，并且加载所述第一css文件，以使所述新样式覆盖所述JqueryeasyUI前端框架的样式。

上述技术方案的有益效果是：

上述技术方案通过修改easyui框架的源代码，修改源代码中对样式的定义，从而丰富easyui样式，可以有效拓展easyui的样式，使得网页样式看起来更美观。

附图说明

图1为本发明一种修改前端框架中样式的方法的实施例的流程图；

图2为本发明修改前后的样式对比图；

图3为本发明修改前端框架中样式的实施例的源代码；

图4为本发明一种修改前端框架中样式的系统的实施例的结构示意图。

具体实施方式

需要说明的是，在不冲突的情况下，下述技术方案，技术特征之间可以相互组合。

下面结合附图对本发明的具体实施方式作进一步的说明：

实施例一

一种修改前端框架中样式的方法，应用于JqueryeasyUI前端框架中，如图1所示，方法包括：

步骤S1，查找easyUI库中网页样式对应的css元素；

步骤S2，编写第一css文件，第一css文件对应css元素的新样式；

步骤S3，加载easyUI库中的css文件；

步骤S4，加载第一css文件，以使新样式覆盖JqueryeasyUI前端框架的样式。

本实施例中，要修改网页中某处的样式，找到easyui库中的相应的css元素，另写一个css文件，里面是要修改样式的元素的新样式，先加载easyui库的css文件，再加载自己写的css文件，从而新样式覆盖框架中的样式。

图2是对比修改easyui框架前后的网页菜单页面，左部分是easyui框架自带的菜单栏，样式比较单一，右部分是修改easyui框架后的菜单栏。

本发明一个较佳的的实施例中，网页样式包括菜单栏位置。

本发明一个较佳的的实施例中，网页样式包括边缘长、宽、高。

本发明一个较佳的的实施例中，网页样式包括网页背景颜色。

本发明一个较佳的的实施例中，网页样式包括网页背景图像。