ThinkCMF前端使用的是传统的jQuery技术,使用的核心类库有 jQuery,bootstrap,wind.js,这三个类库是ThinkCMF前后台模板所依赖的核心类库,其它第三方类库均使用 wind.js 异步加载,我们封装了一些常用的组件方便大家快速开发,封装的前台模板组件在 `static/js/frontend.js`,后台模板组件在 `static/js/admin.js`, frontend.js 和 admin.js功能基本相同,但考虑到前后台需要稍有不同。 无论在使用 frontend.js还是 admin.js 都要提前引入jQuery和 wind.js。 ## 前台使用流程 ``` <!DOCTYPE html> <html> <head> <title>演示</title> <meta name="keywords" content=""/> <meta name="description" content=""> <!--前台模板一定要在 head标签里引入 jquery 和 wind.js 因为插件可能会用到这两个类库--> <script type="text/javascript"> //全局变量,此处是 wind.js使用的变量,不用更改复制即可 var GV = { ROOT: "__ROOT__/", WEB_ROOT: "__WEB_ROOT__/", JS_ROOT: "static/js/" }; </script> <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script> <!--看自己需要引入,jq migrate--> <script src="__TMPL__/public/assets/js/jquery-migrate-1.2.1.js"></script> <script src="__STATIC__/js/wind.js"></script> </head> <body> ...此处省略10万行代码 <!--在此处引入 bootstrap 和 frontend.js--> <script src="__TMPL__/public/assets/simpleboot3/bootstrap/js/bootstrap.min.js"></script> <script src="__STATIC__/js/frontend.js"></script> <script> //你可以在这里为所欲为了 </script> </body> </html> ``` ## 后台使用流程 ``` <!DOCTYPE html> <html> <head> <title>演示</title> <meta name="keywords" content=""/> <meta name="description" content=""> <!--前台模板一定要在 head标签里引入 jquery 和 wind.js 因为插件可能会用到这两个类库--> <script type="text/javascript"> //全局变量,此处是 wind.js使用的变量,不用更改复制即可 var GV = { ROOT: "__ROOT__/", WEB_ROOT: "__WEB_ROOT__/", JS_ROOT: "static/js/", APP: '{$Request.module}'/*当前应用名*/ }; </script> <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script> <!--看自己需要引入,jq migrate--> <script src="__TMPL__/public/assets/js/jquery-migrate-1.2.1.js"></script> <script src="__STATIC__/js/wind.js"></script> </head> <body> ...此处省略10万行代码 <!--在此处引入 bootstrap 和 frontend.js--> <script src="__TMPL__/public/assets/simpleboot3/bootstrap/js/bootstrap.min.js"></script> <script src="__STATIC__/js/admin.js"></script> <script> //你可以在这里为所欲为了 </script> </body> </html> ```