rails里面添加妹子ui
妹子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的更多相关文章
- AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...
- Asp.net mvc 添加Jquery UI
1.使用NuGet下载jquery ui Install-Package jQuery.UI.Combined 2.下载多语言文件: development-bundle/i18n目录下是jquery ...
- 使用妹子UI开发的体验分享
前阵子看到一个类似bootstrap的前端UI框架,好奇心驱使下,去琢磨了一些,最终决定网站改版用这个UI试试效果: 首页+头部: 投稿页: 现成拷贝过来的评论列表: 总结: 上手难度: (熟悉boo ...
- vue学习笔记(二): 添加 element ui 插件
一.加载 ui element vue add element 加载过程及成功结果如下 > vue add element>
- react-amazeui-touch 妹子Ui移动端学习
必须先配置并且学习react环境: http://www.cnblogs.com/CyLee/p/5668373.html 官方地址 http://t.amazeui.org/#/docs/form? ...
- jfinal整合妹子UI初步完成
- 前端架构演进及主流UI
@ 目录 前端三要素 JavaScript 框架 NodeJs 常用UI框架 前后端分离的演进 MVVM模式 总结 前端演进到现在,各种技术框架已经层出不穷了,作为一名开发少不了要干一些前端的活儿,那 ...
- 前端UI框架和JS类库
一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
随机推荐
- Post with HttpClient4
转载:http://www.cnblogs.com/luxiaoxun/p/6165237.html 作者:阿凡卢 出处:http://www.cnblogs.com/luxiaoxun/ HttpC ...
- 34-THREE.JS 游泳圈
<!DOCTYPE html> <html> <head> <title>Example 05.08 - Basic 3D geometries - T ...
- Java进阶3. 内存回收机制
Java进阶3. 内存回收机制 20131029 前言: 学过C++的都知道,C++中内存需要程序员自己维护.说道这里,很多开发的同学就感觉很痛苦,当他转向Java的时候,就会说你看Java多好啊,程 ...
- Oracle11g创建表空间及用户
第1步:创建临时表空间 create temporary tablespace pgenius_temptempfile '/data/oracle/oradata/orcl/pgenius_te ...
- 项目提交到github的忽略文件
1.在工作区的.gitignore文件中配置如下: # Built application files*.apk*.ap_ # Files for the Dalvik VM*.dex # Java ...
- LeetCode OJ:Isomorphic Strings(同构字符串)
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- 剑指offer--38.左旋转字符串
时间限制:1秒 空间限制:32768K 热度指数:173814 本题知识点: 字符串 题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果. ...
- 【dlbook】优化
[神经网络优化的挑战] 一.病态: 虽然学习率很小,而且梯度大,但是由于Hessian阵的病态,二次项比一次项还要大,梯度下降事实上并不一定能下降,反而有可能上升.因此需要将学习率调低. 表现:梯度很 ...
- TotoiseSVN的使用方法
详细教程 https://www.jianshu.com/p/6b3b7b915332 SVN提交修改 https://jingyan.baidu.com/article/6c67b1d6f524d5 ...
- django2中文界面
设置了中文语言 zh-hans后,django2默认页面是中文的. 看起来也不错哦. 创建django2超级管理员: createsuperuser 创建管理员后,就可以登录后台了. 注册用户user ...