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相关推荐

rails2.3.5 添加jquery ui 找不到images
为什么80%的码农都做不了架构师?>>> 要维护老版本的rails,添加jquery ui 的时候,images放在sytlesheets下是找不到的,所以把文件放到publi ...
移动端遇到的问题（苹果ios、妹子ui）
移动端遇到的问题 1.H5移动端双击放大缩小问题在使用了<\meta name="viewport" content="width=device-width, i ...
AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解, ...
使用妹子UI 开发后台管理页面
使用 Amaze UI 开发漂亮的后台管理页面,管理端登录页面.管理端列表页面.管理端保存页面. 页面布局样式使用固定定位和flex实现. 创作时间:2022年10月9日09:21:36 登录页面效果 ...
妹子UI之自定义分页控件
妹子UI,http://amazeui.org,在这儿顺便帮他打下广告,我个人觉得比Bootstrap漂亮,于是,我就选择了基于它的UI写出来自己的分页控件. paginator.js的内容如下: ( ...
妹子ui日期控件Uncaught TypeError: $(...).datepicker is not a function
前端代码调整位置还有一个问题是妹子ui日期控件禁用问题比文档里面多了class data-am-datepicker,结果导致不生效!!!
使用UI创建vue项目并添加element ui和axios
目录简介 Vue简单安装说明项目创建步骤总结简介因为最近一个项目需要使用SPA的方式,而前端选择使用vue来实现.所以最近重新看了下vue的相关知识,发现最新的vue项目可以在web中使用界 ...
显示空闲链表和隐式空闲链表_使用空闲资源添加Espresso UI测试
显示空闲链表和隐式空闲链表 You may want to read the Spanish version of this article in Droid-Latam's publication ...
工作7年，一位已婚妹子UI自动化测试学习心得
本文来自一位90后,已婚(3岁小孩的妈妈)妹子的投稿本文妹子大家好,我是罗春南,来自海南,工作7年,已是一位3岁孩子妈妈的,90后妹子(已婚,仍可撩).首先,很荣幸能收到公号作者对我的投稿邀请.我 ...

rails里面添加妹子ui

rails里面添加妹子ui相关推荐

最新文章

热门文章