食谱

Developer
Size
5,599 Kb
Views
62,744

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.

食谱 Previews

食谱 - 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();
食谱 - Script Codes
食谱 - Script Codes
Home Page Home
Developer Xdsnet
Username xdsnet
Uploaded August 26, 2022
Rating 3
Size 5,599 Kb
Views 62,744
Do you need developer help for 食谱?

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!

Xdsnet (xdsnet) Script Codes
Name
My short log
A Pen by xdsnet
Xdsnet JSQ
Post MY
Your weather
Wikipedia Search
Create amazing Facebook ads with AI!

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!