<html> <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> </head> <body> <div id="wrapper"></div> <script> var Model = BI.inherit(Fix.Model, { state: function () { return { columnSize: [200, "fill"] }; } }); BI.model("demo.model", Model); var Widget = BI.inherit(BI.Widget, { props: { height: 200, width: 600 }, _store: function () { return BI.Models.getModel("demo.model"); }, setup: function () { var store = BI.useStore(); return function () { return { type: "bi.htape", columnSize: function () { return store.model.columnSize; }, items: [{ type: "bi.label", css: { background: "#eee" } }, { type: "bi.center_adapt", css: { background: "#e0e0e0" }, items: [{ type: "bi.button", text: "点击", handler: function () { store.model.columnSize = [300, "fill"] } }] }] }; }; } }); BI.shortcut("demo.hooks", Widget); BI.createWidget({ type: "bi.absolute", items: [{ el: { type: "demo.hooks" }, top: 100, left: 100 }], element: "#wrapper" }); </script> </body> </html>