妹子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. taskset -pc PID 查看线程占用cpu核

    taskset -pc  PID 可以用于 查看 当前线程 对应绑定的 在 哪个核上面. 这个 可以用于 程序优化, 查看 哪个线程占用的 cpu 比重比较高 首先 可以通过  top  -H   - ...

  2. 【hive】null值判断

    hive用作null值的判断是不能用 = , != 来判断的 只能用is [not] null来完成 不支持ifnull()函数(mysql支持) 适用于所有数据类型 (1)条件中判断是否为空 whe ...

  3. 010——数组（十）compact extract in_array

    <?php /** 10 数组 compact extract in_array */ //compact() (紧凑的,简洁的) 将变量转换为数组,变量名为数组键名,变量值为数组的键值. /* ...

  4. 在 Bash on Ubuntu 上安装Nginx

    前言 Win10 上的 Bash on Ubuntu 是个很好用的玩具,让windows开发环境下的人能无缝操练Linux,但是涉及到网络部分还是有很多要该进的地方,比如Nginx的安装就遇到了问题. ...

  5. 【html5】hashchange Event – 监测URL的hash变化

    通过URL传值,在?后附加以=连接的键值对,各键值对间以&连接:也可以通过URL传递页面参数,在”#”后附加的方式.两者最大的一个 区别在于:后者不会发起请求,不会导致页面刷新.常见应用场景在 ...

  6. Week12《java程序设计》第12次作业总结

    Week12<java程序设计>第12次作业总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 ...

  7. 什么时候应该使用Autorelease Pool

    csdn首发:http://blog.csdn.net/guijiewan/article/details/46470285 Objective c使用ARC之后,一般都不需要再手动调用retain, ...

  8. learn go random

    package main // 参考文档: // go 基本类型和运算符 // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/e ...

  9. BZOJ1690 Usaco2007 Dec 奶牛的旅行 【01分数规划】

    BZOJ1690 Usaco2007 Dec 奶牛的旅行 题目描述 作为对奶牛们辛勤工作的回报,Farmer John决定带她们去附近的大城市玩一天.旅行的前夜,奶牛们在兴奋地讨论如何最好地享受这难得 ...

  10. 常用输入法快速输入自定义格式的时间和日期（搜狗/QQ/微软拼音）

    几个主流的输入法输入 rq 或者 sj 都可以得到预定义格式的日期或者时间.然而他们都是预定义的格式:当我们需要一些其他格式的时候该怎么做呢? 本文将介绍几个常用输入法自定义时间和日期格式的方法. 主 ...