食谱
How do I make an 食谱?
What is a 食谱? How do you make a 食谱? This script and codes were developed by Xdsnet on 26 August 2022, Friday.
食谱 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>食谱</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h3>中华食谱</h3> <div id="wrapper" class="well"></div> <div id="button"></div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
食谱 - Script Codes CSS Codes
.container { margin-top: 10px;
}
食谱 - Script Codes JS Codes
"use strict";
// 引入ReactBootstrap的组件定义
var Panel = ReactBootstrap.Panel;
var Accordion = ReactBootstrap.Accordion;
var Button = ReactBootstrap.Button;
var FormControl = ReactBootstrap.FormControl;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Modal = ReactBootstrap.Modal;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var ControlLabel = ReactBootstrap.ControlLabel;
var ListGroup = ReactBootstrap.ListGroup;
var ListGroupItem = ReactBootstrap.ListGroupItem;
// 本地存储的初始化处理
// caipins 是菜品 数组
var caipins = typeof localStorage["xds_caipins"] != "undefined" ? JSON.parse(localStorage["xds_caipins"]) : [{ cpname: "开水白菜", shicais: ["鸡汤", "白菜"] }, { cpname: "回锅肉", shicais: ["猪肉", "蒜苗", "豆瓣"] }, { cpname: "辣子鸡", shicais: ["鸡", "辣椒", "花椒"] }];
var cpname = ""; // 菜品名
var shicais = []; //食材数组
// 定义菜品单 Caipins 组件
var Caipins = React.createClass({ displayName: "Caipins", render: function render() { return React.createElement( "div", null, React.createElement( Accordion, null, this.props.data ) ); }
});
// 定义菜品 Caipin 组件,有2个操作,删除 delme 和 编辑 edit
var Caipin = React.createClass({ displayName: "Caipin", delme: function delme() { caipins.splice(this.props.index, 1); // 利用数组内置方法 删除本菜品对应信息 update(); }, edit: function edit() { cpname = this.props.cpname; shicais = this.props.shicais; document.getElementById("show").click(); }, render: function render() { return React.createElement( "div", null, React.createElement( "h4", { className: "text-center" }, "食材" ), React.createElement("hr", null), React.createElement(ShicaiList, { shicais: this.props.shicais }), React.createElement( ButtonToolbar, null, React.createElement( Button, { "class": "delete", bsStyle: "danger", id: "btn-del" + this.props.index, onClick: this.delme }, "删除" ), React.createElement( Button, { bsStyle: "default", id: "btn-edit" + this.props.index, onClick: this.edit }, "编辑" ) ) ); }
});
// 定义食材列表 ShicaiList 组件
var ShicaiList = React.createClass({ displayName: "ShicaiList", render: function render() { var shicaiList = this.props.shicais.map(function (shicai) { return React.createElement( ListGroupItem, null, shicai ); }); return React.createElement( ListGroup, null, shicaiList ); }
});
// 数据更新处理
function update() { localStorage.setItem("xds_caipins", JSON.stringify(caipins)); var rows = []; for (var i = 0; i < caipins.length; i++) { rows.push(React.createElement( Panel, { header: caipins[i].cpname, eventKey: i, bsStyle: "success" }, React.createElement(Caipin, { cpname: caipins[i].cpname, shicais: caipins[i].shicais, index: i }) )); } ReactDOM.render(React.createElement(Caipins, { data: rows }), document.getElementById("wrapper"));
}
// 定义添加菜品 CaipinAdd 组件
//*
var CaipinAdd = React.createClass({ displayName: "CaipinAdd", getInitialState: function getInitialState() { return { showModal: false }; }, close: function close() { cpname = ""; shicais = []; this.setState({ showModal: false }); }, open: function open() { this.setState({ showModal: true }); if (document.getElementById("cpname") && document.getElementById("shicais")) { $("#cpname").val(cpname); $("#shicais").val(shicais); if (cpname != "") { $("#modalTitle").text("编辑菜品"); $("#addButton").text("编辑菜品"); } } else { requestAnimationFrame(this.open); } }, add: function add() { //插入添加 var acpname = document.getElementById("cpname").value; var ashicais = document.getElementById("shicais").value.split(","); var flag = false; for (var i = 0; i < caipins.length; i++) { if (caipins[i].cpname === acpname) { caipins[i].shicais = ashicais; flag = true; break; } } if (!flag) { if (cpname.length < 1) cpname = "未命名"; caipins.push({ cpname: acpname, shicais: ashicais }); } update(); this.close(); }, render: function render() { return React.createElement( "div", null, React.createElement( Button, { bsStyle: "primary", bsSize: "large", onClick: this.open, id: "show" }, "添加菜品" ), React.createElement( Modal, { show: this.state.showModal, onHide: this.close }, React.createElement( Modal.Header, { closeButton: true }, React.createElement( Modal.Title, { id: "modalTitle" }, "添加菜品" ) ), React.createElement( Modal.Body, null, React.createElement( ControlLabel, null, "菜品" ), React.createElement(FormControl, { id: "cpname", type: "text", label: "菜品", placeholder: "菜品名" }), React.createElement( ControlLabel, null, "食材" ), React.createElement(FormControl, { id: "shicais", type: "textarea", label: "食材", placeholder: "食材内容,以逗号分隔" }) ), React.createElement( Modal.Footer, null, React.createElement( Button, { onClick: this.add, bsStyle: "primary", id: "addButton" }, "添加菜品" ), React.createElement( Button, { onClick: this.close }, "关闭" ) ) ) ); }
});
//*/
ReactDOM.render(React.createElement(CaipinAdd, null), document.getElementById("button"));
update();
Developer | Xdsnet |
Username | xdsnet |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 5,599 Kb |
Views | 62,744 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
My short log | 3,354 Kb |
A Pen by xdsnet | 4,135 Kb |
Xdsnet JSQ | 2,878 Kb |
Post MY | 3,123 Kb |
Your weather | 2,981 Kb |
Wikipedia Search | 4,766 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!