adminXL后台框架基于优秀的ICEUI开发，是一款漂亮的html5后台框架，干净优美，内部拥有十分丰富的js控件，随意调用使用，纯原生开发，无任何依赖，冰清玉洁，高贵典雅！
adminXL不仅展示了ICEUI的基本组件示例，同时也展示了一套Admin后台框架的基本组成，这套后台框架基于PJAX技术开发，PJAX结合了html5的pushState和ajax技术，从而实现了网站无刷新加载的技术，这要比hash更加方便，url上的锚点#对我来说是无法忍受的。
提示：不得恶意分享本产品源代码、二次转售等，违者必究。
本产品在使用过程中如有疑问请联系我QQ：46769985，或加入官方QQ群：324415936
凡是购买本产品的，拥有永久的售后服务，提供技术指导。
如果您未获取授权，请移步这里：https://iceui.cn/product/view/AdminXL
adminXL框架的结构十分简洁，page文件夹不是必须的，用户可自定义，此处用于演示，其它请尽量保持一致。
1. adminXL
adminXL的核心文件，一般无需改动此处，如有需要改动某些iceui的样式，请将样式文件放在style文件夹中，以优先级的方式覆盖需要修改的样式。
2. img 文件夹用于存放图片，应将所有的图片放于此处，方便管理，复杂的功能模块请以模块名称命名，并放于img文件夹下。
3. style 用户自定义的js和css请放入style中。
4. page 文件夹用于存放视图页面（例如html文件），该文件夹的名称不是必须的，包括该文件夹都不是必须的，具体由用户自己定义，这里只举例，但为了保持规范，用户应当将所有的视图页面放于一个文件夹中去管理。
5. index.html 位于项目的根目录，是后台模板，也就是整个后台的页面框架，具体结构请查看源码文件，这里不过多赘述。
6. config.js 是项目的配置文件，具体信息如下。
/** * ------------------------------------------------------------ * adminXL - 全局配置 * ------------------------------------------------------------ */ export var config = { //adminXL项目所在目录，目录结尾必须要有斜杠 //如果部署在根目录中，则应为 host:'/' //如果部署在admin目录中，则应为 host:'/admin/' host:'/doc/', //默认首页 index:'/page/home.html', //默认错误页 error:'/page/error.html', //页面请求的方式，有效值：get、post ajax:'get', //项目是否部署在纯静态环境中，如果没有动态语言支持，纯前后端分离请填写：true static:false, //导航侧栏 sidebar: { //初始化时，默认不展开全部菜单，注意：开启展开时，closeAll参数必须为false spread: false, //点击二级菜单时，展开当前选中菜单，关闭其它已展开的菜单 closeAll: true, //点击二级菜单时，展开与收缩的动画速度，单位毫秒，值越小速度越快 time: 2 } //用户可以在这里自定义添加其它配置项 };第一步一定先打开config.js文件配置一下，每个参数都有详细注释说明，按需求修改即可。
这里需要注意的是static参数，如果在纯html环境下部署（前后端分离，页面视图为纯html，并与adminXL部署在一起），需要设为true。
如果部署在动态语言环境中，页面视图也可以用纯html文件来做，如果由于安全问题怕页面视图文件泄露，可通过伪静态或动态语言提供的路由来屏蔽直链或隐藏真实路径。
本程序推荐部署在动态语言环境中，html视图文件与adminXL放在一起，方便管理，方便迁移到任何环境中，然后通过路由来控制视图，设置伪静态比较安全，链接随意定制化，这里提供一个php版本(apache+php)的简单路由。
.htaccess(伪静态)文件
<IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_URI} ^.*\.html\??.*?$ RewriteRule ^(.*?)([^/]*)$ index.php?$2 [QSA,PT,L] </IfModule>index.php文件
//例如访问：https://xxx.xx/article/list.html //假设视图文件真实路径为：/admin/page/article/list.html，用户并不知道视图文件的路径，视图文件也可以为php文件 //判断是否为Ajax请求 $ajax = (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower(trim($_SERVER['HTTP_X_REQUESTED_WITH'])) == 'xmlhttprequest'); //通过获取URL信息拼接视图文件路径 //实际用到REQUEST_URI时，还是应该做一些处理的，用户可能在url附带参数，例如：https://xxx.xx/article/list.html?page=3 $viewFile = '/admin/page'.$_SERVER['REQUEST_URI']; //判断视图文件是否存在 if(is_file($viewFile)){ //引入视图文件 include $viewFile; exit; }不管是php还是其它编程语言，一般都可以通过请求头的X-Requested-With参数来判断是否为ajax，这里不做过多的赘述。
此处假设为前后端分离的项目，那么前端的静态页面编写十分简单，只需要单独的写【后台框架内容区】的代码即可。
模板示例：
<script type="module" src="../adminXL/page.js"></script>例如编写一个文章管理的功能模块，html文件：/page/article.html
这是一个简单的通用示例。
a链接规范：请尽量使用【绝对路径】来设置a标签的url链接，如果adminXL放在了二级目录demo文件夹中，这里一定要注意，a标签的href不要写/demo/page/home.html，没有/demo/这个前缀，一定要写/page/home.html，重要的事情说三遍，【a标签中的href中不要加二级目录】，不然你的项目需要迁移至别的文件夹，莫非你还要一个一个更改所有的a标签？这是不可能的，adminXL中所有a标签的绝对路径指的都是当前adminXL框架的目录。
这里你需要注意：adminXL的config.js配置中，host参数主要用于声明当前项目部署在根目录中，还是子级目录中，下来通过举例来说明：
如果再某个多级的文件夹中，你想使用相对路径，可以，这是支持的，请看一下示例：
添加文章注意：adminXL框架会劫持所有的a链接，将其a链接的视图内容动态加载到adminXL的内容区，如果你的本意是直接打开一个新链接，而不是局部加载的话，那么a标签上应该加上一个属性：data-pjax="false"，或者新窗口打开target="_blank"。
adminXL框架驱动基于自身的adminXL类（注意名称，框架名称的首字母为大写，编程中统一为小驼峰命名法），具体使用如下。
//每次页面加载完成后的回调 //该回调必须放在引用adminXL.js之前 var adminXLCallback = function(url, res){ console.log(url); } //每次页面加载完成后的回调 //与adminXLCallback不同的是该函数在初始化页面时不会被调用，在点击链接加载页面时才会生效。 adminXL.callback = function(url, res){ console.log(url); } //获取config.js的全局配置信息 adminXL.config; //pjax主函数，主要针对adminXL框架自身使用，用户一般用不到，这里记录一下。 adminXL.pjax(json); //重新加载当前视图页面，但不是刷新整个页面哦，是局部加载内容区的视图 adminXL.render(); //返回使用host的url adminXL.url('/page/home.html'); //打开指定url - 局部加载页面方式 adminXL.open('/page/home.html'); //打开指定url - 打开一个全新的页面，会刷新整个视图 adminXL.href('/page/home.html'); //打开指定url - 第二个参数用于控制url是否使用host，参数为布尔类型，ture或false，默认为ture //如果为ture: 例如config.js文件中配置了host: '/adminXL/'，那么实际打开的链接为'/adminXL/page/home.html' //如果为false: 实际打开的链接为'/page/home.html' //如果url是一个有效的网址（https://或http://开头），那么第二个参数将无效 adminXL.href('/page/home.html', false); //展开侧栏菜单 adminXL.sidebar.open(); //收缩侧栏菜单 adminXL.sidebar.close(); //设置侧栏菜单 //后台的侧栏菜单可以直接在index.html后台模板中用html来写，也可以通过本函数来直接传递一个Array来格式化侧栏菜单。 //菜单项的参数说明（子级菜单与父级菜单参数一样）： //name {String} 【必填】 菜单名称 //url {String} 【必填】 打开的页面链接 //icon {String} 【必填】 菜单图标，如果是子级，无需填写，这里可以填写第三方图标库 //dot {String} 【选填】 菜单上的小圆点，指定一个颜色，颜色值参考iceui中的颜色列表 //child {Array} 【必填】 子级菜单 //------------------------------------------------------ //示例： adminXL.menu([ { name: '后台首页', url: '/page/home.html', icon: 'ice-home' }, { name: '用户留言', url: '/page/message.html', icon: 'ice-speak', dot: 'red' }, { name: '文章管理', url: '/page/article.html', icon: 'ice-page', child: [ { name: '添加文章', url: '/page/article/add.html', }, { name: '分类管理', url: '/page/article/category.html', } ] } ]); //设置侧栏菜单选中状态 - 判断依据菜单上的url adminXL.menuActive('/page/article.html'); //初始化链接 //点击内容区动态生成的a链接，会刷新当前整个页面，所以需要再次使用该方法重新劫持a链接，使其点击时局部刷新 //一般用于内容区有js生成的a链接，点击a链接需要刷新内容区的内容 adminXL.linkInit('.class a');