CSS框架 ui 有哪些

html-css029

CSS框架 ui 有哪些,第1张

精致的 CSS UI 框架：

1、Bootstrap – 最流行的Web前端UI框架

2、jQuery UI - 基于jQuery的开源Javascript框架

3、jQuery UI Bootstrap

4、BootMetro - Metro风格的CSS框架

5、Flat UI - 扁平风格 UI 工具包

6、网易CSS框架 NEC

7、Alloy UI – 功能强大的CSS UI框架

8、Cardinal – 移动端的CSS UI框架

9、快速开发CSS的框架 CSScaffold

10、后台UI开发框架 MuseUI

标签：js代码 .com 效果 click .text jquer 参考 定义 html

项目中需要弹出层效果，使用了layui前端框架，主要使用了里面的弹出层特效（可以移动）

html代码

要给这个标签绑定click方法

1 <a href=‘javascript:‘ data-method=‘offset‘ data-type=‘auto‘ class=‘showMean‘>显示</a>

点击以后，显示这个页面

1 <div class="con-no-ma displayNo" id="con-no-ma">

2显示页面

3 </div>

js代码

function showMean() {

layui.use(‘layer‘,function () {

var $ = layui.jquery, layer = layui.layer

//触发事件,这个相当于设置参数

var active = {

offset: function(othis){

var type = othis.data(‘type‘)

,text = othis.text()

layer.open({

title:"数据关联",

type: 1,

offset: type, //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset

id: ‘LAY_demo‘+type, //防止重复弹出

content: $("#con-no-ma"), //在页面新定义，然后通过id绑定到这

btn: ‘关闭全部‘,

area: [‘1000px‘, ‘500px‘],

btnAlign: ‘c‘, //按钮居中

shade: 0, //不显示遮罩

//btn的方法

yes: function(){

layer.closeAll()

},

//右上角关闭按钮的方法

cancel: function(){

layer.closeAll()

}

})

}

}

//给指定标签绑定click事件

$(‘ .showMean‘).on(‘click‘, function(){

var othis = $(this), method = othis.data(‘method‘)

active[method] ? active[method].call(this, othis) : ‘‘

})

})

}

layui大概3天可以学会。根据查询相关公开信息显示：layui是一款采用自身模块规范编写的前端UI框架，遵循原生HTML，CSS，JS的书写与组织形式，门槛极低，仅需3天就可以熟练掌握。