Browse Source

Pull request #2319: 无JIRAR任务 响应式布局

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit 'f31f6541ac7647529b9d5ca532d05a89b81fc4be':
  优化
  响应式布局
es6
guy 3 years ago
parent
commit
73314a1cbc
  1. 6
      examples/config-render.html
  2. 445
      examples/dev.html
  3. 6
      examples/effect.html
  4. 6
      examples/hooks.html
  5. 6
      examples/loader-context.html
  6. 6
      examples/resize.html
  7. 6
      examples/style.html
  8. 6
      examples/tab-context.html
  9. 6
      examples/test-id.html
  10. 6
      examples/virtual-group.html
  11. 6
      examples/visible.html
  12. 6
      examples/worker.html
  13. 419
      examples/响应式布局.html
  14. 8
      examples/插件设计.html
  15. 51
      src/core/wrapper/layout.js
  16. 12
      src/core/wrapper/layout/layout.flow.js
  17. 21
      src/core/wrapper/layout/layout.td.js
  18. 70
      src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
  19. 72
      src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
  20. 81
      src/core/wrapper/layout/responsive/responsive.inline..js
  21. 11
      src/less/core/wrapper/flex.horizontal.less
  22. 13
      src/less/core/wrapper/flex.wrapper.horizontal.less

6
examples/config-render.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

445
examples/dev.html

@ -1,46 +1,419 @@
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://localhost:9001/fineui.css"/>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>PullRequest | Code Review as a Service</title>
<meta
name="description"
content="PullRequest is a platform for code review, built for teams of all sizes. We have thousands of on-demand reviewers and they are backed by best-in-class automation tools. Because code quality is important."
/>
<meta name="theme-color" content="#28557a" />
<link
rel="stylesheet"
type="text/css"
href="https://fanruan.design/fineui/2.0/fineui_without_normalize.css"
/>
<!-- <script src="../dist/2.0/fineui.js"></script>-->
<script src="http://localhost:9001/fineui.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
BI.config("bi.provider.system", function (provider) {
<style>
*,
:after,
:before {
box-sizing: border-box;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
helvetica neue, Arial, noto sans, liberation sans, sans-serif,
apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
height: 100vh;
background-color: #fff;
}
#wrapper {
height: 100vh;
}
.nav {
box-shadow: 0 2px 5px rgb(0 0 0 / 16%), 0 2px 10px rgb(0 0 0 / 12%);
}
.nav-logo {
background-image: url(https://www.pullrequest.com/images/pullrequest-logo.svg);
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}
.image {
background-image: url(https://www.pullrequest.com/images/figures/home/hero-graphic.png);
background-repeat: no-repeat;
background-size: contain;
}
.demo {
cursor: pointer;
border-radius: 3px;
font-weight: 600;
color: #fff;
background: #4aa4e0 linear-gradient(180deg, #65b2e5, #4aa4e0) repeat-x;
border: 1px solid #4aa4e0;
}
.signup {
cursor: pointer;
border-radius: 3px;
font-weight: 600;
color: #4aa4e0;
border: 1px solid #4aa4e0;
}
.wave {
background-image: url(https://www.pullrequest.com/images/textures/home/wave1.png);
background-size: cover;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="wrapper"></div>
<script>
BI.config("bi.provider.system", function (provider) {
provider.setResponsiveMode(true);
});
var Widget = BI.inherit(BI.Widget, {
});
var Widget = BI.inherit(BI.Widget, {
props: {},
render: function () {
return {
type: "bi.vertical",
items: [{
return [
{
type: "bi.vertical",
items: [
{
el: {
type: "bi.vertical_adapt",
cls: "nav",
css: {
position: "fixed",
left: 0,
right: 0,
zIndex: 1000,
},
height: 62,
hgap: 16,
items: [
{
type: "bi.layout",
cls: "nav-logo",
width: 185,
height: 46,
},
],
},
},
{
tgap: 112,
el: {
type: "bi.center_adapt",
verticalAlign: "top",
height: 300,
columnSize: [300, "fill"],
items: [{
type: "bi.label",
css: {background: "#eee"},
text: "123"
}, {
type: "bi.label",
css: {background: "#e0e0e0"},
text: "123"
}]
}]
};
}
});
BI.shortcut("demo.responsive", Widget);
BI.createWidget({
columnSize: ["fill", "fill"],
vgap: 24,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Code Review as a Service",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Increase velocity and reduce technical debt through quality code review by expert engineers backed by best-in-class automation.",
},
tgap: 24,
bgap: 24,
},
{
el: {
type: "bi.vertical_adapt",
vgap: 16,
items: [
{
el: {
type: "bi.label",
hgap: 24,
height: 48,
cls: "demo",
text: "Schedule demo",
},
},
{
el: {
type: "bi.label",
hgap: 24,
height: 48,
cls: "signup",
text: "Sign up",
},
lgap: 30,
rgap: 15,
},
],
},
},
],
},
},
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/hero-graphic.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
],
},
},
{
type: "bi.layout",
cls: "wave",
height: 112,
},
{
el: {
type: "bi.center_adapt",
columnSize: ["fill"],
css: {
background: "#f5fbff",
},
hgap: 0.1,
vgap: 64,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
type: "bi.text",
lineHeight: 30,
css: {
fontSize: "22px",
color: "#092353",
},
text: "Empower your development team with the help of world-class engineers. ",
},
{
type: "bi.text",
lineHeight: 24,
css: {
fontSize: "16px",
color: "#28557a",
},
text: "PullRequest provides on-demand code review by world-class engineers, built for teams of any size. We review within your tools to catch security threats, stop crashes, and fix performance issues before they reach production.",
},
],
},
},
],
},
},
{
el: {
type: "bi.center_adapt",
columnSize: ["fill", "fill"],
vgap: 48,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Move fast and reduce cycle times.",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Save time reviewing code so you can focus on shipping new features.",
},
tgap: 24,
bgap: 24,
},
],
},
},
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/velocity.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
],
},
},
{
el: {
type: "bi.center_adapt",
css: {
background: "#f5fbff",
},
columnSize: ["fill", "fill"],
vgap: 48,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/secure.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
{
el: {
type: "bi.vertical",
rgap: 15,
lgap: 0.1,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Secure your codebase.",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Deliver high quality code with an extra line of defense to prevent security vulnerabilities and other fatal flaws.",
},
tgap: 24,
bgap: 24,
},
],
},
},
],
},
},
],
},
];
},
});
BI.shortcut("demo.responsive", Widget);
BI.createWidget({
type: "demo.responsive",
element: "#wrapper"
});
</script>
</body>
element: "#wrapper",
});
</script>
</body>
</html>

6
examples/effect.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/hooks.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/loader-context.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/resize.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/style.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/tab-context.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/test-id.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/virtual-group.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/visible.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

6
examples/worker.html

@ -2,8 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
<script src="../dist/fix/worker.compact.js"></script>
<script src="demo.worker.js"></script>
</head>

419
examples/响应式布局.html

@ -0,0 +1,419 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>PullRequest | Code Review as a Service</title>
<meta
name="description"
content="PullRequest is a platform for code review, built for teams of all sizes. We have thousands of on-demand reviewers and they are backed by best-in-class automation tools. Because code quality is important."
/>
<meta name="theme-color" content="#28557a" />
<link
rel="stylesheet"
type="text/css"
href="https://fanruan.design/fineui/2.0/fineui_without_normalize.css"
/>
<!-- <script src="../dist/2.0/fineui.js"></script>-->
<script src="https://fanruan.design/fineui/2.0/fineui.js"></script>
<style>
*,
:after,
:before {
box-sizing: border-box;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
helvetica neue, Arial, noto sans, liberation sans, sans-serif,
apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
height: 100vh;
background-color: #fff;
}
#wrapper {
height: 100vh;
}
.nav {
box-shadow: 0 2px 5px rgb(0 0 0 / 16%), 0 2px 10px rgb(0 0 0 / 12%);
}
.nav-logo {
background-image: url(https://www.pullrequest.com/images/pullrequest-logo.svg);
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}
.image {
background-image: url(https://www.pullrequest.com/images/figures/home/hero-graphic.png);
background-repeat: no-repeat;
background-size: contain;
}
.demo {
cursor: pointer;
border-radius: 3px;
font-weight: 600;
color: #fff;
background: #4aa4e0 linear-gradient(180deg, #65b2e5, #4aa4e0) repeat-x;
border: 1px solid #4aa4e0;
}
.signup {
cursor: pointer;
border-radius: 3px;
font-weight: 600;
color: #4aa4e0;
border: 1px solid #4aa4e0;
}
.wave {
background-image: url(https://www.pullrequest.com/images/textures/home/wave1.png);
background-size: cover;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="wrapper"></div>
<script>
BI.config("bi.provider.system", function (provider) {
provider.setResponsiveMode(true);
});
var Widget = BI.inherit(BI.Widget, {
props: {},
render: function () {
return [
{
type: "bi.vertical",
items: [
{
el: {
type: "bi.vertical_adapt",
cls: "nav",
css: {
position: "fixed",
left: 0,
right: 0,
zIndex: 1000,
},
height: 62,
hgap: 16,
items: [
{
type: "bi.layout",
cls: "nav-logo",
width: 185,
height: 46,
},
],
},
},
{
tgap: 112,
el: {
type: "bi.center_adapt",
columnSize: ["fill", "fill"],
vgap: 24,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Code Review as a Service",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Increase velocity and reduce technical debt through quality code review by expert engineers backed by best-in-class automation.",
},
tgap: 24,
bgap: 24,
},
{
el: {
type: "bi.vertical_adapt",
vgap: 16,
items: [
{
el: {
type: "bi.label",
hgap: 24,
height: 48,
cls: "demo",
text: "Schedule demo",
},
},
{
el: {
type: "bi.label",
hgap: 24,
height: 48,
cls: "signup",
text: "Sign up",
},
lgap: 30,
rgap: 15,
},
],
},
},
],
},
},
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/hero-graphic.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
],
},
},
{
type: "bi.layout",
cls: "wave",
height: 112,
},
{
el: {
type: "bi.center_adapt",
columnSize: ["fill"],
css: {
background: "#f5fbff",
},
hgap: 0.1,
vgap: 64,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
type: "bi.text",
lineHeight: 30,
css: {
fontSize: "22px",
color: "#092353",
},
text: "Empower your development team with the help of world-class engineers. ",
},
{
type: "bi.text",
lineHeight: 24,
css: {
fontSize: "16px",
color: "#28557a",
},
text: "PullRequest provides on-demand code review by world-class engineers, built for teams of any size. We review within your tools to catch security threats, stop crashes, and fix performance issues before they reach production.",
},
],
},
},
],
},
},
{
el: {
type: "bi.center_adapt",
columnSize: ["fill", "fill"],
vgap: 48,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Move fast and reduce cycle times.",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Save time reviewing code so you can focus on shipping new features.",
},
tgap: 24,
bgap: 24,
},
],
},
},
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/velocity.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
],
},
},
{
el: {
type: "bi.center_adapt",
css: {
background: "#f5fbff",
},
columnSize: ["fill", "fill"],
vgap: 48,
items: [
{
el: {
type: "bi.vertical",
hgap: 15,
items: [
{
el: {
type: "bi.vertical",
items: [
{
type: "bi.img",
attributes: {
width: 595,
},
css: {
maxWidth: "100%",
maxHeight: "100%",
},
src: "https://www.pullrequest.com/images/figures/home/secure.png",
width: "auto",
height: "auto",
},
],
},
},
],
},
},
{
el: {
type: "bi.vertical",
rgap: 15,
lgap: 0.1,
items: [
{
el: {
type: "bi.text",
css: {
fontSize: "24px",
fontWeight: "700",
color: "#092353",
},
text: "Secure your codebase.",
},
},
{
el: {
type: "bi.text",
css: {
fontSize: "16px",
lineHeight: "24px",
color: "#28557a",
},
text: "Deliver high quality code with an extra line of defense to prevent security vulnerabilities and other fatal flaws.",
},
tgap: 24,
bgap: 24,
},
],
},
},
],
},
},
],
},
];
},
});
BI.shortcut("demo.responsive", Widget);
BI.createWidget({
type: "demo.responsive",
element: "#wrapper",
});
</script>
</body>
</html>

8
examples/插件设计.html

@ -2,10 +2,10 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />-->
<!-- <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>-->
<!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
<script src="../dist/2.0/fineui.js"></script> -->
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />
<script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>
</head>
<body>
<div id="wrapper"></div>

51
src/core/wrapper/layout.js

@ -267,26 +267,69 @@ BI.Layout = BI.inherit(BI.Widget, {
this.options.items.splice(index, 1);
},
_clearGap: function (w) {
w.element.css({
"margin-top": "",
"margin-bottom": "",
"margin-left": "",
"margin-right": "",
})
},
_handleGap: function (w, item, hIndex, vIndex) {
var o = this.options;
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({
"margin-top": (((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%"
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({
"margin-left": (((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({
"margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({
"margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%"
});
}
},
// 横向换纵向
_handleReverseGap: function (w, item, index) {
var o = this.options;
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = (index === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({
"margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%"
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({
"margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({
"margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%"
});
}
// 这里的代码是关键
if (o.vgap + o.hgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%"
});
}
},

12
src/core/wrapper/layout/layout.flow.js

@ -42,23 +42,27 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom});
}
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({
"margin-top": (o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%"
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({
"margin-left": (o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({
"margin-right": (o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({
"margin-bottom": (o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%"
});
}
return w;

21
src/core/wrapper/layout/layout.td.js

@ -96,26 +96,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
}
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
var item = arr[i];
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
this._handleGap(w, item, i);
first(w, this.rows++, i);
var width = "";
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;

70
src/core/wrapper/layout/responsive/responsive.flex.horizontal.js

@ -6,42 +6,52 @@
* @extends BI.FlexHorizontalLayout
*/
BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, {
props: function () {
return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
extraCls: "bi-responsive-f-h"
});
},
// props: function () {
// return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
// // extraCls: "bi-responsive-f-h"
// });
// },
_addElement: function (i, item) {
var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null;
}
mounted: function () {
var self = this, o = this.options;
if (o.horizontalAlign !== BI.HorizontalAlign.Center){
return;
}
if (columnSize === "fill") {
// 给自适应列设置一个min-width
var length = 0;
var fillCount = 0, autoCount = 0;
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
if (cz === "fill") {
fillCount++;
cz = 0;
} else if (cz === "" || BI.isNull(cz)) {
autoCount++;
cz = 0;
var defaultResize = function () {
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth <= 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
self._handleReverseGap(child, o.items[i], i | 0);
});
self.element.css("flex-direction", "column");
}
}
length += cz;
}
var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
if (count > 0) {
w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit);
}
var resize = function () {
defaultResize();
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth > 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
})
self.resize();
self.element.css("flex-direction", "row");
}
}
}
}
return w;
this.unResize = BI.Resizers.add(this.getName(), resize);
defaultResize();
},
destroyed: function () {
this.unResize();
}
});
BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout);

72
src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js

@ -6,42 +6,54 @@
* @extends BI.FlexWrapperHorizontalLayout
*/
BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, {
props: function () {
return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
extraCls: "bi-responsive-f-h"
});
},
// props: function () {
// return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
// extraCls: "bi-responsive-f-h"
// });
// },
_addElement: function (i, item) {
var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null;
}
mounted: function () {
var self = this, o = this.options;
if (o.horizontalAlign !== BI.HorizontalAlign.Center){
return;
}
if (columnSize === "fill") {
// 给自适应列设置一个min-width
var length = 0;
var fillCount = 0, autoCount = 0;
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
if (cz === "fill") {
fillCount++;
cz = 0;
} else if (cz === "" || BI.isNull(cz)) {
autoCount++;
cz = 0;
var defaultResize = function () {
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth <= 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
self._handleReverseGap(child, o.items[i], i | 0);
});
self.element.css("flex-direction", "column");
self.$wrapper.element.css("flex-direction", "column");
}
}
length += cz;
}
var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
if (count > 0) {
w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit);
}
var resize = function () {
defaultResize();
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth > 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
})
self.resize();
self.element.css("flex-direction", "row");
self.$wrapper.element.css("flex-direction", "row");
}
}
}
}
return w;
this.unResize = BI.Resizers.add(this.getName(), resize);
defaultResize();
},
destroyed: function () {
this.unResize();
}
});
BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout);

81
src/core/wrapper/layout/responsive/responsive.inline..js

@ -6,60 +6,45 @@
* @extends BI.InlineLayout
*/
BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, {
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null;
}
}
if (columnSize > 0) {
w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit));
mounted: function () {
var self = this, o = this.options;
if (o.horizontalAlign !== BI.HorizontalAlign.Center){
return;
}
w.element.css({
position: "relative",
"vertical-align": o.verticalAlign
});
w.element.addClass("i-item");
if (columnSize === "fill" || columnSize === "") {
var length = o.hgap, czs = 0;
var fillCount = 0, autoCount = 0;
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
if (cz === "fill") {
fillCount++;
cz = 0;
} else if (cz === "" || BI.isNull(cz)) {
autoCount++;
cz = 0;
}
length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz;
czs += cz;
}
if (columnSize === "fill") {
var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
if (count > 0) {
w.element.css("min-width", czs / count / BI.pixRatio + BI.pixUnit);
var defaultResize = function () {
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth <= 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
self._handleReverseGap(child, o.items[i], i | 0);
child.elemenet.css("display", "");
});
}
}
w.element.css("width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
}
if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
if (columnSize === "fill") {
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
} else {
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
}
var resize = function () {
defaultResize();
if (o.scrollable !== true && o.scrollx !== true) {
var clientWidth = document.body.clientWidth;
if(self.element.width() > 2/3 * clientWidth){
if (clientWidth > 768) {
BI.each(self._children, function (i, child) {
self._clearGap(child);
})
self.resize();
}
}
}
}
this._handleGap(w, item, i);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")");
}
return w;
this.unResize = BI.Resizers.add(this.getName(), resize);
defaultResize();
},
destroyed: function () {
this.unResize();
}
});
BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout);

11
src/less/core/wrapper/flex.horizontal.less

@ -62,17 +62,6 @@
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
&.bi-responsive-f-h {
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
&.v-middle {
/* 09版 */
-webkit-box-align: center;

13
src/less/core/wrapper/flex.wrapper.horizontal.less

@ -269,17 +269,4 @@
flex-grow: 1;
}
}
&.bi-responsive-f-h {
& .f-s-h-w {
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
}
}

Loading…
Cancel
Save