一种修改前端框架中样式的方法及系统技术方案

本发明专利技术涉及网页样式的修改，尤其涉及一种修改前端框架中样式的方法及系统。本发明专利技术通过修改easyui框架的源代码，修改源代码中对样式的定义，从而丰富easyui样式，可以有效拓展easyui的样式，使得网页样式看起来更美观。

Method and system for modifying style in front end frame

The invention relates to a modification of a web page style, in particular to a method and a system for modifying styles in a front-end frame. By modifying the source code of the easyUI frame, the invention modifies the definition of the style in the source code, thereby enriching the easyUI style, effectively expanding the style of the easyUI, and making the webpage pattern look more beautiful.

【技术实现步骤摘要】
一种修改前端框架中样式的方法及系统
本专利技术涉及网页样式的修改，尤其涉及一种修改前端框架中样式的方法及系统。
技术介绍
一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合，用户可以在设计中使用它们，利用框架，可以花最少的力气创建响应式且符合标准的网站，常用的前端框架：Bootstrap，jQueryUI，jQueryMobile，SenchaExtJS，DojoMobile。其中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框架后的菜单栏。本专利技术一个较佳的的实施例中，网页样式包括菜单栏位置。本专利技术一个较佳的的实施例中，网页样式包括边缘长、宽、高。本专利技术一个较佳的的实施例中，网页样式包括网页背景颜色。本专利技术一个较佳的的实施例中，网页样式包括网页背景图像。上述实施例中，使用自定义的样式覆盖原easyui框架中的样式，从而丰富使用easyui框架网页的样式的源代码可以如图3所示。实施例二一种修改前端框架中样式的系统，应用于JqueryeasyUI前端框架中，如图4所示，系统包括：查找模块，用以查找easyUI库中网页样式对应的css元素；编写模块，连接查找模块，用以编写第一css文件，其中，第一css文件对应css元素的新样式；加载模块，分别连接查找模块和编写模块，用以加载easyUI库中的css文件，并且加载第一css文件，以使新样式覆盖JqueryeasyUI前端框架的样式。本实施例通过修改easyui框架的源代码，修改源代码中对样式的定义，从而丰富easyui样式，可以有效拓展easyui的样式，使得网页样式看起来更美观。通过说明和附图，给出了具体实施方式的特定结构的典型实施例，基于本专利技术精神，还可作其他的转换。尽管上述专利技术提出了现有的较佳实施例，然而，这些内容并不作为局限。对于本领域的技术人员而言，阅读上述说明后，各种变化和修正无疑将显而易见。因此，所附的权利要求书应看作是涵盖本专利技术的真实意图和范围的全部变化和修正。在权利要求书范围内任何和所有等价的范围与内容，都应认为仍属本专利技术的意图和范围内。本文档来自技高网...

【技术保护点】
一种修改前端框架中样式的方法，其特征在于，应用于JqueryeasyUI前端框架中，所述方法包括：步骤S1，查找easyUI库中网页样式对应的css元素；步骤S2，编写第一css文件，所述第一css文件对应所述css元素的新样式；步骤S3，加载所述easyUI库中的css文件；步骤S4，加载所述第一css文件，以使所述新样式覆盖所述JqueryeasyUI前端框架的样式。

【技术特征摘要】
1.一种修改前端框架中样式的方法，其特征在于，应用于JqueryeasyUI前端框架中，所述方法包括：步骤S1，查找easyUI库中网页样式对应的css元素；步骤S2，编写第一css文件，所述第一css文件对应所述css元素的新样式；步骤S3，加载所述easyUI库中的css文件；步骤S4，加载所述第一css文件，以使所述新样式覆盖所述JqueryeasyUI前端框架的样式。2.根据权利要求1所述的修改前端框架中样式的方法，其特征在于，所述网页样式包括菜单栏位置。3.根据权利要求1所述的修改前端框架中样式的方法，其特征在于，所述网页样式包括边缘长、宽、高。4.根据权利要求1所述的修改前端...

【专利技术属性】
技术研发人员：黄彬，朴东国，方智强，何伟，赵康德，
申请(专利权)人：上海华测导航技术股份有限公司，
类型：发明
国别省市：上海,31