系统CSS和JS使用相关说明
目录
商家后台系统下CSS和JS存放位置
- 对商家后台系统进行案例说明
存放在merchant模块下statics目录下 ├── merchant 商家系统模块存放文件夹 │ ├── statics 静态资源存放文件夹 │ │ ├── assets 存储组件 │ │ ├── css 存储系统模块后续增加的css │ │ ├── ecjia 存储系统模块后续增加的js │ │ ├── fonts 字体 │ │ ├── img 存储系统模块中使用到的图片 │ │ ├── lib 存储插件 │ │ ├── mh-css 存储商家后台源框架css文件 │ │ ├── mh-js 存储商家后台源框架js文件
JS加载
后台加载js分为两种模式:
|
预注册加载
例如:需要使用到ecjia-merchant.js文件,如下图所示:
首先需要找到注册文件ecjia_merchant_loader.class.php 的 default_scripts() 方法先进行注册如下图所示:
说明:A:文件路径; B:依赖文件
注册需要调用$scripts->add()方法,该方法具有五个参数如下:
- 为所注册的名称;
- 就是相对应的js文件路径;
- 所依赖的文件,默认array();
- 当前文件的版本号,默认false;
- 加载位置,默认false为头部,1为底部;
例如:
<?php
$scripts->add( 'ecjia-merchant', 'app/merchant/statics/ecjia/ecjia-merchant.js', array('jquery', 'ecjia'),false, false);
此时ecjia-merchant.js文件就注册成功了。
然后就是在使用的地方进行加载,直接用下面该方法调用即可: RC_Script::enqueue_script('所注册的js文件名称');
例如:
<?php
RC_Script::enqueue_script('ecjia-merchant');
然后接下来看一下源代码是否加载成功以及可以看到加载位置,如下图所示:
临时加载
- 无需注册,直接加载
例如:还是需要使用到ecjia-merchant.js文件,如下图所示:
直接用下面该方法调用即可:
<?php
RC_Script::enqueue_script('ecjia-merchant', RC_Uri::admin_url('statics/ecjia/ecjia-merchant.js'),array('jquery', 'ecjia'), false, false);
加载需要RC_Script::enqueue_script()方法,该方法具有五个参数如下:
- 所注册的名称;
- 就是相对应的js文件路径;
- 所依赖的文件,默认array();
- 当前文件的版本号,默认false;
- 加载位置,默认false为头部,1为底部;
然后接下来看一下源代码判断是否加载成功以及可以看到加载位置,如下图所示:
CSS加载
后台加载css分为两种模式:
|
预注册加载
例如:需要使用到bootstrap.min.css文件,如下图所示:
首先需要找到注册文件ecjia_merchant_loader.class.php 的 default_styles() 方法先进行注册如下图所示:
注册需要$styles->add()方法,该方法具有五个参数如下:
- 为所注册的名称;
- 就是相对应的css文件路径;
- 所依赖的文件,默认array();
- 当前文件的版本号,默认false;
- 加载位置,默认false为头部;
例如:
<?php
$styles->add( 'bootstrap', 'app/merchant/statics/mh-css/bootstrap.min.css', array(), false, false);
此时bootstrap.min.css文件就注册成功了。
然后就是在使用的地方进行加载,直接用下面该方法调用即可: RC_Style::enqueue_style('所注册的css文件名称');
<?php
RC_Style::enqueue_style('bootstrap');
然后接下来看一下源代码是否加载成功,一般情况样式都在头部加载哦,如下图所示:
临时加载
- 无需注册,直接加载
例如:还是需要使用到bootstrap.min.css文件,如下图所示:
直接用下面该方法调用即可:
<?php
RC_Style::enqueue_style('bootstrap', RC_Uri::admin_url('statics/mh-css/bootstrap.min.css'), array(), false, false);
加载需要RC_Style::enqueue_style()方法,该方法具有五个参数如下:
- 所注册的名称;
- 就是相对应的js文件路径;
- 所依赖的文件,默认array();
- 当前文件的版本号,默认false;
- 加载位置,默认false为头部;
然后接下来看一下源代码是否加载成功以及可以看到加载位置,如下图所示:
对已注册的JS和CSS移除方法
平台后台JS库则为全局,此时如果商家后台不需要加载某一个,已有自己的文件,那可以进行加载移除,之后再进行加载自己所需文件即可 |
方法如下:
<?php
//js注册移除
$scripts->remove('所注册的js文件名称');
//css注册移除
$styles->remove('所注册css文件名称');
框架默认加载
注:商家后台下可以调后台注册的,不是隔离的,后台JS库则为全局哦; |
- 框架中往往需要一些默认加载的JS和CSS,所以需要把默认加载的JS和CSS写入到load_default_script_style()该方法中如下图所示:
<?php
// 默认加载JS
RC_Script::enqueue_script('所注册的js文件名称');
// 默认加载CSS
RC_Style::enqueue_style('所注册的css文件名称');
框架默认加载统计表
- 默认加载css统计
序号 | 注册名 | 文件路径 | 依赖文件 | 版本号 | 加载位置 |
---|---|---|---|---|---|
1 | googleapis-fonts | content/apps/merchant/statics/mh-css/fonts/fonts.googleapis.css | 无 | 无 | 头部 |
2 | bootstrap | content/apps/merchant/statics/mh-css/bootstrap.min.css | 无 | 无 | 头部 |
3 | bootstrap-reset | content/apps/merchant/statics/mh-css/bootstrap-reset.css | 无 | 无 | 头部 |
4 | ecjia-merchant-ui | content/apps/merchant/statics/mh-css/ecjia-merchant.ui.css | array('bootstrap') | 无 | 头部 |
5 | ecjia-mh-font-awesome | content/apps/merchant/statics/mh-css/font-awesome.min.css | 无 | 无 | 头部 |
6 | ecjia-mh-owl-carousel | content/apps/merchant/statics/mh-css/owl.carousel.css | 无 | 无 | 头部 |
7 | ecjia-mh-owl-theme | content/apps/merchant/statics/mh-css/owl.theme.css | 无 | 无 | 头部 |
8 | ecjia-mh-owl-transitions | content/apps/merchant/statics/mh-css/owl.transitions.css | 无 | 无 | 头部 |
9 | ecjia-mh-table-responsive | content/apps/merchant/statics/mh-css/table-responsive.css | 无 | 无 | 头部 |
10 | ecjia-mh-jquery-easy-pie-chart | content/apps/merchant/statics/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css | 无 | 无 | 头部 |
11 | ecjia-mh-function | content/apps/merchant/statics/mh-css/ecjia.function.css | 无 | 无 | 头部 |
12 | ecjia-mh-page | content/apps/merchant/statics/mh-css/page.css | 无 | 无 | 头部 |
13 | ecjia-mh-chosen | content/apps/merchant/statics/assets/chosen/chosen.css | 无 | 无 | 头部 |
- 默认加载js统计
序号 | 注册名 | 文件路径 | 依赖文件 | 版本号 | 加载位置 |
---|---|---|---|---|---|
1 | jquery | content/apps/merchant/statics/mh-js/jquery-1.11.1.min.js | 无 | 无 | 头部 |
2 | bootstrap | content/apps/merchant/statics/mh-js/bootstrap.min.js | 无 | 无 | 头部 |
3 | jquery-pjax | content/system/statics/js/jquery.js | 无 | 2.1.0 | 头部 |
4 | ecjia-mh-jquery-customSelect | content/apps/merchant/statics/mh-js/jquery.customSelect.min.js | array('jquery') | 无 | 底部(1) |
5 | ecjia-mh-jquery-dcjqaccordion | content/apps/merchant/statics/mh-js/jquery.dcjqaccordion.2.7.min.js | array('jquery') | 无 | 底部(1) |
6 | ecjia-mh-jquery-nicescroll | content/apps/merchant/statics/mh-js/jquery.nicescroll.js | array('jquery') | 无 | 底部(1) |
7 | ecjia-mh-jquery-scrollTo | content/apps/merchant/statics/mh-js/jquery.scrollTo.min.js | array('jquery') | 无 | 底部(1) |
8 | ecjia-mh-jquery-sparkline | content/apps/merchant/statics/mh-js/jquery.sparkline.js | array('jquery') | 无 | 底部(1) |
9 | ecjia-mh-jquery-stepy | content/apps/merchant/statics/mh-js/jquery.stepy.js | array('jquery') | 无 | 底部(1) |
10 | ecjia-mh-jquery-tagsinput | content/apps/merchant/statics/mh-js/jquery.tagsinput.js | array('jquery') | 无 | 底部(1) |
11 | ecjia-mh-jquery-validate | content/apps/merchant/statics/mh-js/jquery.validate.min.js | array('jquery') | 无 | 底部(1) |
12 | ecjia-mh-jquery-easy-pie-chart | content/apps/merchant/statics/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js | array('jquery') | 无 | 底部(1) |
13 | ecjia-mh-jquery-actual | content/apps/merchant/statics/mh-js/jquery-actual.min.js | array('jquery') | 无 | 底部(1) |
14 | ecjia-mh-jquery-migrate | content/apps/merchant/statics/mh-js/jquery-migrate.min.js | array('jquery') | 无 | 底部(1) |
15 | ecjia-mh-jquery-quicksearch | content/apps/merchant/statics/mh-js/jquery.quicksearch.js | array('jquery') | 无 | 底部(1) |
16 | ecjia-mh-morris-script | content/apps/merchant/statics/assets/morris.js-0.4.3/morris.min.js | 无 | 无 | 底部(1) |
17 | ecjia-mh-owl-carousel | content/apps/merchant/statics/mh-js/owl.carousel.js | 无 | 无 | 底部(1) |
18 | ecjia-mh-respond | content/apps/merchant/statics/mh-js/respond.min.js | 无 | 无 | 底部(1) |
19 | ecjia-mh-slider | content/apps/merchant/statics/assets/slider/js/bootstrap-slider.js' | 无 | 无 | 底部(1) |
20 | ecjia-mh-sparkline-chart | content/apps/merchant/statics/mh-js/sparkline-chart.js | 无 | 无 | 底部(1) |
21 | ecjia-mh-themes | content/apps/merchant/statics/mh-js/themes.js' | 无 | 无 | 底部(1) |
22 | ecjia-mh-xchart | content/apps/merchant/statics/mh-js/themes.js' | 无 | 无 | 底部(1) |
23 | ecjia-mh-chosen-jquery | content/apps/merchant/statics/assets/chosen/chosen.jquery.min.js | 无 | 无 | 底部(1) |
24 | ecjia-mh-chart | content/apps/merchant/statics/assets/Chart/Chart.min.js | 无 | 无 | 底部(1) |
25 | jquery-cookie | content/system/statics/js/jquery-cookie.min.js | array('jquery') | 无 | 底部(1) |
26 | js-json | content/system/statics/js/json2.js | 无 | 无 | 底部(1) |
27 | nicescroll | content/system/statics/lib/nicescroll/jquery.nicescroll.js | array('jquery') | 无 | 底部(1) |
28 | jquery-ui-totop | content/system/statics/js/ui/jquery-ui-totop.min.js | array('jquery-ui') | 无 | 底部(1) |
29 | ecjia-merchant | content/apps/merchant/statics/ecjia/ecjia-merchant.js | array('jquery', 'ecjia') | 无 | 头部 |
30 | ecjia-merchant-ui | content/apps/merchant/statics/ecjia/ecjia-merchant-ui.js | array('jquery', 'ecjia') | 无 | 头部 |
特殊场景处理
框架中那些默认加载的js和css并不是所有页面都需要,例如登录页面,还未进入到我们框架中自然不需要那些多余的加载,所以我们只要进行相对应的移除即可。 |
- 首先找到商家后台的登录方法,如下图所示:
罗列出不需要加载的css和js放到一个数组中进行禁止记载。
<?php
//移除css加载
RC_Style::dequeue_style(array());
//移除js加载
RC_Style::dequeue_script(array());