rails里面添加妹子ui
2024-08-24 12:06:23
妹子ui看起来很不错,以为在rails里面添加自定义的css和js和平时一样,结果可想而知,不过弄完以后发现还是比较简单的,这里记录一下
妹子ui需要加载的css和js如下
http://cdn.amazeui.org/amazeui/2.2.0/css/amazeui.css
http://cdn.amazeui.org/amazeui/2.2.0/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.js
http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.legacy.js
http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.legacy.min.js
http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.widgets.helper.min.js
一个css,3个js
rails4里面有个个asset pipeline,大概是用来压缩css,js等等,提升速度的,具体可以看下http://guides.ruby-china.org/asset_pipeline.html#manifest-files-and-directives
rails程序会默认加载三个路径的资源
app/assets
lib/assets
vendor/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
<html>
<head>
<%= javascript_include_tag params[:admin] %>
</head>
<body>
<div data-am-sticky>
<button class="am-btn am-btn-primary am-btn-block">Stick to top</button>
</div> <button class="am-btn am-btn-success"
data-am-popover="{content: '鄙是点击 Hover 显示的 Popover', trigger: 'hover focus'}">
Hover 显示 Popover
</button>
</body>
</html>
最新文章
- 20145208 GDB调试汇编堆栈过程分析
- javascript中的闭包、模块与模块加载
- Spring任务调度器之Task的使用
- [PHP]使用PHPMailer发送带附件并支持HTML内容的邮件
- css通用小笔记01——导航背景
- zepto源码--插入节点--学习笔记
- 【你吐吧c#每日学习】10.29 C#字符串类型&;Common operators
- 设备模型之kobject,kset及其关系
- JAVA的序列化与反序列化
- Redis源码研究--跳表
- WCF 绑定(Binding)
- 求1+2+3+...+n的值,要求不能使用乘除法,for、while、if、else、switch、case、等关键字及条件判断语句(JAVA)
- Linux驱动技术(五) _设备阻塞/非阻塞读写
- 使用Microsoft.ExceptionMessageBox.dll捕获WinForm程序中异常信息并弹窗显示
- python三元操作符
- angularjs异步处理 $q.defer()
- python rabbitmq的库,rabbitpy代替pika
- (惊艳)hashmap的理解(映射)
- fedora国内源常见配置
- android沉浸状态栏和顶部状态栏背景色的设置