├── images ├── mark.png ├── mark1.png ├── mark2.png ├── menu.png ├── today.png ├── dingdan.png ├── jiachang.jpg ├── shuijiao.jpg ├── tuijian.png ├── dandanmian.jpg ├── huiguorou.jpg ├── remaicaipin.png ├── duojiaoyutou.jpg ├── huiguochaocai.jpg ├── qingjiaoyumi.jpg ├── yuxiangrousi.jpg └── hongshaochaocai.jpg ├── LICENSE ├── css ├── style3.css ├── reset.css ├── style2.css ├── carts.css └── style1.css ├── html ├── order-statistic.html ├── hot.html ├── recommend.html ├── myorder.html ├── today.html ├── index.html └── selected.html ├── js ├── carts.js ├── universial.js └── jquery.dialog.js └── README.md /images/mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/mark.png -------------------------------------------------------------------------------- /images/mark1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/mark1.png -------------------------------------------------------------------------------- /images/mark2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/mark2.png -------------------------------------------------------------------------------- /images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/menu.png -------------------------------------------------------------------------------- /images/today.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/today.png -------------------------------------------------------------------------------- /images/dingdan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/dingdan.png -------------------------------------------------------------------------------- /images/jiachang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/jiachang.jpg -------------------------------------------------------------------------------- /images/shuijiao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/shuijiao.jpg -------------------------------------------------------------------------------- /images/tuijian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/tuijian.png -------------------------------------------------------------------------------- /images/dandanmian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/dandanmian.jpg -------------------------------------------------------------------------------- /images/huiguorou.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/huiguorou.jpg -------------------------------------------------------------------------------- /images/remaicaipin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/remaicaipin.png -------------------------------------------------------------------------------- /images/duojiaoyutou.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/duojiaoyutou.jpg -------------------------------------------------------------------------------- /images/huiguochaocai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/huiguochaocai.jpg -------------------------------------------------------------------------------- /images/qingjiaoyumi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/qingjiaoyumi.jpg -------------------------------------------------------------------------------- /images/yuxiangrousi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/yuxiangrousi.jpg -------------------------------------------------------------------------------- /images/hongshaochaocai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyuano/Web/HEAD/images/hongshaochaocai.jpg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 yuanyuano 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/style3.css: -------------------------------------------------------------------------------- 1 | body, h1, h2, h3, h4, h5, h6, p, pre, blockquote, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, button, th, td { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .nav_bg { 6 | height: 44px; 7 | line-height: 44px; 8 | background: #2196f3; 9 | } 10 | .nav_bg .wrap { 11 | width: 1200px; 12 | margin: 0; 13 | display: block 14 | } 15 | .nav { 16 | float: left; 17 | } 18 | 19 | .nav a { 20 | display: block; 21 | float: left; 22 | padding: 0 20px; 23 | color: #fff; 24 | font-size: 16px; 25 | height: 44px; 26 | line-height: 44px; 27 | } 28 | .clearfix:after { 29 | content: "."; 30 | display: block; 31 | height: 0; 32 | clear: both; 33 | visibility: hidden; 34 | } 35 | .nav { 36 | position: relative; 37 | z-index: 1; 38 | } 39 | 40 | .nav .nLi { 41 | float: left; 42 | position: relative; 43 | display: inline; 44 | } 45 | .nav .nLi .e { 46 | padding: 0 0 0 90px; 47 | float: left; 48 | } 49 | .nav .nLi .d { 50 | padding: 0 0 0 20px; 51 | float: left; 52 | } 53 | .nav .nLi h3 a { 54 | display: block; 55 | } 56 | .nav .nLi .d a:hover { 57 | background: #0D5780; 58 | color: #fff; 59 | } 60 | .nav .on h3 a { 61 | background: #1784db; 62 | color: #fff; 63 | } 64 | .statistic{ 65 | position: relative; 66 | width: 100%; 67 | height: 40px; 68 | margin-top: 50px; 69 | 70 | text-align: center; 71 | } 72 | 73 | .statistic .m{ 74 | color: #fff; 75 | display: block; 76 | } 77 | .content { 78 | position: relative; 79 | float: left; 80 | padding: 60px 0 0 100px; 81 | 82 | } 83 | 84 | .left{ 85 | position: relative; 86 | float: left; 87 | margin-top: 100px; 88 | margin-left: 200px; 89 | } 90 | 91 | .display_none{ 92 | display:none; 93 | } 94 | 95 | 96 | .left li {height:40px; position:relative; display:block;padding:20px 0 0 120px;} 97 | 98 | .left li a{color: #7d7d7d; display:block;font-size:20px;position: relative;} 99 | 100 | .selected a{ 101 | color: #FF0000; 102 | text-decoration: underline; 103 | } -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* 清除内外边距 */ 2 | 3 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 4 | /* structural elements 结构元素 */ 5 | 6 | dl, dt, dd, ul, ol, li, 7 | /* list elements 列表元素 */ 8 | 9 | pre, 10 | /* text formatting elements 文本格式元素 */ 11 | 12 | fieldset, lengend, button, input, textarea, 13 | /* form elements 表单元素 */ 14 | 15 | th, td { 16 | /* table elements 表格元素 */ 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | 22 | h1 { 23 | font-size: 18px; 24 | /* 18px / 12px = 1.5 */ 25 | } 26 | 27 | h2 { 28 | font-size: 16px; 29 | } 30 | 31 | h3 { 32 | font-size: 14px; 33 | } 34 | 35 | h4, h5, h6 { 36 | font-size: 100%; 37 | } 38 | 39 | address, cite, dfn, em, var { 40 | font-style: normal; 41 | } 42 | /* 将斜体扶正 */ 43 | 44 | code, kbd, pre, samp, tt { 45 | font-family: "Courier New", Courier, monospace; 46 | } 47 | /* 统一等宽字体 */ 48 | 49 | small { 50 | font-size: 12px; 51 | } 52 | /* 小于 12px 的中文很难阅读，让 small 正常化 */ 53 | /* 重置列表元素 */ 54 | 55 | ul, ol { 56 | list-style: none; 57 | } 58 | /* 重置文本格式元素 */ 59 | 60 | a { 61 | text-decoration: none; 62 | color: #000; 63 | } 64 | /*a:hover { text-decoration: underline; }*/ 65 | 66 | abbr[title], acronym[title] { 67 | /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ 68 | border-bottom: 1px dotted; 69 | cursor: help; 70 | } 71 | 72 | q:before, q:after { 73 | content: ''; 74 | } 75 | /* 重置表单元素 */ 76 | 77 | legend { 78 | color: #000; 79 | } 80 | /* for ie6 */ 81 | 82 | fieldset, img { 83 | border: none; 84 | } 85 | /* img 搭车：让链接里的 img 无边框 */ 86 | /* 注：optgroup 无法扶正 */ 87 | 88 | button, input, select, textarea { 89 | font-size: 100%; 90 | /* 使得表单元素在 ie 下能继承字体大小 */ 91 | } 92 | /* 重置表格元素 */ 93 | 94 | table { 95 | border-collapse: collapse; 96 | border-spacing: 0; 97 | } 98 | /* 重置 hr */ 99 | 100 | hr { 101 | border: none; 102 | height: 1px; 103 | } 104 | /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */ 105 | 106 | html { 107 | overflow-y: scroll; 108 | } 109 | /* 浮动 */ 110 | 111 | .fl { 112 | float: left 113 | } 114 | 115 | .fr { 116 | float: right 117 | } 118 | /* 清除浮动 */ 119 | 120 | .clearfix:after { 121 | content: " "; 122 | display: block; 123 | clear: both; 124 | visibility: hidden; 125 | } 126 | -------------------------------------------------------------------------------- /css/style2.css: -------------------------------------------------------------------------------- 1 | body, h1, h2, h3, h4, h5, h6, p, pre, blockquote, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, button, th, td { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .nav_bg { 6 | height: 44px; 7 | line-height: 44px; 8 | background: #2196f3; 9 | } 10 | .nav_bg .wrap { 11 | width: 1200px; 12 | margin: 0; 13 | display: block 14 | } 15 | .nav { 16 | float: left; 17 | } 18 | 19 | .nav a { 20 | display: block; 21 | float: left; 22 | padding: 0 20px; 23 | color: #fff; 24 | font-size: 16px; 25 | height: 44px; 26 | line-height: 44px; 27 | } 28 | .clearfix:after { 29 | content: "."; 30 | display: block; 31 | height: 0; 32 | clear: both; 33 | visibility: hidden; 34 | } 35 | .nav { 36 | position: relative; 37 | z-index: 1; 38 | } 39 | 40 | .nav .nLi { 41 | float: left; 42 | position: relative; 43 | display: inline; 44 | } 45 | .nav .nLi .e { 46 | padding: 0 0 0 90px; 47 | float: left; 48 | } 49 | .nav .nLi .d { 50 | padding: 0 0 0 20px; 51 | float: left; 52 | } 53 | .nav .nLi h3 a { 54 | display: block; 55 | } 56 | .nav .nLi .d a:hover { 57 | background: #0D5780; 58 | color: #fff; 59 | } 60 | .nav .on h3 a { 61 | background: #1784db; 62 | color: #fff; 63 | } 64 | .myorder{ 65 | position: relative; 66 | width: 100%; 67 | height: 40px; 68 | margin-top: 50px; 69 | 70 | text-align: center; 71 | } 72 | 73 | .myorder .m{ 74 | color: #fff; 75 | display: block; 76 | } 77 | 78 | .order_content{ 79 | position: relative; 80 | margin-left: 300px; 81 | margin-right: 300px; 82 | } 83 | .order_lists li{ 84 | position: relative; 85 | margin-top: 40px; 86 | background: #F0F0F0; 87 | } 88 | .order li{ 89 | position: relative; 90 | margin-top: 40px; 91 | background: #F0F0F0; 92 | } 93 | .order_lists li .food{ 94 | position: absolute; 95 | margin-left: 60px; 96 | padding:40px 0; 97 | font-size: 20px; 98 | top: 40%; 99 | transform: translateY(-50%); 100 | } 101 | .order_lists li .num{ 102 | position: absolute; 103 | margin-left: 60px; 104 | font-size: 15px; 105 | top:65%; 106 | } 107 | .order_lists li .disc{ 108 | position: absolute; 109 | margin-left: 200px; 110 | font-size: 15px; 111 | top: 45%; 112 | } 113 | .order_lists li .price{ 114 | position: absolute; 115 | margin-left: 600px; 116 | font-size: 15px; 117 | top: 45%; 118 | } 119 | .order_lists li button{ 120 | float: right; 121 | height: 30px; 122 | width: 60px; 123 | margin-top: 45px; 124 | } 125 | .b_add{ 126 | position: relative; 127 | margin: 0 auto; 128 | width: 200px; 129 | text-align: center; 130 | } 131 | .b_add button{ 132 | height: 40px; 133 | width: 80px; 134 | margin-top: 50px; 135 | } 136 | .my_model{ 137 | position: fixed; 138 | display: none; 139 | top:50%; 140 | left: 50%; 141 | margin-top: -50px; 142 | margin-left: -200px; 143 | z-index: 9999; 144 | width: 360px; 145 | height: 120px; 146 | border: 1px solid #aeaeae; 147 | border-radius: 3px; 148 | padding: 20px; 149 | background: #fff; 150 | } 151 | .my_model .title{ 152 | font-size: 14px; 153 | color: #3c3c3c; 154 | font-weight: 700; 155 | margin-bottom: 20px; 156 | } 157 | .my_model .title .closeModel{ 158 | float: right; 159 | cursor: pointer; 160 | } 161 | .my_model p{ 162 | line-height:16px; 163 | text-align: center; 164 | } 165 | .my_model .opBtn{ 166 | margin-top: 20px; 167 | } 168 | .my_model .opBtn a{ 169 | width: 58px; 170 | height: 28px; 171 | line-height: 28px; 172 | text-align: center; 173 | -webkit-border-radius: 1px; 174 | -moz-border-radius: 1px; 175 | -ms-border-radius: 1px; 176 | border-radius: 1px; 177 | display: inline-block; 178 | margin-right: 10px; 179 | font-weight: 700; 180 | } 181 | .my_model .dialog-sure{ 182 | background: #52a0e5; 183 | color: #fff; 184 | border: 1px solid #52a0e5; 185 | position: relative; 186 | top:80%; 187 | left:25%; 188 | } 189 | 190 | .my_model .dialog-close{ 191 | background: #fff; 192 | border: 1px solid #d9d9d9; 193 | color: #3c3c3c; 194 | position: relative; 195 | top:80%; 196 | left:40%; 197 | } -------------------------------------------------------------------------------- /html/order-statistic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 订单统计 7 | 8 | 9 | 10 | 11 |
12 |
13 | 27 |
28 |
29 |
30 |

订单统计

31 |
32 | 33 | 34 | 35 |
36 | 58 |
59 | 60 |
61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 | 69 |
70 |
71 | 72 |
73 |
74 | 75 | 76 | 77 | 162 | 163 | -------------------------------------------------------------------------------- /html/hot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 点餐系统 人机交互 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 32 |
33 |
34 | 35 |
36 | 77 |
78 | 79 |
80 |

热卖菜品

81 |
82 | 83 | 84 | 175 |
176 | 177 | 179 | 180 | 181 | -------------------------------------------------------------------------------- /html/recommend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 点餐系统 人机交互 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 32 |
33 |
34 | 35 |
36 | 78 |
79 | 80 |
81 |

推荐菜品

82 |
83 | 85 | 177 | -------------------------------------------------------------------------------- /html/myorder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 我的订单 7 | 8 | 9 | 10 | 11 |
12 |
13 | 27 |
28 |
29 | 30 |
31 |

我的订单

32 |
33 | 34 | 110 | 111 |
112 | 113 |
114 |
115 | 116 |
117 |
118 |

删除菜品X

119 |

您确认要删除该菜品吗？

120 |
121 | 确定 122 | 关闭 123 |
124 |
125 | 126 | 127 | 128 | 129 | 217 | 218 | -------------------------------------------------------------------------------- /js/carts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Administrator on 2017/5/24. 3 | */ 4 | 5 | $(function () { 6 | 7 | //全局的checkbox选中和未选中的样式 8 | var $allCheckbox = $('input[type="checkbox"]'),$sonCheckBox = $('.son_check'); //每个商铺下的商品的checkbox 9 | $sonCheckBox.click(function () { 10 | if ($(this).is(':checked')) { 11 | $(this).next('label').addClass('mark'); 12 | totalMoney(); 13 | } else { 14 | $(this).next('label').removeClass('mark') 15 | totalMoney(); 16 | } 17 | }); 18 | 19 | console.log(1) 20 | 21 | //=================================================商品数量============================================== 22 | var $plus = $('.plus'), 23 | $reduce = $('.reduce'), 24 | $all_sum = $('.sum'); 25 | $plus.click(function () { 26 | var $inputVal = $(this).prev('input'), 27 | $count = parseInt($inputVal.val())+1, 28 | $obj = $(this).parents('.amount_box').find('.reduce'), 29 | $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'), 30 | $price = $(this).parents('.order_lists').find('.price').html(), //单价 31 | $priceTotal = $count*parseInt($price.substring(1)); 32 | $inputVal.val($count); 33 | $priceTotalObj.html('￥'+$priceTotal); 34 | if($inputVal.val()>1 && $obj.hasClass('reSty')){ 35 | $obj.removeClass('reSty'); 36 | } 37 | totalMoney(); 38 | }); 39 | 40 | $reduce.click(function () { 41 | var $inputVal = $(this).next('input'), 42 | $count = parseInt($inputVal.val())-1, 43 | $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'), 44 | $price = $(this).parents('.order_lists').find('.price').html(), //单价 45 | $priceTotal = $count*parseInt($price.substring(1)); 46 | if($inputVal.val()>1){ 47 | $inputVal.val($count); 48 | $priceTotalObj.html('￥'+$priceTotal); 49 | } 50 | if($inputVal.val()==1 && !$(this).hasClass('reSty')){ 51 | $(this).addClass('reSty'); 52 | } 53 | totalMoney(); 54 | }); 55 | 56 | $all_sum.keyup(function () { 57 | var $count = 0, 58 | $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'), 59 | $price = $(this).parents('.order_lists').find('.price').html(), //单价 60 | $priceTotal = 0; 61 | if($(this).val()==''){ 62 | $(this).val('1'); 63 | } 64 | $(this).val($(this).val().replace(/\D|^0/g,'')); 65 | $count = $(this).val(); 66 | $priceTotal = $count*parseInt($price.substring(1)); 67 | $(this).attr('value',$count); 68 | $priceTotalObj.html('￥'+$priceTotal); 69 | totalMoney(); 70 | }) 71 | $('.calBtn').click(function(){ 72 | 73 | $.sendConfirm({ 74 | withCenter: true, 75 | title: '点餐交易确认', 76 | msg: '您确定要提交订单吗？', 77 | button: { 78 | confirm: '确认', 79 | cancel: '取消', 80 | cancelFirst: true 81 | }, 82 | onConfirm: function() { 83 | 84 | $.sendMsg('点菜成功,祝您用餐愉快！', 3000, function() { 85 | // 第一种 86 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 87 | 88 | $(".order_lists").remove(); 89 | $('.calBtn a').removeClass('btn_sty'); 90 | var total_money=0; 91 | var total_count=0; 92 | $('.total_text').html('￥'+total_money); 93 | $('.piece_num').html(total_count); 94 | 95 | 96 | Deletetable(); 97 | 98 | 99 | function Deletetable() { 100 | db.transaction(function(tx) { 101 | //function showAllData() { 102 | //db.transaction(function(tx) { 103 | // tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)", []); 104 | tx.executeSql("SELECT * FROM MsgDate", [], function(tx, rs) { 105 | tx.executeSql("CREATE TABLE IF NOT EXISTS Dingdan(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 106 | for(var i = 0; i < rs.rows.length; i++) { 107 | tx.executeSql("INSERT INTO Dingdan VALUES(?,?,?,?,?)", [rs.rows.item(i).picname,rs.rows.item(i).dishname,rs.rows.item(i).dishdisc,rs.rows.item(i).disprice,rs.rows.item(i).num]); 108 | } 109 | 110 | }) 111 | // }) 112 | // } 113 | // tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 114 | tx.executeSql("drop table MsgDate", [],function(tx, rs) { 115 | 116 | console.log("delete success!") 117 | 118 | }) 119 | // 120 | }) 121 | } 122 | 123 | }); 124 | }, 125 | onCancel: function() { 126 | 127 | $.sendMsg('点菜失败', 3000, function() { 128 | console.log('sendMsg closed'); 129 | 130 | }); 131 | }, 132 | onClose: function() { 133 | 134 | $.sendMsg('点菜失败', 3000, function() { 135 | console.log('sendMsg closed'); 136 | 137 | }); 138 | console.log('点击关闭！'); 139 | } 140 | }); 141 | 142 | 143 | }) 144 | 145 | 146 | //======================================移除商品======================================== 147 | 148 | var $order_lists = null; 149 | var $order_content = ''; 150 | var namer; 151 | $('.delBtn').click(function () { 152 | $order_lists = $(this).parents('.order_lists'); 153 | $order_content = $order_lists.parents('.order_content'); 154 | namer= $(this).parents('.order_lists').find('.list_text').html(); 155 | name=namer.split(">")[1].split("<")[0] 156 | console.log(name.length) 157 | 158 | $('.model_bg').fadeIn(300); 159 | $('.my_model').fadeIn(300); 160 | }); 161 | 162 | 163 | //关闭模态框 164 | $('.closeModel').click(function () { 165 | closeM(); 166 | }); 167 | $('.dialog-close').click(function () { 168 | closeM(); 169 | }); 170 | function closeM() { 171 | $('.model_bg').fadeOut(300); 172 | $('.my_model').fadeOut(300); 173 | } 174 | //确定按钮，移除商品 175 | $('.dialog-sure').click(function () { 176 | $order_lists.remove(); 177 | if($order_content.html().trim() == null || $order_content.html().trim().length == 0){ 178 | $order_content.parents('.cartBox').remove(); 179 | $.sendMsg('购物车里空空如也!', 3000, function() { 180 | console.log('sendMsg closed'); 181 | 182 | }); 183 | } 184 | closeM(); 185 | $sonCheckBox = $('.son_check'); 186 | totalMoney(); 187 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 188 | Deletedish(); 189 | 190 | function Deletedish(datatable) { 191 | db.transaction(function(tx) { 192 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 193 | tx.executeSql("DELETE FROM MsgDate WHERE dishname=(?)", [name], function(tx, rs) { 194 | 195 | console.log("delete success!") 196 | }) 197 | }) 198 | } 199 | }) 200 | 201 | //======================================总计========================================== 202 | 203 | function totalMoney() { 204 | var total_money = 0; 205 | var total_count = 0; 206 | var calBtn = $('.calBtn a'); 207 | $sonCheckBox.each(function () { 208 | if ($(this).is(':checked')) { 209 | var goods = parseInt($(this).parents('.order_lists').find('.sum_price').html().substring(1)); 210 | var num = parseInt($(this).parents('.order_lists').find('.sum').val()); 211 | console.log(num) 212 | total_money += goods; 213 | total_count += num; 214 | } 215 | }); 216 | $('.total_text').html('￥'+total_money); 217 | $('.piece_num').html(total_count); 218 | 219 | // console.log(total_money,total_count); 220 | 221 | if(total_money!=0 && total_count!=0){ 222 | if(!calBtn.hasClass('btn_sty')){ 223 | calBtn.addClass('btn_sty'); 224 | } 225 | }else{ 226 | if(calBtn.hasClass('btn_sty')){ 227 | calBtn.removeClass('btn_sty'); 228 | } 229 | } 230 | } 231 | 232 | 233 | }); -------------------------------------------------------------------------------- /css/carts.css: -------------------------------------------------------------------------------- 1 | 2 | input[type="checkbox"]{ 3 | display: none; 4 | } 5 | label{ 6 | position: relative; 7 | display: inline-block; 8 | z-index: 1; 9 | border: 1px solid #b8b8b8; 10 | margin-left: 10px; 11 | border-radius: 1px; 12 | width: 12px; 13 | height: 12px; 14 | cursor: pointer; 15 | } 16 | label.mark{ 17 | background: url("../images/mark1.png") no-repeat -1px -1px; 18 | } 19 | 20 | 21 | 22 | .cartMain{ 23 | position: relative; 24 | width: 1000px; 25 | min-width: 1000px; 26 | max-width: 1000px; 27 | margin: 0 ; 28 | padding: 0px 0px 100px; 29 | min-height: 210px; 30 | position: absolute; 31 | left:18%; 32 | top:7%; 33 | } 34 | /*购物车头部*/ 35 | .cartMain_hd{ 36 | width: 1000px; 37 | height: 50px; 38 | line-height: 50px; 39 | color: #3c3c3c; 40 | } 41 | .cartMain_hd .cartTop{ 42 | height: 50px; 43 | } 44 | .cartMain_hd .cartTop .list_chk{ 45 | width: 80px; 46 | text-indent: 30px; 47 | } 48 | .cartMain_hd .cartTop .list_con{ 49 | width: 312px; 50 | } 51 | .cartMain_hd .cartTop .list_chk label{ 52 | position: absolute; 53 | left: 10px; 54 | top:19px; 55 | margin: 0; 56 | } 57 | .cartMain_hd .cartTop .list_info{ 58 | padding: 0; 59 | text-indent: 15px; 60 | } 61 | .cartMain_hd .cartTop .list_con{ 62 | text-indent: 140px; 63 | } 64 | 65 | 66 | .cartBox{ 67 | width: 1000px; 68 | /* margin-bottom: 15px; */ 69 | } 70 | .cartBox .shop_info{ 71 | position: relative; 72 | width: 1000px; 73 | height: 38px; 74 | background-color: #fff; 75 | line-height: 38px; 76 | vertical-align: baseline; 77 | } 78 | .cartBox .shop_info .all_check{ 79 | position: relative; 80 | float: left; 81 | width: 30px; 82 | height: 38px; 83 | } 84 | 85 | .cartBox .shop_info .all_check input[type="checkbox"]{ 86 | position: absolute; 87 | z-index: 0; 88 | left: -20px; 89 | top: -20px; 90 | } 91 | .cartBox .shop_info .all_check .shop{ 92 | position: absolute; 93 | top:13px; 94 | } 95 | .cartBox .shop_info .shop_name{ 96 | float: left; 97 | } 98 | 99 | 100 | 101 | /*商品列表*/ 102 | .cartBox .order_content{ 103 | border: 1px solid #ccc; 104 | } 105 | .cartBox .order_content a{ 106 | display: block; 107 | } 108 | .order_lists{ 109 | width: 1000px; 110 | height: 130px; 111 | border-bottom: 1px solid #e7e7e7; 112 | } 113 | .order_lists:last-child{ 114 | border-bottom: none; 115 | } 116 | .order_lists li{ 117 | float: left; 118 | height: 100%; 119 | } 120 | 121 | .order_lists .list_chk{ 122 | position: absolute; 123 | width: 10px; 124 | padding: 30px 0 0 0; 125 | } 126 | .order_lists .list_chk input[type="checkbox"]{ 127 | position: absolute; 128 | z-index: 0; 129 | left: -20px; 130 | top: -20px; 131 | } 132 | .order_lists .list_chk label{ 133 | margin: 20px 0 0 24px; 134 | } 135 | 136 | .order_lists .list_con{ 137 | width: 200px; 138 | /* padding: 10px 0 0 0px; */ 139 | position: relative; 140 | left:5%; 141 | } 142 | .order_lists .list_con .list_img{ 143 | width: 120px; 144 | height: 80px; 145 | margin-top: 20px; 146 | float: left; 147 | } 148 | .order_lists .list_con .list_img img{ 149 | width: 100%; 150 | vertical-align: top; 151 | float: left; 152 | } 153 | .order_lists .list_con .list_text{ 154 | margin: 40px 0 0 10px; 155 | line-height: 18px; 156 | width: 60px; 157 | float: left; 158 | padding: 10px 0 0 10px; 159 | } 160 | .order_lists .list_con .list_text a{ 161 | color: #3c3c3c; 162 | } 163 | .order_lists .list_con .list_text a:hover{ 164 | color: #ff873e; 165 | text-decoration: underline; 166 | } 167 | 168 | .order_lists .list_info{ 169 | width: 160px; 170 | box-sizing: border-box; 171 | padding: 53px 20px 0 0; 172 | position: relative; 173 | left:10%; 174 | } 175 | .order_lists .list_info p{ 176 | color: #9c9c9c; 177 | line-height: 18px; 178 | margin-left: 15px; 179 | } 180 | .order_lists .list_price{ 181 | width: 120px; 182 | position: relative; 183 | left:12%; 184 | 185 | } 186 | .order_lists .list_price .price{ 187 | margin-top: 20px; 188 | line-height: 18px; 189 | font-family: Verdana,Tahoma,arial; 190 | color: #3c3c3c; 191 | font-weight: bold; 192 | padding: 30px 0; 193 | 194 | } 195 | 196 | .order_lists .list_amount{ 197 | width: 120px; 198 | position: relative; 199 | left:11%; 200 | 201 | } 202 | .order_lists .list_amount .amount_box{ 203 | margin-top: 20px; 204 | width: 77px; 205 | height: 30px; 206 | position: relative; 207 | padding: 30px 0 0 0; 208 | 209 | 210 | } 211 | .order_lists .list_amount .amount_box input{ 212 | width: 40px; 213 | height: 25px; 214 | line-height: 15px; 215 | border: 1px solid #aaa; 216 | color: #343434; 217 | text-align: center; 218 | padding: 4px 0; 219 | background-color: #fff; 220 | z-index: 2; 221 | position: absolute; 222 | left: 18px; 223 | float: left; 224 | 225 | } 226 | .order_lists .list_amount .amount_box a{ 227 | float: left; 228 | height: 23px; 229 | width: 17px; 230 | border: 1px solid #e5e5e5; 231 | background: #f0f0f0; 232 | text-align: center; 233 | line-height: 23px; 234 | color: #444; 235 | position: absolute; 236 | top:0; 237 | } 238 | .order_lists .list_amount .amount_box a:hover{ 239 | border-color: #ff873e; 240 | text-decoration: none; 241 | color: #ff873e; 242 | z-index: 3; 243 | } 244 | 245 | .order_lists .list_amount .amount_box .reduce{ 246 | left: 0; 247 | 248 | height:24px; 249 | position :relative; 250 | top :-1%; 251 | } 252 | 253 | .order_lists .list_amount .amount_box .reSty{ 254 | color: #cbcbcb; 255 | } 256 | .order_lists .list_amount .amount_box .reSty:hover{ 257 | border-right: none; 258 | border-color: #e5e5e5; 259 | text-decoration: none; 260 | color: #cbcbcb; 261 | } 262 | 263 | .order_lists .list_amount .amount_box .plus{ 264 | border-left-color: transparent; 265 | right: 0; 266 | position :relative; 267 | top :-1%; 268 | left:50%; 269 | 270 | 271 | } 272 | 273 | 274 | .order_lists .list_sum{ 275 | width: 120px; 276 | position: relative; 277 | left:14%; 278 | } 279 | .order_lists .list_sum .sum_price{ 280 | line-height: 18px; 281 | margin-top: 20px; 282 | font-family: Verdana,Tahoma,arial; 283 | color: #ff0000; 284 | font-weight: bold; 285 | padding: 30px 0; 286 | 287 | } 288 | .order_lists .list_op{ 289 | width: 60px; 290 | position: relative; 291 | left:13%; 292 | } 293 | .order_lists .list_op .del{ 294 | margin-top: 20px; 295 | line-height: 18px; 296 | padding: 30px 0; 297 | 298 | } 299 | 300 | /*底部总计算价*/ 301 | .bar-wrapper{ 302 | width: 1008px; 303 | height: 50px; 304 | position: fixed; 305 | bottom: -1px; 306 | z-index: 99; 307 | background: #e5e5e5; 308 | } 309 | .bar-wrapper .bar-right{ 310 | float: right; 311 | color: #3c3c3c; 312 | } 313 | .bar-wrapper .bar-right strong{ 314 | color: #f40; 315 | } 316 | 317 | .bar-wrapper .bar-right .piece{ 318 | float: left; 319 | min-width: 110px; 320 | margin-right: 20px; 321 | height: 50px; 322 | line-height: 50px; 323 | } 324 | .bar-wrapper .bar-right .piece .piece_num{ 325 | display: inline-block; 326 | padding: 0 10px; 327 | font-weight: 700; 328 | font-size: 18px; 329 | font-family: tohoma,arial; 330 | } 331 | .bar-wrapper .bar-right .totalMoney{ 332 | float: left; 333 | min-width: 100px; 334 | height: 50px; 335 | line-height: 50px; 336 | } 337 | .bar-wrapper .bar-right .totalMoney .total_text{ 338 | float: right; 339 | font-weight: 400; 340 | font-size: 20px; 341 | font-family: Arial; 342 | vertical-align: middle; 343 | margin-right: 10px; 344 | margin-left: 15px; 345 | } 346 | .bar-wrapper .bar-right .calBtn{ 347 | float: left; 348 | } 349 | .bar-wrapper .bar-right .calBtn a{ 350 | display: block; 351 | width: 120px; 352 | height: 50px; 353 | color: #fff; 354 | background: #B0B0B0; 355 | cursor: not-allowed; 356 | font-size: 22px; 357 | letter-spacing: 5px; 358 | text-decoration: none; 359 | line-height: 50px; 360 | text-align: center; 361 | border-radius: 2px; 362 | } 363 | .bar-wrapper .bar-right .calBtn a.btn_sty{ 364 | background: #f40; 365 | cursor: pointer; 366 | } 367 | 368 | /*自己定义的模态框*/ 369 | .model_bg{ 370 | position: absolute; 371 | top:0; 372 | left: 0; 373 | bottom: 0; 374 | right: 0; 375 | background: rgba(0,0,0,.6); 376 | z-index: 999; 377 | display: none; 378 | } 379 | .my_model{ 380 | position: fixed; 381 | display: none; 382 | top:50%; 383 | left: 50%; 384 | margin-top: -50px; 385 | margin-left: -200px; 386 | z-index: 9999; 387 | width: 360px; 388 | height: 120px; 389 | border: 1px solid #aeaeae; 390 | border-radius: 3px; 391 | padding: 20px; 392 | background: #fff; 393 | } 394 | .my_model .title{ 395 | font-size: 14px; 396 | color: #3c3c3c; 397 | font-weight: 700; 398 | margin-bottom: 20px; 399 | } 400 | .my_model .title .closeModel{ 401 | float: right; 402 | cursor: pointer; 403 | } 404 | .my_model p{ 405 | line-height:16px; 406 | text-align: center; 407 | } 408 | .my_model .opBtn{ 409 | margin-top: 20px; 410 | } 411 | .my_model .opBtn a{ 412 | width: 58px; 413 | height: 28px; 414 | line-height: 28px; 415 | text-align: center; 416 | -webkit-border-radius: 1px; 417 | -moz-border-radius: 1px; 418 | -ms-border-radius: 1px; 419 | border-radius: 1px; 420 | display: inline-block; 421 | margin-right: 10px; 422 | font-weight: 700; 423 | } 424 | .my_model .dialog-sure{ 425 | background: #52a0e5; 426 | color: #fff; 427 | border: 1px solid #52a0e5; 428 | position: relative; 429 | top:80%; 430 | left:25%; 431 | } 432 | 433 | .my_model .dialog-close{ 434 | background: #fff; 435 | border: 1px solid #d9d9d9; 436 | color: #3c3c3c; 437 | position: relative; 438 | top:80%; 439 | left:40%; 440 | } -------------------------------------------------------------------------------- /html/today.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 点餐系统 人机交互 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 32 |
33 |
34 | 35 |
36 | 78 |
79 | 80 |
81 |

今日菜品

82 |
83 | 85 | 255 |
256 | -------------------------------------------------------------------------------- /html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | HCI小组订餐系统 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 32 |
33 |
34 | 35 |
36 | 78 |
79 | 80 |
81 |

今日菜品

82 |
83 | 85 | 255 |
256 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 系统简介 2 | 该 *Web点餐系统* 是为了给食堂提供下一天的菜品做参考，使用```HTML5 + CSS3 + JS(jQuery)```进行**前端开发**，数据库采用本地数据库**WebSQL**，不使用后端开发。 系统实现以下基本功能： 3 | - 首页导航有三个：首页、我的订单、订单统计 4 | - 在首页中： 5 | > 展示当天菜品、热卖菜品、推荐菜品，显示完整的信息。 6 | 7 | > 实现点菜，结果显示在合适位置中，所点的菜能够取消。 8 | 9 | > 点菜的“提交”是将数据保存到本地，然后在“我的订单”中重现这些数据。 10 | 11 | - 在我的订单页面中，能够从保存在本地的数据中心提取出数据并能显示，并能添加和删除。 12 | - 在订单统计页面中，用图表显示当天热卖前三的菜品统计结果。统计结果用不同类型的图表展示以下维度：菜品、价格、口味、食材。 13 | # 系统设计 14 | **系统功能结构图：** 15 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200120105757198.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5MjAxNzIyMDMwMjAyOA==,size_16,color_FFFFFF,t_70#pic_center) 16 | # 系统实现 17 | ## 首页（当天菜品）/推荐菜品/热买菜品 18 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200120142531138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5MjAxNzIyMDMwMjAyOA==,size_16,color_FFFFFF,t_70#pic_center) 19 | ### 页面布局的核心html文件 20 | 让按钮或标签实现跳转界面：嵌套``````添加超链接即可。 21 | ```html 22 |
23 |
24 |
25 | 39 |
40 |
41 | 42 |
43 | 78 |
79 |
80 | ``` 81 | ### 当用户点击“点餐”按钮时执行的操作，js文件 82 | WebSQL数据库操作，后面有详细描述。 83 | ```javascript 84 | $('#order1').click(function() { 85 | $.sendConfirm({ 86 | withCenter: true, 87 | title: '点餐交易确认', 88 | msg: '您确定要点此菜品吗？', 89 | button: { 90 | confirm: '确认', 91 | cancel: '取消', 92 | cancelFirst: true 93 | }, 94 | onConfirm: function() { 95 | 96 | $.sendMsg('点菜成功,菜品已加入购物车', 3000, function() { 97 | // 第一种 98 | console.log('sendMsg closed'); 99 | var span = $('#first').html(); 100 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 101 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 102 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 103 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 104 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 105 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 106 | var msg; 107 | addData(picname, dishname, dishdisc,dishprice,dishnum); 108 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 109 | db.transaction(function(tx) { 110 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 111 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 112 | }, 113 | function(tx, error) { 114 | alert(error.source + "::" + error.message); 115 | }) 116 | }) 117 | } 118 | }); 119 | }, 120 | onCancel: function() { 121 | $.sendMsg('点菜失败', 3000, function() { 122 | console.log('sendMsg closed'); 123 | }); 124 | }, 125 | onClose: function() { 126 | $.sendMsg('点菜失败', 3000, function() { 127 | console.log('sendMsg closed'); 128 | }); 129 | console.log('点击关闭！'); 130 | } 131 | }); 132 | }); 133 | ``` 134 | ## 已选菜品 135 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200120142740320.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5MjAxNzIyMDMwMjAyOA==,size_16,color_FFFFFF,t_70) 136 | ### 查询数据库，获取数据显示到界面上，js文件 137 | WebSQL数据库——**获取表单数据：** 138 | #### _第一步：_ 139 | ```openDatabase()```打开/创建数据库 140 | #### _第二步：_ 141 | ```db.transaction()```事务处理函数，它有三个参数，三个参数均为函数。第一个是事务提交函数，在这里面使用```tx.executeSql()```来执行查询任务，将对应元素读取出来。第二个参数和第三个参数分别是成功回调和失败回调函数，不是必要的，只要第一个参数也ok的。 142 | 143 | *Q: 从数据库中读取的数据如何放到页面上？* 144 | 145 | A: **写一个showData()函数**，作为前面说的*事务提交函数*。比如我的页面结构是：div--ul--li，那么首先我得声明一个var字符串，然后用```document.getElementById()```函数得到div对象，可以对其进行引用。再声明一个var，使用```document.createElement()```函数引用一个ul对象，最后使用```document.getElementById()```函数引用li对象，参数要写成数据库表单的内容：第几行的某个元素。这个应该对应之前在html中提前设置好的li的id，id即数据库表单的键值元素。即可对应起来。最后需要用```appendChild()```函数将他们一个一个连接起来就ok了。 146 | ```javascript 147 | 208 | ``` 209 | *注意：* 在已选菜品中是在不断地读取数据库表单的数据来显示到当前页面，因此只有当表单数据清空才能让页面清空点击，所以在点击“提交"后，则需要执行删除表单*MsgData*中的数据操作。但是由于我需要在我的订单中回显提交后的数据，如果删除了表单那就没地方读取数据了，那么这里可以采取**创建一个新的数据库表单*Dingdan***，每当*提交*操作发生时，首先进行**表单备份**，即：把表单*MsgData*中的所有数据添加到新创建的表单*Dingdan*中，然后再执行删除*MsgData*表单操作，既实现了已选菜品中数据清空，又实现了我的订单中数据回显。 210 | ## 我的订单 211 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200120142816878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5MjAxNzIyMDMwMjAyOA==,size_16,color_FFFFFF,t_70) 212 | ### 点击“删除”后执行删除数据库表单操作，js文件 213 | WebSQL数据库——**删除表单数据：** 214 | 215 | 删除表单数据跟获取表单数据的步骤是一样的，只不过我这里写了一个```DeleteData()```函数来封装db.transaction()，方便其他地方直接调用DeleteData()对其进行引用。 216 | ```javascript 217 | 259 | ``` 260 | 261 | ## 订单统计 262 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200120142830913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5MjAxNzIyMDMwMjAyOA==,size_16,color_FFFFFF,t_70) 263 | ### 使用Chart.js图表库绘制四种统计图 264 | #### 1. Chart.js使用： 265 | 1. 引入Chart.js库 266 | ```javascript 267 | 268 | ``` 269 | 2. 定义一张画布 270 | ```html 271 |
272 | 273 |
274 | ``` 275 | 3. 利用2d上下文传递画布的节点，实例化Chart类 276 | ```javascript 277 | var popCanvas1 =document.getElementById("popChart1").getContext("2d"); 278 | var barChart = new Chart(popCanvas1, { 279 | type: 'bar', 280 | data: { 281 | labels: ["回锅肉", "青椒玉米", "担担面"], 282 | datasets: [{ 283 | label: '订购数量', 284 | data: [34, 27, 40], 285 | backgroundColor: [ 286 | 'rgba(255, 99, 132, 0.6)', 287 | 'rgba(54, 162, 235, 0.6)', 288 | 'rgba(255, 206, 86, 0.6)', 289 | 'rgba(153, 102, 255, 0.6)' 290 | ] 291 | }] 292 | } 293 | }); 294 | ``` 295 | #### 2. 左侧菜单栏： 296 | 定义两个div，一个放菜单栏，一个放内容。将两个div放在同一行，在css中**设置div为浮动：** 297 | ```css 298 | .left{ 299 | position: relative; 300 | float: left; 301 | } 302 | ``` 303 | 菜单栏div中用一个li来放列表，调整位置关系即可： 304 | ```css 305 | .left li {height:40px; position:relative; display:block;padding:20px 0 0 120px;} 306 | ``` 307 | #### 3. 隐藏div，点击菜单栏选项后才显示： 308 | 除了第一个div，其余的样式设置为**隐藏：** 309 | ```html 310 |
311 | ``` 312 | 利用jQuery中的函数将li和div按序匹配起来，使用条件语句，如果点击不为第一个div对应的li时，就获取当前的div索引，然后把原来的div的class属性给它，把其他同级的class属性remove掉。使用```show()```函数和```hide()```函数分别进行显示和隐藏，参数为动画的速度。可设置速度参数为“fast”，如果是使用数字参数的话，则会根据速度在隐藏和显示过程中逐渐改变div的高度、宽度、边距等。 313 | ```javascript 314 | $(function(){ 315 | $(".left li").click( 316 | function(){ 317 | var divShow = $(".content").children("div"); 318 | if(!$(this).hasClass("selected")){ 319 | var index = $(this).index(); 320 | $(this).addClass("selected"); 321 | $(this).siblings("li").removeClass("selected"); 322 | $(divShow[index]).show("fast"); 323 | $(divShow[index]).siblings("div").hide("fast"); 324 | } 325 | } 326 | ) 327 | }) 328 | ``` 329 | *PS:* 我当时遇到一个非常莫名其妙的问题，在经过多次切换后，所有图表都变得越来越小，甚至可以变得比最初小十分之一去了，看着怪吓人的，因为我绝对没有在任何地方改变过div的大小，刚开始以为是速度参数的问题，但是我改变了fast参数之发现这个问题依然存在，而且无参数更连动画效果都没有。最后查看开发者工具，进行多次调试，观察长宽的改变情况。发现了问题所在： 330 | > 对div的父容器设置长宽要用**百分比**才行。 331 | 332 | *我原来用的是数值，显示是invalid的，最后把宽度设置成百分比就会发现div的大小没有再改变了。* 333 | ```html 334 |
335 | ``` 336 | # 总结 337 | 做Web前端感觉挺好玩的，你能很快地看到自己做出的效果，很有成就感。虽然这个过程中也遇到不少问题，但通过查阅资料和使用工具调试都得到了解决，第一次做Web前端学到不少东西，记录一下。 338 | # 协议 339 | 本项目遵从[MIT协议](https://github.com/yuanyuano/Web/blob/master/LICENSE) 340 | -------------------------------------------------------------------------------- /html/selected.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 已选菜品 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 31 |
32 |
33 |
34 | 77 | 258 |
259 |
260 |
261 |

已选菜品

262 | 263 |
264 |
265 | 266 |
267 |
268 | 269 | 270 | 271 |
272 |
273 |
已选商品0件
274 |
共计: 0.00
275 |
提交
276 |
277 |
278 |
279 |
280 |
281 |

删除菜品X

282 |

您确认要删除该菜品吗？

283 |
284 | 确定 285 | 关闭 286 |
287 |
288 | 289 | 356 | -------------------------------------------------------------------------------- /css/style1.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | body, h1, h2, h3, h4, h5, h6, p, pre, blockquote, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, button, th, td { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | .nav_bg { 8 | height: 44px; 9 | line-height: 44px; 10 | background: #2196f3; 11 | } 12 | .nav_bg .wrap { 13 | width: 1200px; 14 | margin: 0; 15 | display: block 16 | } 17 | .nav { 18 | float: left; 19 | } 20 | 21 | .nav a { 22 | display: block; 23 | float: left; 24 | padding: 0 20px; 25 | color: #fff; 26 | font-size: 16px; 27 | height: 44px; 28 | line-height: 44px; 29 | } 30 | .clearfix:after { 31 | content: "."; 32 | display: block; 33 | height: 0; 34 | clear: both; 35 | visibility: hidden; 36 | } 37 | .nav { 38 | position: relative; 39 | z-index: 1; 40 | } 41 | 42 | .nav .nLi { 43 | float: left; 44 | position: relative; 45 | display: inline; 46 | } 47 | .nav .nLi .e { 48 | padding: 0 0 0 90px; 49 | float: left; 50 | } 51 | .nav .nLi .d { 52 | padding: 0 0 0 20px; 53 | float: left; 54 | } 55 | .nav .nLi h3 a { 56 | display: block; 57 | } 58 | 59 | .nav .nLi .d a:hover { 60 | background: #0D5780; 61 | color: #fff; 62 | } 63 | .nav .on h3 a { 64 | background: #1784db; 65 | color: #fff; 66 | } 67 | .projects .rightborder .cont::-webkit-scrollbar {/*滚动条整体样式*/ 68 | width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ 69 | height: 1px; 70 | } 71 | .projects .rightborder .cont::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ 72 | border-radius: 10px; 73 | background-color: silver; 74 | background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, 75 | rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 76 | } 77 | .projects .rightborder .cont::-webkit-scrollbar-track {/*滚动条里面轨道*/ 78 | -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 79 | /*border-radius: 10px;*/ 80 | background: #EDEDED; 81 | } 82 | .projects2 .rightborder .cont::-webkit-scrollbar {/*滚动条整体样式*/ 83 | width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ 84 | height: 1px; 85 | } 86 | .projects2 .rightborder .cont::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ 87 | border-radius: 10px; 88 | background-color: silver; 89 | background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, 90 | rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 91 | } 92 | .projects2 .rightborder .cont::-webkit-scrollbar-track {/*滚动条里面轨道*/ 93 | -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 94 | /*border-radius: 10px;*/ 95 | background: #EDEDED; 96 | } 97 | .left .leftborder li.border1{height:60px; width: 110px;position:relative; display:block;padding:85px 0 0 100px;} 98 | .left .leftborder li.border2{height:50px; width: 110px; display:block;padding:30px 0 0 100px;} 99 | .left .leftborder li.border3{height:50px; width: 110px; display:block;padding:20px 0 0 100px;} 100 | .left .leftborder li.border3clicked a{color: black; display:block;font-size:16px;color:rgb(0, 225, 255);position: relative;} 101 | .left .leftborder li.border3clicked{height:50px; width: 110px; display:block;padding:20px 0 0 100px;} 102 | .left .leftborder li.border4{height:50px; width: 110px; display:block;padding:20px 0 0 100px;} 103 | .left .leftborder li.border4clicked{height:50px; width: 110px; display:block;padding:20px 0 0 100px;} 104 | .left .leftborder li.border4clicked a{color: black; display:block;font-size:16px;color:rgb(0, 225, 255);position: relative;} 105 | .left .leftborder li.border5{height:50px; width: 110px; display:block;padding:20px 0 0 100px;} 106 | .left .leftborder li.border5clicked{height:50px; width: 110px; display:block;padding:20px 0 0 100px;} 107 | .left .leftborder li.border5clicked a{color: black; display:block;font-size:16px;color:rgb(0, 225, 255);position: relative;} 108 | .left .leftborder li.border2clicked{height:50px; width: 110px; display:block;padding:30px 0 0 100px;} 109 | .left .leftborder li a{color: black; display:block;font-size:16px;position: relative;} 110 | .left .leftborder li.border2clicked a{color: black; display:block;font-size:16px;color:rgb(0, 225, 255);position: relative;} 111 | .left .leftborder li.border1 .inner{color:grey; display:block;font-size:12px;position: relative;} 112 | .left .leftborder li.border1 .inner:hover{ border:none; color:#ff4500; text-decoration: none;} 113 | .projects { 114 | background-color: #fff; 115 | border-left: 1px solid #e5e5e5; 116 | border-right: 1px solid #e5e5e5; 117 | /* -moz-box-shadow: 0 1px 3px #ddd; 118 | -webkit-box-shadow: 0 1px 3px #ddd; 119 | box-shadow: 0 1px 3px #ddd; 120 | -webkit-animation: bottom-in .5s ease 0s backwards; 121 | -moz-animation: bottom-in .5s ease 0s backwards; 122 | animation: bottom-in .5s ease 0s backwards; */ 123 | position: absolute; 124 | top: 12%; 125 | left:20%; 126 | height:824px; 127 | /* height: 460px; */ 128 | width:950px; 129 | 130 | 131 | } 132 | .projects .rightborder .instruct{ 133 | height:25px; 134 | width:950px; 135 | 136 | position:relative; 137 | display:block; 138 | border-bottom: .5px silver solid; 139 | background-color: silver; 140 | font-size: 13px; 141 | 142 | text-align: justify; 143 | } 144 | 145 | .projects .rightborder .dishes{ 146 | height:80px; 147 | width:950px; 148 | position:relative; 149 | display:block; 150 | border-bottom: .5px silver solid; 151 | /* background-color: silver; */ 152 | font-size: 15px; 153 | text-align: center; 154 | /* padding: 0 0 0 30px; */ 155 | 156 | text-align: justify; 157 | } 158 | .projects .rightborder .cont{ 159 | height:440px; 160 | width: 950px;; 161 | /* overflow-x: hidden; 162 | overflow-y: auto; */ 163 | } 164 | .projects .rightborder .dishes #one{ 165 | height:50px; 166 | width:110px; 167 | border-left:.5px silver solid ; 168 | border-right: .5px silver solid; 169 | position:absolute; top:0;left: 14.45%; 170 | padding: 30px 0 0 0px; 171 | text-align: center; 172 | font-size: 14px; 173 | } 174 | .projects .rightborder .dishes #two{ 175 | height:63px; 176 | width:170px; 177 | font-size: 13px; 178 | border-right: .5px silver solid; 179 | position:absolute; top:0;left: 29.45%; 180 | padding: 25px 15px 0 0px; 181 | text-align: center; 182 | } 183 | 184 | .projects .rightborder .dishes #three{ 185 | height:50px; 186 | width:110px; 187 | font-family: Verdana,Tahoma,arial; 188 | color: #3c3c3c; 189 | font-weight: bold; 190 | font-size: 13px; 191 | border-right: .5px silver solid; 192 | position:absolute; top:0;left: 52.45%; 193 | padding: 30px 0 0 40px; 194 | /* text-align: center; */ 195 | } 196 | 197 | .projects .rightborder .dishes #four{ 198 | height:50px; 199 | width:80px; 200 | font-size: 13px; 201 | font-family: Verdana,Tahoma,arial; 202 | color: #3c3c3c; 203 | font-weight: bold; 204 | border-right: .5px silver solid; 205 | position:absolute; top:0;left: 74.45%; 206 | padding: 30px 0 0 10px; 207 | } 208 | 209 | .projects .rightborder .dishes #five{ 210 | height:50px; 211 | width:80px; 212 | 213 | 214 | position:absolute; top:0;left: 84.45%; 215 | text-align: center; 216 | padding: 10px 0 0 30px; 217 | } 218 | 219 | 220 | .projects .rightborder .dishes #five .inn{ 221 | height: 20px; 222 | width: 90px; 223 | background-color: white; 224 | color: black; 225 | font-size: 12px; 226 | border: black .5px solid; 227 | } 228 | .projects .rightborder .dishes #six .inn{ 229 | height: 20px; 230 | width: 90px; 231 | background-color: white; 232 | font-size: 12px; 233 | position:absolute; top:54%;left:87.78%; 234 | text-align: center; 235 | color: black; 236 | border: black .5px solid; 237 | 238 | } 239 | .projects .rightborder .dishes #five .inn:hover{ 240 | background:crimson; 241 | color: white; 242 | cursor: pointer; 243 | /* border: black .5px solid; */ 244 | 245 | } 246 | .projects .rightborder .dishes #six .inn:hover{ 247 | background:rgb(255, 238, 1); 248 | color: black; 249 | cursor: pointer; 250 | /* border: black .5px solid; */ 251 | 252 | } 253 | .projects2 { 254 | background-color: #fff; 255 | border-left: 1px solid #e5e5e5; 256 | border-right: 1px solid #e5e5e5; 257 | /* -moz-box-shadow: 0 1px 3px #ddd; 258 | -webkit-box-shadow: 0 1px 3px #ddd; 259 | box-shadow: 0 1px 3px #ddd; 260 | -webkit-animation: bottom-in .5s ease 0s backwards; 261 | -moz-animation: bottom-in .5s ease 0s backwards; 262 | animation: bottom-in .5s ease 0s backwards; */ 263 | position: absolute; 264 | top: 14%; 265 | left:20%; 266 | height:424px; 267 | /* height: 460px; */ 268 | width:950px; 269 | 270 | } 271 | .projects2 .rightborder .instruct{ 272 | height:25px; 273 | width:950px; 274 | 275 | position:relative; 276 | display:block; 277 | border-bottom: .5px silver solid; 278 | background-color: silver; 279 | font-size: 13px; 280 | 281 | text-align: justify; 282 | } 283 | .projects2 .rightborder .dishes{ 284 | height:80px; 285 | width:950px; 286 | position:relative; 287 | display:block; 288 | border-bottom: .5px silver solid; 289 | /* background-color: silver; */ 290 | font-size: 15px; 291 | text-align: center; 292 | /* padding: 0 0 0 30px; */ 293 | 294 | text-align: justify; 295 | } 296 | .projects2 .rightborder .cont{ 297 | height:440px; 298 | width: 950px;; 299 | /* overflow-x: hidden; 300 | overflow-y: auto; */ 301 | } 302 | .projects2 .rightborder .dishes #one{ 303 | height:50px; 304 | width:110px; 305 | border-left:.5px silver solid ; 306 | border-right: .5px silver solid; 307 | position:absolute; top:0;left: 14.45%; 308 | padding: 30px 0 0 0px; 309 | text-align: center; 310 | font-size: 14px; 311 | } 312 | .projects2 .rightborder .dishes #two{ 313 | height:55px; 314 | width:170px; 315 | font-size: 13px; 316 | border-right: .5px silver solid; 317 | position:absolute; top:0;left: 29.45%; 318 | padding: 25px 15px 0 0px; 319 | text-align: center; 320 | } 321 | 322 | .projects2 .rightborder .dishes #three{ 323 | height:50px; 324 | width:110px; 325 | font-family: Verdana,Tahoma,arial; 326 | color: #3c3c3c; 327 | font-weight: bold; 328 | font-size: 13px; 329 | border-right: .5px silver solid; 330 | position:absolute; top:0;left: 52.45%; 331 | padding: 30px 0 0 40px; 332 | /* text-align: center; */ 333 | } 334 | 335 | .projects2 .rightborder .dishes #four{ 336 | height:50px; 337 | width:80px; 338 | font-size: 13px; 339 | font-family: Verdana,Tahoma,arial; 340 | color: #3c3c3c; 341 | font-weight: bold; 342 | border-right: .5px silver solid; 343 | position:absolute; top:0;left: 74.45%; 344 | padding: 30px 0 0 10px; 345 | } 346 | 347 | .projects2 .rightborder .dishes #five{ 348 | height:50px; 349 | width:80px; 350 | 351 | 352 | position:absolute; top:0;left: 84.45%; 353 | text-align: center; 354 | padding: 10px 0 0 30px; 355 | } 356 | 357 | 358 | .projects2 .rightborder .dishes #five .inn{ 359 | height: 20px; 360 | width: 90px; 361 | background-color: white; 362 | color: black; 363 | font-size: 12px; 364 | border: black .5px solid; 365 | } 366 | .projects2 .rightborder .dishes #six .inn{ 367 | height: 20px; 368 | width: 90px; 369 | background-color: white; 370 | font-size: 12px; 371 | position:absolute; top:54%;left:87.78%; 372 | text-align: center; 373 | color: black; 374 | border: black .5px solid; 375 | 376 | } 377 | .projects2 .rightborder .dishes #five .inn:hover{ 378 | background:crimson; 379 | color: white; 380 | cursor: pointer; 381 | /* border: black .5px solid; */ 382 | 383 | } 384 | .projects2 .rightborder .dishes #six .inn:hover{ 385 | background:rgb(255, 238, 1); 386 | color: black; 387 | cursor: pointer; 388 | /* border: black .5px solid; */ 389 | 390 | } 391 | 392 | button, input, optgroup, select, textarea { 393 | color: inherit; 394 | font: inherit; 395 | outline: none; 396 | } 397 | 398 | button, input, optgroup, select { 399 | vertical-align: middle; 400 | } 401 | 402 | button, select { 403 | text-transform: none; 404 | } 405 | 406 | input { 407 | line-height: normal; 408 | } 409 | 410 | button { 411 | overflow: visible; 412 | } 413 | 414 | textarea { 415 | resize: none; 416 | } 417 | 418 | button, html input[type="button"], input[type="reset"], input[type="submit"] { 419 | -webkit-appearance: button; 420 | cursor: pointer; 421 | } 422 | 423 | button[disabled], html input[disabled] { 424 | cursor: default; 425 | } 426 | 427 | button::-moz-focus-inner, input::-moz-focus-inner { 428 | border: 0; 429 | padding: 0; 430 | } 431 | 432 | input[type="checkbox"], input[type="radio"] { 433 | box-sizing: border-box; 434 | padding: 0; 435 | } 436 | 437 | input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { 438 | height: auto; 439 | } 440 | 441 | input[type="search"] { 442 | -webkit-appearance: textfield; 443 | -moz-box-sizing: content-box; 444 | -webkit-box-sizing: content-box; 445 | box-sizing: content-box; 446 | } 447 | 448 | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 449 | -webkit-appearance: none; 450 | } 451 | 452 | input::-webkit-input-placeholder, 453 | textarea::-webkit-input-placeholder { 454 | color: #C7C7C7; 455 | } 456 | 457 | input::-moz-placeholder, 458 | textarea::-moz-placeholder { 459 | color: #C7C7C7; 460 | opacity: 1; 461 | } 462 | 463 | input:-ms-input-placeholder, 464 | textarea:-ms-input-placeholder { 465 | color: #C7C7C7; 466 | } 467 | 468 | table { 469 | border-collapse: collapse; 470 | border-spacing: 0; 471 | } 472 | 473 | td, th { 474 | padding: 0; 475 | } 476 | .dialog-confirm .dialog-submit { 477 | border: none; 478 | background-color: #6f55c0; 479 | color: #fff; 480 | text-align: center; 481 | text-decoration: none; } 482 | .dialog-confirm .dialog-submit:hover { 483 | text-decoration: none; 484 | background-color: #8032f5; } 485 | .dialog-confirm .disabled.dialog-submit, .dialog-confirm .disabled.dialog-submit:hover { 486 | border: 1px solid #ddd; 487 | color: #999; 488 | background-color: #f8f8f8; 489 | cursor: not-allowed; } 490 | 491 | .dialog-confirm .dialog-cancel { 492 | border: 1px solid #ddd; 493 | color: #666; 494 | text-align: center; 495 | text-decoration: none; } 496 | .dialog-confirm .dialog-cancel:hover { 497 | color: #6f55c0; 498 | border-color: #6f55c0; 499 | text-decoration: none; } 500 | .dialog-confirm .disabled.dialog-cancel, .dialog-confirm .disabled.dialog-cancel:hover { 501 | border: 1px solid #ddd; 502 | color: #999; 503 | background-color: #f8f8f8; 504 | cursor: not-allowed; } 505 | 506 | .dialog-background { 507 | display: none; 508 | position: fixed; 509 | left: 0; 510 | top: 0; 511 | z-index: 990; 512 | width: 100%; 513 | height: 100%; 514 | padding: 0; 515 | margin: 0; 516 | background-color: rgba(0, 0, 0, 0.5); 517 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000); } 518 | 519 | .dialog-section { 520 | opacity: 0; 521 | filter: alpha(opacity=0); 522 | display: none; 523 | position: absolute; 524 | top: 50%; 525 | left: 50%; 526 | z-index: 999; 527 | padding: 0; 528 | margin: 0; 529 | background-color: #FFF; 530 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } 531 | 532 | .dialog-body, 533 | .dialog-imagelist { 534 | box-sizing: content-box; 535 | z-index: 1; 536 | min-width: 516px; 537 | height: 100%; 538 | padding: 32px; 539 | padding-top: 48px; 540 | margin: 0; 541 | overflow: hidden; } 542 | .dialog-body.withNoPadding, 543 | .dialog-imagelist.withNoPadding { 544 | padding: 0; } 545 | .dialog-body.withNoMinWidth, 546 | .dialog-imagelist.withNoMinWidth { 547 | min-width: auto; 548 | min-width: 0; } 549 | 550 | .dialog-body img { 551 | display: block; 552 | vertical-align: top; } 553 | 554 | .dialog-btnPrev, 555 | .dialog-btnNext { 556 | position: absolute; } 557 | 558 | .dialog-btnPrev, 559 | .dialog-btnNext { 560 | top: 50%; 561 | z-index: 9; 562 | margin-top: -18px; 563 | width: 36px; 564 | height: 36px; 565 | overflow: hidden; 566 | font: 16px/36px 'Simsun'; 567 | text-align: center; 568 | color: #fff !important; 569 | cursor: pointer; 570 | background-color: #7F7F7F; 571 | background-color: rgba(0, 0, 0, 0.5); } 572 | 573 | .dialog-btnPrev { 574 | left: 0; } 575 | 576 | .dialog-btnNext { 577 | right: 0; } 578 | 579 | .dialog-disabled { 580 | cursor: not-allowed; 581 | background-color: rgba(0, 0, 0, 0.3); 582 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000,endColorstr=#44000000); } 583 | 584 | .dialog-header { 585 | position: relative; 586 | width: auto; 587 | height: 39px; 588 | padding: 0 46px 0 16px; 589 | margin: 0; 590 | border-bottom: 1px solid #d9d9d9; 591 | font-size: 16px; 592 | line-height: 39px; 593 | white-space: nowrap; 594 | background-color: #e6e6e6; } 595 | .dialog-header + .dialog-body { 596 | padding-top: 32px; } 597 | .dialog-header + .dialog-body.withNoPadding { 598 | padding: 0; } 599 | 600 | .dialog-close { 601 | display: inline-block; 602 | vertical-align: middle; 603 | background-image: url("images/icons-dialog.png"); 604 | background-repeat: no-repeat; 605 | position: absolute; 606 | right: 16px; 607 | top: 12px; 608 | width: 14px; 609 | height: 14px; 610 | padding: 0; 611 | margin: 0; 612 | background-position: 0 -135px; 613 | cursor: pointer; } 614 | 615 | #dialogTipBox .dialog-body { 616 | padding-top: 48px; 617 | padding-bottom: 48px; } 618 | #dialogTipBox .dialog-msg { 619 | padding: 0; 620 | margin: 0; 621 | text-align: center; } 622 | #dialogTipBox .dialog-msg-text { 623 | padding: 0; 624 | margin: 0; 625 | font-size: 16px; } 626 | #dialogTipBox .i-success, 627 | #dialogTipBox .i-warning, 628 | #dialogTipBox .i-error { 629 | position: relative; 630 | display: inline-block; 631 | top: -2px; 632 | margin-right: 20px; 633 | width: 36px; 634 | height: 36px; 635 | vertical-align: middle; 636 | background-image: url("images/icons-dialog.png"); 637 | background-repeat: no-repeat; } 638 | #dialogTipBox .i-success { 639 | background-position: 0 0; } 640 | #dialogTipBox .i-warning { 641 | background-position: 0 -45px; } 642 | #dialogTipBox .i-error { 643 | background-position: 0 -90px; } 644 | 645 | .dialog-confirm { 646 | box-sizing: content-box; 647 | position: relative; 648 | width: 235px; 649 | min-width: 235px; 650 | font-size: 0; 651 | text-align: left; 652 | margin: 0 auto; } 653 | .dialog-confirm.withCenter { 654 | text-align: center; } 655 | .dialog-confirm.withIcon, .dialog-confirm.withIconSuccess, .dialog-confirm.withIconWarning, .dialog-confirm.withIconError { 656 | padding-left: 54px; } 657 | .dialog-confirm.withIcon:before, .dialog-confirm.withIconSuccess:before, .dialog-confirm.withIconWarning:before, .dialog-confirm.withIconError:before { 658 | content: ''; 659 | display: inline-block; 660 | vertical-align: middle; 661 | background-image: url("images/icons-dialog.png"); 662 | background-repeat: no-repeat; 663 | position: absolute; 664 | left: 0; 665 | top: 0; 666 | width: 36px; 667 | height: 36px; 668 | background-position: 0 -45px; } 669 | .dialog-confirm.withIconSuccess:before { 670 | background-position: 0 0; } 671 | .dialog-confirm.withIconWarning:before { 672 | background-position: 0 -45px; } 673 | .dialog-confirm.withIconError:before { 674 | background-position: 0 -90px; } 675 | .dialog-confirm .dialog-msg { 676 | padding: 0; 677 | margin: 0; 678 | font-size: 16px; 679 | line-height: 32px; } 680 | .dialog-confirm .dialog-msg + .dialog-desc { 681 | margin-top: 10px; } 682 | .dialog-confirm .dialog-desc { 683 | padding: 0; 684 | margin: 0; 685 | font-size: 12px; 686 | line-height: 24px; 687 | margin-bottom: 20px; } 688 | .dialog-confirm .dialog-content { 689 | padding: 0; 690 | margin: 0; 691 | font-size: 12px; 692 | line-height: 24px; 693 | text-align: left; } 694 | .dialog-confirm .dialog-content + .dialog-buttonBox { 695 | text-align: center; } 696 | .dialog-confirm .dialog-buttonBox { 697 | overflow: hidden; 698 | padding: 0; 699 | margin: 24px 0 0 0; } 700 | .dialog-confirm .dialog-buttonBox a { 701 | margin-left: 15px; } 702 | .dialog-confirm .dialog-buttonBox a:first-child { 703 | margin-left: 0; } 704 | .dialog-confirm .dialog-submit, 705 | .dialog-confirm .dialog-cancel { 706 | display: inline-block; } 707 | .dialog-confirm .dialog-submit { 708 | width: 98px; 709 | height: 29px; 710 | font-size: 12px; 711 | line-height: 29px; } 712 | .dialog-confirm .dialog-cancel { 713 | box-sizing: content-box; 714 | width: 96px; 715 | height: 27px; 716 | font-size: 12px; 717 | line-height: 27px; } 718 | 719 | .dialog-success-top { 720 | position: fixed; 721 | left: 50%; 722 | top: 0; 723 | z-index: 999; 724 | min-width: 400px; 725 | padding: 0; 726 | margin: 0; 727 | border-radius: 5px; 728 | border-top-left-radius: 0; 729 | border-top-right-radius: 0; 730 | font-size: 16px; 731 | line-height: 46px; 732 | text-align: center; 733 | color: #fff; 734 | background-color: #4aac42; } 735 | .dialog-success-top .i-icon { 736 | position: relative; 737 | display: inline-block; 738 | vertical-align: middle; 739 | width: 26px; 740 | height: 18px; 741 | margin-right: 15px; 742 | background: url("images/icons-dialog.png") no-repeat 0 -180px; } 743 | 744 | .dialog-warning-top { 745 | position: fixed; 746 | left: 50%; 747 | top: 0; 748 | z-index: 999; 749 | min-width: 400px; 750 | padding: 0; 751 | margin: 0; 752 | border-radius: 5px; 753 | border-top-left-radius: 0; 754 | border-top-right-radius: 0; 755 | font-size: 16px; 756 | line-height: 46px; 757 | text-align: center; 758 | color: #fff; 759 | background-color: #ff4400; } 760 | -------------------------------------------------------------------------------- /js/universial.js: -------------------------------------------------------------------------------- 1 | $('#six *').click(function() { 2 | $.sendConfirm({ 3 | title: '请您对该菜品进行评价', 4 | content: '
' + '
' + '
* 评价等级（1-5）:
' + '' + '
' + '
' + '
' + '
* 给该菜品提出意见:
' + '' + '
' + '
' + '
' + '
* 给本食堂评价:
' + '' + '
' + '
' + '
', 5 | button: { 6 | confirm: '确认', 7 | cancel: '取消' 8 | }, 9 | width: 260, 10 | onBeforeConfirm: function() { 11 | // onBeforeConfirm返回false，将阻止onConfirm的执行 12 | $.sendMsg('评价成功，感谢您的建议', 3000, function() { 13 | console.log('sendMsg closed'); 14 | 15 | }); 16 | return false; 17 | }, 18 | onConfirm: function() { 19 | $.sendMsg('评价成功，感谢您的建议', 3000, function() { 20 | console.log('sendMsg closed'); 21 | 22 | }); 23 | }, 24 | onCancel: function() { 25 | $.sendMsg('抱歉亲，这次评价不成功哦。', 3000, function() { 26 | console.log('sendMsg closed'); 27 | 28 | }); 29 | }, 30 | onClose: function() { 31 | $.sendMsg('抱歉亲，这次评价不成功哦。', 3000, function() { 32 | console.log('sendMsg closed'); 33 | 34 | }); 35 | } 36 | }); 37 | }); 38 | $('#order1').click(function() { 39 | $.sendConfirm({ 40 | withCenter: true, 41 | title: '点餐交易确认', 42 | msg: '您确定要点此菜品吗？', 43 | button: { 44 | confirm: '确认', 45 | cancel: '取消', 46 | cancelFirst: true 47 | }, 48 | onConfirm: function() { 49 | 50 | $.sendMsg('点菜成功,菜品已加入购物车', 3000, function() { 51 | // 第一种 52 | 53 | console.log('sendMsg closed'); 54 | var span = $('#first').html(); 55 | 56 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 57 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 58 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 59 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 60 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 61 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 62 | var msg; 63 | addData(picname, dishname, dishdisc,dishprice,dishnum); 64 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 65 | db.transaction(function(tx) { 66 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 67 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 68 | 69 | }, 70 | function(tx, error) { 71 | alert(error.source + "::" + error.message); 72 | } 73 | ) 74 | }) 75 | } 76 | }); 77 | }, 78 | onCancel: function() { 79 | 80 | $.sendMsg('点菜失败', 3000, function() { 81 | console.log('sendMsg closed'); 82 | 83 | }); 84 | }, 85 | onClose: function() { 86 | 87 | $.sendMsg('点菜失败', 3000, function() { 88 | console.log('sendMsg closed'); 89 | 90 | }); 91 | console.log('点击关闭！'); 92 | } 93 | }); 94 | }); 95 | $('#order2').click(function() { 96 | $.sendConfirm({ 97 | withCenter: true, 98 | title: '点餐交易确认', 99 | msg: '您确定要点此菜品吗？', 100 | button: { 101 | confirm: '确认', 102 | cancel: '取消', 103 | cancelFirst: true 104 | }, 105 | onConfirm: function() { 106 | 107 | $.sendMsg('点菜成功,菜品已加入购物车！', 3000, function() { 108 | console.log('sendMsg closed'); 109 | console.log('sendMsg closed'); 110 | var span = $('#second').html(); 111 | 112 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 113 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 114 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 115 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 116 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 117 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 118 | var msg; 119 | addData(picname, dishname, dishdisc,dishprice,dishnum); 120 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 121 | db.transaction(function(tx) { 122 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 123 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 124 | 125 | }, 126 | function(tx, error) { 127 | alert(error.source + "::" + error.message); 128 | } 129 | ) 130 | }) 131 | } 132 | 133 | }); 134 | }, 135 | onCancel: function() { 136 | 137 | $.sendMsg('点菜失败', 3000, function() { 138 | console.log('sendMsg closed'); 139 | 140 | }); 141 | }, 142 | onClose: function() { 143 | 144 | $.sendMsg('点菜失败', 3000, function() { 145 | console.log('sendMsg closed'); 146 | 147 | }); 148 | console.log('点击关闭！'); 149 | } 150 | }); 151 | }); 152 | $('#order3').click(function() { 153 | $.sendConfirm({ 154 | withCenter: true, 155 | title: '点餐交易确认', 156 | msg: '您确定要点此菜品吗？', 157 | button: { 158 | confirm: '确认', 159 | cancel: '取消', 160 | cancelFirst: true 161 | }, 162 | onConfirm: function() { 163 | 164 | $.sendMsg('点菜成功,菜品已加入购物车！', 3000, function() { 165 | console.log('sendMsg closed'); 166 | var span = $('#third').html(); 167 | 168 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 169 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 170 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 171 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 172 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 173 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 174 | var msg; 175 | addData(picname, dishname, dishdisc,dishprice,dishnum); 176 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 177 | db.transaction(function(tx) { 178 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 179 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 180 | 181 | }, 182 | function(tx, error) { 183 | alert(error.source + "::" + error.message); 184 | } 185 | ) 186 | }) 187 | } 188 | 189 | }); 190 | }, 191 | onCancel: function() { 192 | 193 | $.sendMsg('点菜失败', 3000, function() { 194 | console.log('sendMsg closed'); 195 | 196 | }); 197 | }, 198 | onClose: function() { 199 | 200 | $.sendMsg('点菜失败', 3000, function() { 201 | console.log('sendMsg closed'); 202 | 203 | }); 204 | console.log('点击关闭！'); 205 | } 206 | }); 207 | }); 208 | $('#order4').click(function() { 209 | $.sendConfirm({ 210 | withCenter: true, 211 | title: '点餐交易确认', 212 | msg: '您确定要点此菜品吗？', 213 | button: { 214 | confirm: '确认', 215 | cancel: '取消', 216 | cancelFirst: true 217 | }, 218 | onConfirm: function() { 219 | 220 | $.sendMsg('点菜成功,菜品已加入购物车！', 3000, function() { 221 | console.log('sendMsg closed'); 222 | var span = $('#fourth').html(); 223 | 224 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 225 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 226 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 227 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 228 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 229 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 230 | var msg; 231 | addData(picname, dishname, dishdisc,dishprice,dishnum); 232 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 233 | db.transaction(function(tx) { 234 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 235 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 236 | 237 | }, 238 | function(tx, error) { 239 | alert(error.source + "::" + error.message); 240 | } 241 | ) 242 | }) 243 | } 244 | 245 | }); 246 | }, 247 | onCancel: function() { 248 | 249 | $.sendMsg('点菜失败', 3000, function() { 250 | console.log('sendMsg closed'); 251 | 252 | }); 253 | }, 254 | onClose: function() { 255 | 256 | $.sendMsg('点菜失败', 3000, function() { 257 | console.log('sendMsg closed'); 258 | 259 | }); 260 | console.log('点击关闭！'); 261 | } 262 | }); 263 | }); 264 | $('#order5').click(function() { 265 | $.sendConfirm({ 266 | withCenter: true, 267 | title: '点餐交易确认', 268 | msg: '您确定要点此菜品吗？', 269 | button: { 270 | confirm: '确认', 271 | cancel: '取消', 272 | cancelFirst: true 273 | }, 274 | onConfirm: function() { 275 | 276 | $.sendMsg('点菜成功,菜品已加入购物车！', 3000, function() { 277 | console.log('sendMsg closed'); 278 | var span = $('#fifth').html(); 279 | 280 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 281 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 282 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 283 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 284 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 285 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 286 | var msg; 287 | addData(picname, dishname, dishdisc,dishprice,dishnum); 288 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 289 | db.transaction(function(tx) { 290 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 291 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 292 | 293 | }, 294 | function(tx, error) { 295 | alert(error.source + "::" + error.message); 296 | } 297 | ) 298 | }) 299 | } 300 | 301 | }); 302 | }, 303 | onCancel: function() { 304 | 305 | $.sendMsg('点菜失败', 3000, function() { 306 | console.log('sendMsg closed'); 307 | 308 | }); 309 | }, 310 | onClose: function() { 311 | 312 | $.sendMsg('点菜失败', 3000, function() { 313 | console.log('sendMsg closed'); 314 | 315 | }); 316 | console.log('点击关闭！'); 317 | } 318 | }); 319 | }); 320 | $('#order6').click(function() { 321 | $.sendConfirm({ 322 | withCenter: true, 323 | title: '点餐交易确认', 324 | msg: '您确定要点此菜品吗？', 325 | button: { 326 | confirm: '确认', 327 | cancel: '取消', 328 | cancelFirst: true 329 | }, 330 | onConfirm: function() { 331 | 332 | $.sendMsg('点菜成功,菜品已加入购物车', 3000, function() { 333 | // 第一种 334 | 335 | console.log('sendMsg closed'); 336 | var span = $('#sixth').html(); 337 | 338 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 339 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 340 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 341 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 342 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 343 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 344 | var msg; 345 | addData(picname, dishname, dishdisc,dishprice,dishnum); 346 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 347 | db.transaction(function(tx) { 348 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 349 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 350 | 351 | }, 352 | function(tx, error) { 353 | alert(error.source + "::" + error.message); 354 | } 355 | ) 356 | }) 357 | } 358 | }); 359 | }, 360 | onCancel: function() { 361 | 362 | $.sendMsg('点菜失败', 3000, function() { 363 | console.log('sendMsg closed'); 364 | 365 | }); 366 | }, 367 | onClose: function() { 368 | 369 | $.sendMsg('点菜失败', 3000, function() { 370 | console.log('sendMsg closed'); 371 | 372 | }); 373 | console.log('点击关闭！'); 374 | } 375 | }); 376 | }); 377 | $('#order7').click(function() { 378 | $.sendConfirm({ 379 | withCenter: true, 380 | title: '点餐交易确认', 381 | msg: '您确定要点此菜品吗？', 382 | button: { 383 | confirm: '确认', 384 | cancel: '取消', 385 | cancelFirst: true 386 | }, 387 | onConfirm: function() { 388 | 389 | $.sendMsg('点菜成功,菜品已加入购物车！', 3000, function() { 390 | console.log('sendMsg closed'); 391 | console.log('sendMsg closed'); 392 | var span = $('#seventh').html(); 393 | 394 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 395 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 396 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 397 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 398 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 399 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 400 | var msg; 401 | addData(picname, dishname, dishdisc,dishprice,dishnum); 402 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 403 | db.transaction(function(tx) { 404 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 405 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 406 | 407 | }, 408 | function(tx, error) { 409 | alert(error.source + "::" + error.message); 410 | } 411 | ) 412 | }) 413 | } 414 | 415 | }); 416 | }, 417 | onCancel: function() { 418 | 419 | $.sendMsg('点菜失败', 3000, function() { 420 | console.log('sendMsg closed'); 421 | 422 | }); 423 | }, 424 | onClose: function() { 425 | 426 | $.sendMsg('点菜失败', 3000, function() { 427 | console.log('sendMsg closed'); 428 | 429 | }); 430 | console.log('点击关闭！'); 431 | } 432 | }); 433 | }); 434 | $('#order8').click(function() { 435 | $.sendConfirm({ 436 | withCenter: true, 437 | title: '点餐交易确认', 438 | msg: '您确定要点此菜品吗？', 439 | button: { 440 | confirm: '确认', 441 | cancel: '取消', 442 | cancelFirst: true 443 | }, 444 | onConfirm: function() { 445 | 446 | $.sendMsg('点菜成功,菜品已加入购物车！', 3000, function() { 447 | console.log('sendMsg closed'); 448 | var span = $('#eighth').html(); 449 | 450 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 451 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 452 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 453 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 454 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 455 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 456 | var msg; 457 | addData(picname, dishname, dishdisc,dishprice,dishnum); 458 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 459 | db.transaction(function(tx) { 460 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 461 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 462 | 463 | }, 464 | function(tx, error) { 465 | alert(error.source + "::" + error.message); 466 | } 467 | ) 468 | }) 469 | } 470 | 471 | }); 472 | }, 473 | onCancel: function() { 474 | 475 | $.sendMsg('点菜失败', 3000, function() { 476 | console.log('sendMsg closed'); 477 | 478 | }); 479 | }, 480 | onClose: function() { 481 | 482 | $.sendMsg('点菜失败', 3000, function() { 483 | console.log('sendMsg closed'); 484 | 485 | }); 486 | console.log('点击关闭！'); 487 | } 488 | }); 489 | }); 490 | $('#order9').click(function() { 491 | $.sendConfirm({ 492 | withCenter: true, 493 | title: '点餐交易确认', 494 | msg: '您确定要点此菜品吗？', 495 | button: { 496 | confirm: '确认', 497 | cancel: '取消', 498 | cancelFirst: true 499 | }, 500 | onConfirm: function() { 501 | 502 | $.sendMsg('点菜成功,菜品已加入购物车！', 3000, function() { 503 | console.log('sendMsg closed'); 504 | var span = $('#ninth').html(); 505 | 506 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 507 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 508 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 509 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 510 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 511 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 512 | var msg; 513 | addData(picname, dishname, dishdisc,dishprice,dishnum); 514 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 515 | db.transaction(function(tx) { 516 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 517 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 518 | 519 | }, 520 | function(tx, error) { 521 | alert(error.source + "::" + error.message); 522 | } 523 | ) 524 | }) 525 | } 526 | 527 | }); 528 | }, 529 | onCancel: function() { 530 | 531 | $.sendMsg('点菜失败', 3000, function() { 532 | console.log('sendMsg closed'); 533 | 534 | }); 535 | }, 536 | onClose: function() { 537 | 538 | $.sendMsg('点菜失败', 3000, function() { 539 | console.log('sendMsg closed'); 540 | 541 | }); 542 | console.log('点击关闭！'); 543 | } 544 | }); 545 | }); 546 | $('#order10').click(function() { 547 | $.sendConfirm({ 548 | withCenter: true, 549 | title: '点餐交易确认', 550 | msg: '您确定要点此菜品吗？', 551 | button: { 552 | confirm: '确认', 553 | cancel: '取消', 554 | cancelFirst: true 555 | }, 556 | onConfirm: function() { 557 | 558 | $.sendMsg('点菜成功,菜品已加入购物车！', 3000, function() { 559 | console.log('sendMsg closed'); 560 | var span = $('#tenth').html(); 561 | 562 | var picname=span.split("\n")[1].split("src")[1].slice(2,8); 563 | var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,""); 564 | var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0]; 565 | var dishprice=span.split("\n")[4].split(">")[1].split("<")[0]; 566 | var dishnum=span.split("\n")[5].split(">")[1].split("<")[0]; 567 | var db = openDatabase('dishes', '1.0', '点餐数据库', 30*1024*1024); 568 | var msg; 569 | addData(picname, dishname, dishdisc,dishprice,dishnum); 570 | function addData(picname, dishname, dishdisc,dishprice,dishnum) { 571 | db.transaction(function(tx) { 572 | tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []); 573 | tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) { 574 | 575 | }, 576 | function(tx, error) { 577 | alert(error.source + "::" + error.message); 578 | } 579 | ) 580 | }) 581 | } 582 | 583 | }); 584 | }, 585 | onCancel: function() { 586 | 587 | $.sendMsg('点菜失败', 3000, function() { 588 | console.log('sendMsg closed'); 589 | 590 | }); 591 | }, 592 | onClose: function() { 593 | 594 | $.sendMsg('点菜失败', 3000, function() { 595 | console.log('sendMsg closed'); 596 | 597 | }); 598 | console.log('点击关闭！'); 599 | } 600 | }); 601 | }); -------------------------------------------------------------------------------- /js/jquery.dialog.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 基于jQuery的弹窗组件 3 | * @author 龙泉 4 | * @version 1.0.0 5 | */ 6 | (function(factory) { 7 | if (typeof define === 'function' && define.amd) { 8 | // AMD module 9 | define(['jquery'], factory); 10 | } else if (typeof module !== "undefined" && module.exports) { 11 | // Node/CommonJS 12 | // Seajs build 13 | factory(require('jquery')); 14 | } else { 15 | // 浏览器全局模式 16 | factory(jQuery); 17 | } 18 | })(function($) { 19 | var closeClass = '.j_dialogClose'; 20 | 21 | // 默认参数配置 22 | var dialogDef = { 23 | id: '', // 如果页面中存在多个样式的弹窗，可用ID区别样式 24 | title: 'Title', 25 | isFixed: true, 26 | hideHeader: false, 27 | hideClose: false, 28 | content: null, 29 | callback: null, 30 | withNoPadding: false, // 是否不设置padding 31 | withNoMinWidth: false, // 是否不设置最小宽度 32 | bgHide: true, // 点击背景是否隐藏 33 | escHide: true // 按ESC按键是否隐藏 34 | }; 35 | 36 | // 全局变量 37 | var dialogConfig = { 38 | windows: $(window), 39 | lightbox: '.dialog-background', 40 | section: '.dialog-section', 41 | imageTag: '.dialog-imageitem', 42 | imageData: {}, 43 | width: 0, 44 | height: 0, 45 | left: 0, 46 | top: 0, 47 | paddingWidth: 0, 48 | paddingHeight: 0, 49 | resizeParams: ['.dialog-section'] 50 | }; 51 | 52 | // 用户传递过来的参数集 53 | var dialogOpts = {}; 54 | 55 | // 基础实现 56 | var Dialog = { 57 | /** 58 | * 显示dialog弹窗 59 | * @param {Object} opts 配置选项 60 | * @return {undefined} 61 | */ 62 | show: function(opts) { 63 | dialogOpts = $.extend({}, dialogDef, opts || {}); 64 | 65 | if (opts.content) { 66 | Dialog.dialog(opts); 67 | } else { 68 | Dialog.lightbox(opts); 69 | } 70 | 71 | // 初始化时执行的回调函数 72 | typeof dialogOpts.onInit === 'function' && dialogOpts.onInit(); 73 | 74 | // 改变浏览器大小时，动态改变内容显示盒子的位置 75 | dialogConfig.windows.on('resize', function() { 76 | Dialog.settings.apply(window, dialogConfig.resizeParams); 77 | }); 78 | }, 79 | 80 | /** 81 | * 关闭dialog弹窗 82 | * @param {Function} callback 回调函数 83 | * @return {undefined} 84 | */ 85 | hide: function(callback) { 86 | var oLightBox = $(dialogConfig.lightbox); 87 | var oSection = $(dialogConfig.section); 88 | 89 | if (dialogOpts.isFixed) { 90 | oSection.animate({ 91 | marginTop: -(dialogConfig.top - 150), 92 | opacity: 0 93 | }); 94 | } else { 95 | oSection.animate({ 96 | top: (dialogConfig.top + 150), 97 | opacity: 0 98 | }); 99 | } 100 | 101 | oLightBox.fadeOut(function() { 102 | oLightBox.remove(); 103 | oSection.remove(); 104 | callback && callback(); 105 | }); 106 | }, 107 | 108 | dialog: function(opts) { 109 | Dialog.install(opts); 110 | dialogConfig.resizeParams = [dialogConfig.section, true, true]; 111 | Dialog.settings.apply(window, dialogConfig.resizeParams); 112 | }, 113 | 114 | lightbox: function(opts) { 115 | var clickObj_src = opts.clickObj.attr('data-src') || opts.clickObj.attr('data-image'); 116 | dialogConfig.now = 0; 117 | Dialog.getImages_src(dialogOpts.imagelist); 118 | Dialog.loadImage(clickObj_src, true, Dialog.settings); 119 | Dialog.getNow(clickObj_src); 120 | }, 121 | 122 | install: function(opts) { 123 | var oBody = $('body'); 124 | var headerHtml = '
' + dialogOpts.title + '
'; 125 | var closeHtml = '
'; 126 | var markId = ''; 127 | var addClass = ''; 128 | var $background = oBody.find(dialogConfig.lightbox); 129 | 130 | if (!dialogOpts.content) { 131 | var content = '
' + ' ' + '
' + ' ' + '<' + '>'; 132 | } else { 133 | var content = dialogOpts.content; 134 | } 135 | 136 | if (dialogOpts.hideHeader) { 137 | headerHtml = ''; 138 | } 139 | 140 | if (dialogOpts.hideClose) { 141 | closeHtml = ''; 142 | } 143 | 144 | if (dialogOpts.id) { 145 | markId = ' id="' + dialogOpts.id + '"'; 146 | } 147 | 148 | var plugs_lightbox = '
'; 149 | var plugs_lightbox_section = '
' + headerHtml + '
' + content + '
' + closeHtml + '
'; 150 | 151 | // 如果之前有打开弹窗，先将其关闭 152 | if ($background.length) { 153 | $background.stop().fadeIn(); 154 | oBody.find(dialogConfig.section).remove(); 155 | } else { 156 | oBody.append(plugs_lightbox) 157 | } 158 | 159 | oBody.append(plugs_lightbox_section); 160 | $(dialogConfig.lightbox).fadeIn(); 161 | $(dialogConfig.section).show(); 162 | 163 | var iPaddingWidth = $(dialogConfig.section).outerWidth() - $(dialogConfig.section).width(); 164 | var iPaddingHeight = $(dialogConfig.section).outerHeight() - $(dialogConfig.section).height(); 165 | 166 | dialogConfig.paddingWidth = iPaddingWidth; 167 | dialogConfig.paddingHeight = iPaddingHeight; 168 | dialogOpts.callback && dialogOpts.callback(); 169 | }, 170 | 171 | getNow: function(loadImage_src) { 172 | for (var i = 0, len = dialogConfig.images.length; i < len; i++) { 173 | if (loadImage_src === dialogConfig.images[i]) { 174 | dialogConfig.now = i; 175 | } 176 | } 177 | }, 178 | 179 | getImages_src: function(images) { 180 | var images = (typeof images == 'string') ? $(images) : images; 181 | dialogConfig.images = []; 182 | 183 | for (var i = 0, len = images.length; i < len; i++) { 184 | var currentImage = images.eq(i); 185 | var currentImage_src = currentImage.attr('data-src') || currentImage.attr('data-image'); 186 | var currentImage_src = $.trim(currentImage_src); 187 | if (currentImage_src !== '') { 188 | dialogConfig.images.push(currentImage_src); 189 | } 190 | } 191 | }, 192 | 193 | loadImage: function(loadImage_src, isMove, callback) { 194 | var image = new Image(); 195 | image.onload = function() { 196 | if ($('.dialog-section').length === 0) { 197 | Dialog.install(dialogOpts); 198 | $('.dialog-btnPrev').on('click', function() { 199 | Dialog.switchImage(false, false); 200 | }); 201 | $('.dialog-btnNext').on('click', function() { 202 | Dialog.switchImage(true, false); 203 | }); 204 | } 205 | 206 | Dialog.setBtnSate(); 207 | 208 | var section = $(dialogConfig.section); 209 | var imageTag = $(dialogConfig.imageTag); 210 | 211 | dialogConfig.imageData = { 212 | width: this.width, 213 | height: this.height, 214 | src: loadImage_src 215 | }; 216 | 217 | dialogConfig.resizeParams = [section, imageTag, isMove]; 218 | callback && callback.apply(window, dialogConfig.resizeParams); 219 | } 220 | image.src = loadImage_src; 221 | }, 222 | 223 | switchImage: function(d, isMove) { 224 | if (d) { 225 | dialogConfig.now++; 226 | } else { 227 | dialogConfig.now--; 228 | } 229 | 230 | if (dialogConfig.now < 0) { 231 | dialogConfig.now = dialogConfig.images.length - 1; 232 | } 233 | 234 | if (dialogConfig.now > dialogConfig.images.length - 1) { 235 | dialogConfig.now = 0; 236 | } 237 | 238 | var loadImage_src = dialogConfig.images[dialogConfig.now]; 239 | Dialog.loadImage(loadImage_src, isMove, Dialog.settings); 240 | }, 241 | 242 | setBtnSate: function() { 243 | if (dialogConfig.images.length < 2) { 244 | $('.dialog-btnPrev, .dialog-btnNext').hide(); 245 | } 246 | }, 247 | 248 | // 设置内容显示盒子的大小，位置 249 | settings: function(section, imageTag, isMove) { 250 | var section = (typeof section == 'string') ? $(section) : section; 251 | var winHeight = $(window).height(); 252 | 253 | if (!dialogOpts.content) { 254 | var sectionHeight = 116, // 外围容器默认的高度，为了方便，这里暂时使用固定值，后期改版再做调整 255 | configWidth = dialogConfig.imageData.width, 256 | configHeight = dialogConfig.imageData.height; 257 | dialogConfig.width = configWidth; 258 | dialogConfig.height = configHeight; 259 | if (sectionHeight + dialogConfig.height > winHeight) { 260 | dialogConfig.height = winHeight - sectionHeight - 50; 261 | dialogConfig.height = dialogConfig.height < 500 ? 500 : dialogConfig.height; 262 | dialogConfig.width = Math.round(dialogConfig.width * (dialogConfig.height / configHeight)); 263 | } 264 | } else { 265 | section.css({ 266 | left: '0px' 267 | }); // 固定布局时，容器的left应该为0，样式文件不好修改，暂时在这里调整 268 | dialogConfig.width = section.width(); 269 | dialogConfig.height = section.height(); 270 | } 271 | 272 | var outerWidth = dialogConfig.width + dialogConfig.paddingWidth; 273 | var outerHeight = dialogConfig.height + dialogConfig.paddingHeight + $('.dialog-header').outerHeight(); 274 | 275 | if (typeof imageTag === 'object') { 276 | imageTag.hide().attr('src', dialogConfig.imageData.src).css({ 277 | width: dialogConfig.width, 278 | height: dialogConfig.height 279 | }).fadeIn(); 280 | } 281 | 282 | if (dialogOpts.isFixed) { 283 | dialogConfig.left = Math.floor(outerWidth / 2); 284 | dialogConfig.top = Math.floor(outerHeight / 2); 285 | section.css({ 286 | position: 'fixed', 287 | left: '50%' 288 | }); 289 | 290 | if (isMove) { 291 | section.css({ 292 | marginLeft: -dialogConfig.left, 293 | marginTop: -dialogConfig.top 294 | }); 295 | } else { 296 | section.animate({ 297 | marginLeft: -dialogConfig.left, 298 | marginTop: -dialogConfig.top 299 | }, { 300 | queue: false 301 | }); 302 | } 303 | } else { 304 | var scrollLeft = dialogConfig.windows.scrollLeft(); 305 | var scrollTop = dialogConfig.windows.scrollTop(); 306 | var windowWidth = $(dialogConfig.lightbox).width(); 307 | 308 | dialogConfig.left = Math.floor((windowWidth - outerWidth) / 2) + scrollLeft; 309 | dialogConfig.top = Math.floor((winHeight - outerHeight) / 2) + scrollTop; 310 | section.css({ 311 | position: 'absolute', 312 | marginLeft: 0, 313 | marginTop: 0 314 | }); 315 | 316 | if (isMove) { 317 | section.css({ 318 | left: dialogConfig.left, 319 | top: dialogConfig.top 320 | }); 321 | } else { 322 | section.animate({ 323 | left: dialogConfig.left, 324 | top: dialogConfig.top 325 | }, { 326 | queue: false 327 | }); 328 | } 329 | } 330 | 331 | if (imageTag) { 332 | Dialog.move(section, isMove); 333 | } 334 | }, 335 | 336 | // 显示时的动画效果 337 | move: function(section, isMove) { 338 | if (dialogOpts.isFixed && isMove) { 339 | section.css({ 340 | marginTop: -(dialogConfig.top - 150) 341 | }).animate({ 342 | marginTop: -dialogConfig.top, 343 | opacity: 1 344 | }, function() { 345 | section.css('overflow', 'visible'); 346 | }); 347 | } else if (isMove) { 348 | section.css({ 349 | top: (dialogConfig.top + 150) 350 | }).animate({ 351 | top: dialogConfig.top, 352 | opacity: 1 353 | }, function() { 354 | section.css('overflow', 'visible'); 355 | }); 356 | } 357 | 358 | section.animate({ 359 | width: dialogConfig.width 360 | }, { 361 | queue: false 362 | }); 363 | }, 364 | 365 | // 取消默认事件 366 | cancelDefault: function(e) { 367 | e.preventDefault(); 368 | e.stopPropagation(); 369 | } 370 | }; 371 | 372 | // 弹窗类公共处理函数封装 373 | $.extend({ 374 | /** 375 | * 发送成功的提示框（置顶） 376 | * @param {String} msg 提示语 377 | * @param {Number} duration 持续多长时间后关闭 378 | * @param {Function} callback 回调函数 379 | * @return {undefined} 380 | */ 381 | sendSuccessToTop: function(msg, duration, callback) { 382 | var content = '
' + ' ' + msg + '
'; 383 | 384 | $('body').append(content); 385 | 386 | var $tipBox = $('.dialog-success-top'), 387 | width = $tipBox.width(); 388 | 389 | $tipBox.css({ 390 | 'margin-left': -(width / 2), 391 | 'margin-top': 20, 392 | 'opacity': 0 393 | }); 394 | 395 | $tipBox.animate({ 396 | 'opacity': 1, 397 | 'margin-top': 0 398 | }, 400, function() { 399 | // 自动隐藏 400 | clearTimeout(window.cc_timerSendSuccessToTop); 401 | window.cc_timerSendSuccessToTop = setTimeout(function() { 402 | $tipBox.fadeOut(function() { 403 | $tipBox.remove(); 404 | typeof callback === 'function' && callback(); 405 | }) 406 | }, duration || 3000); 407 | }); 408 | }, 409 | 410 | /** 411 | * 发送警告的提示框（置顶） 412 | * @param {String} msg 提示语 413 | * @param {Number} duration 持续多长时间后关闭 414 | * @param {Function} callback 回调函数 415 | * @return {undefined} 416 | */ 417 | sendWarningToTop: function(msg, duration, callback) { 418 | var content = '
' + ' ' + msg + '
'; 419 | 420 | $('body').append(content); 421 | 422 | var $tipBox = $('.dialog-warning-top'), 423 | width = $tipBox.width(); 424 | 425 | $tipBox.css({ 426 | 'margin-left': -(width / 2), 427 | 'margin-top': 20, 428 | 'opacity': 0 429 | }); 430 | 431 | $tipBox.animate({ 432 | 'opacity': 1, 433 | 'margin-top': 0 434 | }, 400, function() { 435 | // 自动隐藏 436 | clearTimeout(window.cc_timerSendWarningToTop); 437 | window.cc_timerSendWarningToTop = setTimeout(function() { 438 | $tipBox.fadeOut(function() { 439 | $tipBox.remove(); 440 | typeof callback === 'function' && callback(); 441 | }); 442 | }, duration || 3000); 443 | }); 444 | }, 445 | 446 | /** 447 | * 发送提示信息 448 | * @param {String} msg 提示语 449 | * @param {Number} duration 持续多长时间后关闭 450 | * @param {Function} callback 回调函数 451 | * @param {string} iconStr icon内容 452 | * @return {undefined} 453 | */ 454 | sendMsg: function(msg, duration, callback, iconStr) { 455 | // 缺省duration参数 456 | if ($.isFunction(duration)) { 457 | callback = duration; 458 | duration = undefined; 459 | } 460 | 461 | var content = '
' + '
' + (iconStr || '') + msg + '
' + '
'; 462 | 463 | var _options = { 464 | id: 'dialogTipBox', 465 | title: ' ', 466 | hideHeader: true, 467 | hideClose: false, 468 | content: content, 469 | callback: duration === false ? null : function() { 470 | // 自动隐藏 471 | clearTimeout(window.timerDialogHide); 472 | window.timerDialogHide = setTimeout(function() { 473 | $(closeClass).trigger('click'); 474 | }, duration || 3000); 475 | }, 476 | onClose: function() { 477 | typeof callback === 'function' && callback(); 478 | } 479 | }; 480 | 481 | Dialog.show(_options); 482 | }, 483 | 484 | /** 485 | * 发送成功（弹窗） 486 | * @param {String} msg 提示语 487 | * @param {Number} duration 持续多长时间后关闭 488 | * @param {Function} callback 回调函数 489 | * @return {undefined} 490 | */ 491 | sendSuccess: function(msg, duration, callback) { 492 | $.sendMsg(msg, duration, callback, ''); 493 | }, 494 | 495 | /** 496 | * 发送警告（弹窗） 497 | * @param {String} msg 提示语 498 | * @param {Number} duration 持续多长时间后关闭 499 | * @param {Function} callback 回调函数 500 | * @return {undefined} 501 | */ 502 | sendWarning: function(msg, duration, callback) { 503 | $.sendMsg(msg, duration, callback, ''); 504 | }, 505 | 506 | /** 507 | * 发送错误（弹窗） 508 | * @param {String} msg 提示语 509 | * @param {Number} duration 持续多长时间后关闭 510 | * @param {Function} callback 回调函数 511 | * @return {undefined} 512 | */ 513 | sendError: function(msg, duration, callback) { 514 | $.sendMsg(msg, duration, callback, ''); 515 | }, 516 | 517 | /** 518 | * 发送确认提示框 519 | * @param {Object} options 配置选项 520 | * @return {undefined} 521 | */ 522 | sendConfirm: function(options) { 523 | // 配置选项合并 524 | options = $.extend(true, { 525 | id: 'dialogConfirmBox', 526 | title: '提示框', 527 | hideHeader: false, 528 | hideClose: false, 529 | withCenter: false, // 是否水平居中 530 | withIcon: false, // 是否显示icon，可传递withIcon的替代类名 531 | autoClose: false, // 是否自动关闭 532 | timeout: 3000, // 多少毫秒之后自动关闭 533 | width: null, // 自定义宽度 534 | noconfirm: false, // 提交按钮是否添加noconfirm属性 535 | msg: '', // 提示语 536 | desc: '', // 描述文本 537 | content: '', // 自定义内容 538 | button: { 539 | confirm: '确认', // 确认按钮-标题，null表示不显示，可以通过{text:'按钮文本', href:'按钮链接', target:'链接打开方式',behavior:'是否执行行为'}进行自定义设置 540 | cancel: '取消', // 取消按钮-标题，null表示不显示，可以通过{text:'按钮文本', href:'按钮链接', target:'链接打开方式',behavior:'是否执行行为'}进行自定义设置 541 | cancelFirst: false // 取消狂是否在前面 542 | } 543 | }, options); 544 | 545 | // 是否显示按钮 546 | var confirmValue = options.button.confirm, 547 | cancelValue = options.button.cancel, 548 | isShowButton = options.button && (confirmValue || cancelValue), 549 | buttonConfirm = '', 550 | buttonCancel = '', 551 | buttonContent = '', 552 | appendClass = '', 553 | appendStyle = ''; 554 | 555 | if (isShowButton) { 556 | buttonConfirm = (confirmValue ? '' + (confirmValue.text || confirmValue) + '' : ''); 557 | buttonCancel = (cancelValue ? '' + (cancelValue.text || cancelValue) + '' : ''); 558 | buttonContent = '
' + (options.button.cancelFirst ? buttonCancel + buttonConfirm : buttonConfirm + buttonCancel) + '
' 559 | } 560 | 561 | if (options.withCenter) { 562 | appendClass += ' withCenter'; 563 | } 564 | 565 | if (options.withIcon) { 566 | appendClass += ' ' + (typeof options.withIcon === 'string' ? options.withIcon : 'withIcon'); 567 | } 568 | 569 | if (options.width !== null) { 570 | appendStyle = ' style="width:' + options.width + (typeof options.width === 'string' ? '' : 'px') + ';"'; 571 | } 572 | 573 | // 弹窗内容 574 | var content = '
' + (options.msg === '' ? '' : '
' + options.msg + '
') + (options.desc === '' ? '' : '
' + options.desc + '
') + (options.content === '' ? '' : '
' + options.content + '
') + (buttonContent) + '
'; 575 | options.content = content; 576 | 577 | // 自动隐藏选项 578 | if (options.autoClose) { 579 | var _callbackCopy = options.callback || $.noop; 580 | options.callback = function() { 581 | _callbackCopy(); 582 | // 自动隐藏 583 | clearTimeout(window.timerDialogHide); 584 | window.timerDialogHide = setTimeout(function() { 585 | $(closeClass).trigger('click'); 586 | }, options.timeout); 587 | }; 588 | } 589 | 590 | Dialog.show(options); 591 | } 592 | }); 593 | 594 | // 相关事件绑定 595 | (function() { 596 | var $doc = $(document); 597 | 598 | // 绑定：用于关闭对话弹窗 599 | $doc.on('click', closeClass, function() { 600 | var $that = $(this), beforeReturn; 601 | 602 | // 如果返回false，则表示中断关闭弹窗 603 | typeof dialogOpts.onBeforeClose === 'function' && (beforeReturn = dialogOpts.onBeforeClose($that)); 604 | if (beforeReturn === false) return; 605 | 606 | clearTimeout(window.timerDialogHide); 607 | Dialog.hide(function() { 608 | if (typeof dialogOpts.onClose === 'function') { 609 | dialogOpts.onClose($that, beforeReturn); 610 | } 611 | }); 612 | }); 613 | 614 | // 绑定：用于执行弹窗的确认操作 615 | $doc.on('click', '.j_dialogConfirm', function() { 616 | var $that = $(this), beforeReturn; 617 | 618 | // 如果提交按钮存在noconfirm属性，将不执行响应 619 | if ($that.attr('noconfirm') !== undefined) return; 620 | 621 | // 如果返回false，则表示中断关闭弹窗 622 | typeof dialogOpts.onBeforeConfirm === 'function' && (beforeReturn = dialogOpts.onBeforeConfirm($that)); 623 | if (beforeReturn === false) return; 624 | 625 | clearTimeout(window.timerDialogHide); 626 | Dialog.hide(function() { 627 | if (typeof dialogOpts.onConfirm === 'function') { 628 | dialogOpts.onConfirm($that, beforeReturn); 629 | } 630 | }); 631 | }); 632 | 633 | // 绑定：用于执行弹窗的取消操作 634 | $doc.on('click', '.j_dialogCancel', function() { 635 | var $that = $(this), beforeReturn; 636 | 637 | // 如果返回false，则表示中断关闭弹窗 638 | typeof dialogOpts.onBeforeCancel === 'function' && (beforeReturn = dialogOpts.onBeforeCancel($that)); 639 | if (beforeReturn === false) return; 640 | 641 | clearTimeout(window.timerDialogHide); 642 | Dialog.hide(function() { 643 | if (typeof dialogOpts.onCancel === 'function') { 644 | dialogOpts.onCancel($that, beforeReturn); 645 | } 646 | }); 647 | }); 648 | 649 | // 绑定：点击弹窗遮罩层关闭弹窗 650 | $doc.on('click', '.j_bgHide', function() { 651 | $(closeClass).trigger('click'); 652 | }); 653 | 654 | // 绑定：按ESC按键关闭弹窗 655 | $doc.on('keyup', function(ev) { 656 | if (ev.keyCode == 27 && $('.j_escHide').length) { 657 | $(closeClass).trigger('click').removeClass('j_dialogClose'); 658 | } 659 | }); 660 | })(); 661 | 662 | // 使用$.dialog()进行访问 663 | $.dialog = Dialog.show; 664 | $.dialogClose = Dialog.hide; 665 | }); --------------------------------------------------------------------------------