软件简介

Plane UI,意为纸飞机或平面 UI,即 P(aper) (P)lane UI 的缩写,是一个构建 HTML5 应用的跨终端响应式前端界面框架及解决方案。

设计理念

  • 简单通用,高效开发;

  • 模块化,低耦合;

  • 移动优先,优雅降级;

  • 美学追求,交互为本;

  • 持续演进,拥抱新技术;

主要特性

  • 基于 HTML5 + CSS3:移动优先,快速开发跨终端响应式 Web 应用;

  • 交互美学:扁平化风格,借鉴和溶合 Google Material Design 部分设计风格及规范,同时又有自己的风格;

  • 按需定制:样式语义化,使用 SCSS 预处理样式;

  • 基于 jQuery:更高的开发效率,方便使用各种 jQuery 插件;

  • 丰富的组件:自带大量常用的组件,并向 Web Components 演化;

  • 组件模块化:遵循 CommonJS 规范,支持 AMD / CMD 各种模块化加载工具;

  • 命名空间: CSS 前缀式命名空间;

  • 优雅降级:向下“基本”兼容到 IE8 ;

注:IE8 下支持基本的内容和样式渲染和部分交互。

Bower 安装:

bower install planeui

使用方法

<link rel="stylesheet" type="text/css" href="dist/css/planeui.min.css" />
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.js"></script>

兼容IE8~9 的用法(基本的内容渲染或不完全的支持,不过还是建议不考虑兼容 IE8):

<link rel="stylesheet" type="text/css" href="./dist/css/planeui.min.css" />

<!--[if (gte IE 9) | !(IE)]>
<!--><script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.patch.ie8.min.js"></script>
<![endif]-->

<!--[if lt IE 10]>
<script type="text/javascript" src="./dist/js/planeui.patch.ie9.min.js"></script>
<![endif]-->

<script type="text/javascript" src="./dist/js/planeui.js"></script>

响应式网格布局:

尺码 分辨率 描述
xs * 所有屏幕(或手机竖屏)
sm 640px及以上 手机横屏等
md 768px及以上 平板电脑(iPad)竖屏等
lg 992px及以上 平板电脑(iPad)横屏、PC 机、笔记本等
xl 1200px及以上 PC 机、笔记本等
xxl 1400px及以上 PC 机、笔记本等

 

整体布局及限定最大宽度:

<div class="pui-layout pui-layout-fixed"></div>

.pui-layout-fixed即限定最大宽度为960px,其他宽度限定:pui-layout-fixed-980 pui-layout-fixed-1000 pui-layout-fixed-1200 pui-layout-fixed-1360 pui-layout-fixed-1400 pui-layout-fixed-1500 pui-layout-fixed-1600 pui-layout-fixed-1700 pui-layout-fixed-1800,通过媒体查询当前的屏幕宽度响应对应最大宽度。

12 等分网格布局示例:

<div class="pui-grid">
    <div class="pui-row">
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-4"></div>
        <div class="pui-grid-xs-4"></div>
        <div class="pui-grid-xs-4"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-6"></div>
        <div class="pui-grid-xs-3"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-5"></div>
        <div class="pui-grid-xs-7"></div>
    </div>
</div>

Flexbox 弹性布局示例(不支持 IE9 及以下版本):

<div class="pui-flexbox pui-flex-column">
    <header>标题栏</header>
    <div class="pui-flex">内容层</div>
    <footer>底栏</footer>
</div>

更多示例及用法详见:https://pandao.github.io/planeui/

组件列表

  • Arrow

  • Article

  • App Layout

  • Animations

  • Basic

  • Badge / Label / Tag

  • Button

  • Button Sheet

  • Breadcrumb

  • Card

  • Colors (Material Design Colors)

  • Color Picker (Material Design Color Picker)

  • Checkbox

  • Close Button

  • Comment

  • Dialog

  • Date Picker(未实现)

  • Fonts

  • Font sizer

  • File Input

  • FullPage

  • Flexbox Layout

  • Forms

  • Form Validator

  • Grid Layout

  • Gallery (未实现)

  • Icons (自带 Font Awesome 和 手机淘宝图标库两套图标库)

  • Image

  • List

  • ListView

  • Loading

  • Menu

  • Menubar

  • Menu Accordion

  • Mask

  • Notice

  • Pagination

  • Progress

  • Rating

  • Radio Button

  • Ring Progress

  • Search

  • Slider(未实现)

  • Switch Button

  • ScrollTo (Anchor + Container)

  • SideNav / Side slide (Off Canvas Plus)

  • Tab

  • Texts

  • Table

  • Top10

  • Tooltip

  • Timeline

  • Time Picker(未实现)

  • Uploader(未实现)

  • Z-Depth (Material Design Z-Depth)

依赖项目及致谢

1、依赖项目

2、参考项目

3、构建工具

注:以上所有项目排名不分先后。

兼容支持情况

Plane UI 对浏览器进行了分级支持 (GBS,即 Graded Browser Support,分级浏览器支持),优先支持那些支持 HTML 5、CSS3、ES5 / 6 等新特性的现代浏览器。

A > B > C > D

级别 浏览器 描述
A 级 Webkit 系(Chrome 31+、Safari 7+、Opera 29+等) 完整的渲染和交互支持
  Android 4.2+ 浏览器(自带、UC、QQ、Chrome等)  
  iOS Safari 7.1+  
  Firefox 31+  
  桌面 IE10+、WP 8.1+ IE  
B 级 iOS 6.x 浏览器 基本完整的支持,部分支持不完善
  Android 2.3.x+ 浏览器  
  Firefox 旧版本  
  Opera 旧版本(非 Chromium)  
  IE9、WP IE  
C 级 IE8、Android 2.2.x+ 浏览器 部分基本支持,基本内容的渲染
D 级 其他浏览器(IE6~7等) 部分基本支持或不支持

兼容支持测试:

  • iOS 7+

  • Android 4.2+

  • Chrome (latest)

  • Firefox (latest)

  • Safari 6+

  • Opera (latest)

  • Internet Explorer 9+

IE 9 下因为它本身不支持部分 HTML5 特性(例如动画、Flexbox等)的原因,不太完美的支持。 IE 8 只是提供最基本的兼容支持,有部分不支持、不完善或兼容性差。 IE 7 及以下版本、Window Phone 等平台或浏览器均未测试。

其他环境的兼容测试:

  • Node-webkit

  • Phonegap

注:由于条件的限制,Android 和 iOS 的其他版本暂时未测试,欢迎使用者反馈和提交 Bug。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (3)

加载中
该评论暂时无法显示,详情咨询 QQ 群:912889742
死不死 Dialog系列竟然只支持IE 死不死
2017/02/22 02:53
回复
举报
表格这一块功能太弱了 #Plane UI#
2015/12/12 09:37
回复
举报
更多评论
暂无内容
发表了博客
2019/07/01 19:51

NX二次开发-UFUN拾取平面对话框UF_UI_specify_plane

1 #include <uf.h> 2 #include <uf_ui.h> 3 4 5 UF_initialize(); 6 7 //拾取平面对话框 8 double orientation[9] = { 0, 0, 0, 0, 0, 0, 0, 0, 0 }; 9 double origin[3] = { 0, 0, 0 }; 10 double pts[6] = { 0, 0, 0, 0, 0, 0 }; 11 int mode = 1, display = 0, response; 12 tag_t plane_eid = NULL_TAG; 13 UF_UI_specify_plane("指定平面", &mode, display, &response, orientation, origin, &pla...

0
0
发表了博客
2019/01/23 09:15

CF576C Points on Plane 构造

正解:构造 解题报告: 先放下传送门趴QAQ 话说我jio得这题好玄学啊,,,就是,我实在觉得我这题做得完美无缺了?可就是过不去,,,而且它告诉我的奇异错误是"wrong output format Unexpected end of file - int32 expected "我当场就爆哭出来了趴QAQ连错6次正确率啪叽啪叽掉啊QAQ 不管,不想做这题了,决定来摸下鱼把题解给写了QAQ 看到这题,自然而然就会想到,莫队,对趴 对它其实就是个,莫队的最前面的那个分块 正确性我不会分析但是根据...

0
0
2015/04/28 11:10

plane It's easily their heaviest

Few people claim to know much about the so called "woman in black" spotted in the Mossy GroveA mysterious figure is capturing the attention of social mediaApple unveiled dozens of new featuresWhat are the highlights? Here are ten of them:1Commanding Curve, second in the Derby, was listed at 15 1FOX 29 Chris O spoke with a mother who said her 15 year old daughter is listed in fair condition1 Dra...

0
0
2020/03/19 23:12

106_object_detection_infer_plane

飞机目标检测 参考 源码notebook,https://github.com/databooks/databook/tree/master/gis/iobjectspy10 iObjects 10使用,使用SuperMap iObjects for python 10.0 #!/usr/bin/env python3 # coding=utf-8 import os import time from iobjectspy.ml.vision import Inference Using TensorFlow backend. 设置输入数据路径 curr_dir = '' data_dir = os.path.join(curr_dir, '..','..','example_data') input_data...

0
0
发表了博客
2010/07/06 08:07

Talika gnome-plane 小工具

http://gnome-look.org/content/show.php/Talika+applet?content=118267 和win7一样 能将任务栏上的程序以图标显示 节省空间 类别:Hack 查看评论

0
1
发表了博客
2020/06/27 14:42

I. Game on Plane(SG函数 博弈论)

题目链接 题目描述 给你n个节点的凸包(未连线),每次选择两个点连一条线,不能与之前出现的线有相交。当出现一个凸包的时候游戏结束 谁最后无法移动了就输了,现在问 是先手必胜还是后手必胜。 类似题:HDU4664 Triangulation HDU描述的是当出现一个三角形时 游戏结束。其实是一个意思,HDU的范围大一点 涉及循环节。 做法:SG函数。如果你是第一次听说SG函数。看链接:知乎 而对于这题的分析呢。 每一个点集都可以被一条直线分...

0
0
2020/03/19 23:14

107_object_detection_workflow_plane

目标检测训练 参考 源码notebook,https://github.com/databooks/databook/tree/master/gis/iobjectspy10 iObjects 10使用,使用SuperMap iObjects for python 10.0 #!/usr/bin/env python3 # coding=utf-8 import os import time from iobjectspy import open_datasource from iobjectspy.ml.vision import Trainer, DataPreparation, Inference Using TensorFlow backend. 设置TIF影像,矢量标签路径 curr_dir = '...

0
0
2017/09/05 16:54

PCB中Plane和Layer有什么区别?

在设计PCBLayout的时候,根据项目需要,要设计多层PCB,这时候需要添加“层”,以Altium Designer为例,所要添加的层有“Plane”和“Player”之分。那Plane和Player有什么区别呢? Layer为正面,在这一层,画一根线就是画一条导线,即凡是走线的地方就表示有铜皮连接。 Plane为负面,即所谓的“负片法”,这一层本身就是一片铜皮,画一根线,就是将铜皮分开,即凡是走线的地方就是将铜皮去掉。 在添加层的时候,添加选项有“Lay...

0
0
发表于游戏开发专区
2020/03/30 10:26

平面(Plane)和四方形(Quad)

平面(Plane) 这是一个10个单位长度的正方形平面,坐标是XZ轴平面里,可以使用整个四方形的纹理来贴图。平面常用来表示地面和墙,也可以在GUI用来显示一些图片或者视频,或者一些特别的效果,不过使用quad四方形来做这些事情更加方便、合理。 四方形(Quad) 四方形跟平面有点像,但它四个边组成,只有两个三角形,平面是两百个三角形组成,因此从效率上来说,四方形比平面更好。比如要在游戏里显示图片或者视频,这个非常合适。...

0
0
01/25 08:08

PCB中Plane和Layer有什么区别?

在设计PCBLayout的时候,根据项目需要,要设计多层PCB,这时候需要添加“层”,以Altium Designer为例,所要添加的层有“Plane”和“Player”之分。那Plane和Player有什么区别呢? Layer为正面,在这一层,画一根线就是画一条导线,即凡是走线的地方就表示有铜皮连接。 Plane为负面,即所谓的“负片法”,这一层本身就是一片铜皮,画一根线,就是将铜皮分开,即凡是走线的地方就是将铜皮去掉。 在添加层的时候,添加选项有“Lay...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
3 评论
171 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部