博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
rails里面添加妹子ui
阅读量:6240 次
发布时间:2019-06-22

本文共 3174 字,大约阅读时间需要 10 分钟。

妹子ui看起来很不错,以为在rails里面添加自定义的css和js和平时一样,结果可想而知,不过弄完以后发现还是比较简单的,这里记录一下

 

妹子ui需要加载的css和js如下

http://cdn.amazeui.org/amazeui/2.2.0/css/amazeui.csshttp://cdn.amazeui.org/amazeui/2.2.0/css/amazeui.min.csshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.min.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.legacy.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.legacy.min.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.widgets.helper.jshttp://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.widgets.helper.min.js

一个css,3个js

 

rails4里面有个个asset pipeline,大概是用来压缩css,js等等,提升速度的,具体可以看下

rails程序会默认加载三个路径的资源

app/assetslib/assetsvendor/assets

妹子ui是妹子公司出的,就放vendor了

 

贴一下路径,大概是

└── vendor    └── assets        ├── amazeUI        │   └── assets        │       ├── css        │       │   ├── admin.css        │       │   ├── amazeui.css        │       │   ├── amazeui.flat.css        │       │   ├── amazeui.flat.min.css        │       │   ├── amazeui.min.css        │       │   └── app.css        │       ├── fonts        │       │   ├── FontAwesome.otf        │       │   ├── fontawesome-webfont.eot        │       │   ├── fontawesome-webfont.svg        │       │   ├── fontawesome-webfont.ttf        │       │   ├── fontawesome-webfont.woff        │       │   └── fontawesome-webfont.woff2        │       ├── i        │       │   ├── app-icon72x72@2x.png        │       │   ├── examples        │       │   │   ├── admin-chrome.png        │       │   │   ├── admin-firefox.png        │       │   │   ├── admin-ie.png        │       │   │   ├── admin-opera.png        │       │   │   ├── admin-safari.png        │       │   │   ├── adminPage.png        │       │   │   ├── blogPage.png        │       │   │   ├── landing.png        │       │   │   ├── landingPage.png        │       │   │   ├── loginPage.png        │       │   │   └── sidebarPage.png        │       │   ├── favicon.png        │       │   └── startup-640x1096.png        │       └── js        │           ├── amazeui.js        │           ├── amazeui.legacy.js        │           ├── amazeui.legacy.min.js        │           ├── amazeui.min.js        │           ├── amazeui.widgets.helper.js        │           ├── amazeui.widgets.helper.min.js        │           ├── app.js        │           ├── handlebars.min.js        │           ├── jquery.min.js        │           └── polyfill        │               ├── rem.min.js        │               └── respond.min.js

 

在页面加载显示,有两种模式,

1,全局加载

在app/assets的application.js里面添加

//= require assets/js/amazeui//= require assets/js/amazeui.legacy//= require assets/js/amazeui.widgets.helper

 

application.css添加

*= require assets/css/amazeui

 

在你的view,xxx.erb里面添加全局加载

<%= stylesheet_link_tag    "application" %><%= javascript_include_tag "application" %>

然后就可以直接用了

 

 

2,根据controller独立加载

在app的js目录添加controller名字,我的是admin.js

//= require assets/js/amazeui//= require assets/js/amazeui.legacy//= require assets/js/amazeui.widgets.helper

 

css目录添加admin.css

/* *= require assets/css/amazeui */

 

自己的view,xxx.erb

          <%= javascript_include_tag params[:admin] %>                

 

转载地址:http://hpdia.baihongyu.com/

你可能感兴趣的文章
Linux下利用rsync实现多服务器文件同步
查看>>
2.3 Rust函数
查看>>
1.3 IDAE 中使用GO开发项目
查看>>
Activity、Fragment、ViewPage
查看>>
《信息安全系统设计基础》课程总结
查看>>
衣码对照表
查看>>
Vue-Router导航守卫
查看>>
tool
查看>>
hdu2087 剪花布条
查看>>
获取现阶段选中的tab的标题(easyui)
查看>>
tty的核心位置,与运行调用过程
查看>>
Python全栈学习_day011作业
查看>>
20172304 实验三报告
查看>>
[转载]项目风险管理七种武器-霸王枪
查看>>
正则实例
查看>>
Hash与Map
查看>>
sqlmap使用笔记
查看>>
U盾技术学习笔记
查看>>
云计算面临的安全挑战 访北大计算机学院院长陈钟
查看>>
一起谈.NET技术,C#中标准Dispose模式的实现
查看>>