妹子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>

rails里面添加妹子ui的更多相关文章

  1. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  2. Asp.net mvc 添加Jquery UI

    1.使用NuGet下载jquery ui Install-Package jQuery.UI.Combined 2.下载多语言文件: development-bundle/i18n目录下是jquery ...

  3. 使用妹子UI开发的体验分享

    前阵子看到一个类似bootstrap的前端UI框架,好奇心驱使下,去琢磨了一些,最终决定网站改版用这个UI试试效果: 首页+头部: 投稿页: 现成拷贝过来的评论列表: 总结: 上手难度: (熟悉boo ...

  4. vue学习笔记(二): 添加 element ui 插件

    一.加载 ui element vue add element 加载过程及成功结果如下 > vue add element>

  5. react-amazeui-touch 妹子Ui移动端学习

    必须先配置并且学习react环境: http://www.cnblogs.com/CyLee/p/5668373.html 官方地址 http://t.amazeui.org/#/docs/form? ...

  6. jfinal整合妹子UI初步完成

  7. 前端架构演进及主流UI

    @ 目录 前端三要素 JavaScript 框架 NodeJs 常用UI框架 前后端分离的演进 MVVM模式 总结 前端演进到现在,各种技术框架已经层出不穷了,作为一名开发少不了要干一些前端的活儿,那 ...

  8. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  9. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

随机推荐

  1. vue中element 的上传功能

    element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...

  2. BGP&RIP

    策略路由是2000之前 如果不通检查是否有相互影响的策略 BGP 25端 查看 25是上端起lan 地址是172.100.1.254 互联158是下端起wan 172.100.1.158   25的内 ...

  3. 更改gitlab默认端口

    若linux服务器的80和8080端口都已经被使用,则需修改gitlab监听的端口 修改路径文件:vim /etc/gitlab/gitlab.rb 1.修改external_url 'http:// ...

  4. laravel中的validator()类验证的使用

  5. fegin--调用超时设置

    Feign请求超时问题 Hystrix默认的超时时间是1秒,如果超过这个时间尚未响应,将会进入fallback代码.而首次请求往往会比较慢(因为Spring的懒加载机制,要实例化一些类),这个响应时间 ...

  6. nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法

    简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要 ...

  7. 【WebGL】1.WebGL简介

    OpenGL和WebGL基本概念 OPEN GL:一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. WebGL:›一个3D ...

  8. 不能在具有唯一索引“IX_******”的对象“dbo.****”中插入重复键的行。重复键值为 (110, 372000, 2)。

    当尝试插入数据,或者更新某个表的时候出现 不能在具有唯一索引“IX_******”的对象“dbo.****”中插入重复键的行.重复键值为 (110, 372000, 2). 遇到这个问题的时候,请找到 ...

  9. ES查询index对应的mapping信息

    private void getMappingByIndex(String indices) throws IOException { GetMappingsRequest getMappingsRe ...

  10. three.js入门系列之粒子系统

    其实代码很简单,也很容易懂(我用的是r99版本的three.js,目前网上大多数demo是60或者80的版本,其中的一些api已经废弃,如下是r99版本支持的写法): 注:渲染器是WebGl渲染器 如 ...