EasyUI实现购物车、菜单和窗口栏等最常用的用户界面功能.
2024-06-09 01:01:05
一、EasyUI
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。
- easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
- 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
- HTML 网页的完整框架。
- easyui 节省了开发产品的时间和规模。
- easyui 非常简单，但是功能非常强大。
二、EasyUI 实现购物车效果
完整代码如下，图拍你可以自行更换：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/easyui.css"><script type="text/javascript" src="js/jquery-3.1.1.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><style type="text/css">.products{list-style:none;margin-right:300px;padding:0px; height:100%; } .products li{ display:inline; float:left; margin:10px; } .item{ display:block; text-decoration:none; } .item img{ border:1px solid #333; } .item p{ margin:0; font-weight:bold; text-align:center; color:#c3c3c3; } .cart{ position:fixed; right:0; top:0; width:300px; height:100%; background:#ccc; padding:0px 10px; } h1{ text-align:center; color:#555; } h2{ position:absolute; font-size:16px; left:10px; bottom:20px; color:#555; } .total{ margin:0; text-align:right; padding-right:20px; } </style> <script> var data = {"total":0,"rows":[]}; var totalCost = 0; $(function(){ //是否能拖入 $('#cartcontent').datagrid({ singleSelect:true }); $('.item').draggable({ //设置拖动后是否返回 revert:true, proxy:'clone', onStartDrag:function(){ // //(this).draggable('options').cursor = 'not-allowed'; //设置移动是图片的高度 $(this).draggable('proxy').css('z-index',10); }, onStopDrag:function(){ //$(this).draggable('options').cursor='move'; } }); $('.cart').droppable({ onDragEnter:function(e,source){ //$(source).draggable('options').cursor='auto'; }, onDragLeave:function(e,source){ //$(source).draggable('options').cursor='not-allowed'; }, onDrop:function(e,source){ var name = $(source).find('p:eq(0)').html(); var price = $(source).find('p:eq(1)').html(); //split(“char”); 将字符串通过指定字符分割为数组;如果传入””,则将所有字符放入数组 addProduct(name, parseFloat(price.split('$')[1])); } }); }); function addProduct(name,price){ function add(){ for(var i=0; i<data.total; i++){ var row = data.rows[i]; if (row.name == name){ row.quantity += 1; return; } } data.total += 1; data.rows.push({ name:name, quantity:1, price:price }); } add(); totalCost += price; $('#cartcontent').datagrid('loadData', data); $('div.cart .total').html('Total: $'+totalCost); } </script> </head> <body> <ul class="products"> <li> <a href="#" class="item"> <img src="img/shirt1.gif"/> <div> <p>Balloon</p> <p>Price:$21</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="img/shirt2.gif"/> <div> <p>Feeling</p> <p>Price:$22</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="img/shirt3.gif"/> <div> <p>Elephant</p> <p>Price:$23</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="img/shirt4.gif"/> <div> <p>Stamps</p> <p>Price:$24</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="img/shirt5.gif"/> <div> <p>Monogram</p> <p>Price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="img/shirt6.gif"/> <div> <p>Rolling</p> <p>Price:$26</p> </div> </a> </li> </ul> <div class="cart"> <h1>Shopping Cart</h1> <div style="background:#fff"> <table id="cartcontent" fitColumns="true" style="width:300px;height:auto;"> <thead> <tr> <th field="name" width=140>Name</th> <th field="quantity" width=60 align="right">Quantity</th> <th field="price" width=60 align="right">Price</th> </tr> </thead> </table> </div> <p class="total">Total: $0</p> <h2>Drop here to add to cart</h2> </div> </body> </html>三、EasyUI实现菜单自动播放
完整代码如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/easyui.css"><link rel="stylesheet" type="text/css" href="css/icon.css "></head><body><div id="tt" class="easyui-tabs" style="width:330px;height:270px;"><div title="Shirt1" style="padding:20px;"><img src="data:images/shirt1.gif"></div><div title="Shirt2" style="padding:20px;"><img src="data:images/shirt2.gif"></div><div title="Shirt3" style="padding:20px;"><img src="data:images/shirt3.gif"></div><div title="Shirt4" style="padding:20px;" ><img src="data:images/shirt4.gif"></div><div title="Shirt5" style="padding:20px;"><img src="data:images/shirt5.gif"></div></div><script type="text/javascript" src="js/jquery-3.1.1.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><script type="text/javascript">$(function(){var index = 0; var t = $('#tt'); var tabs = t.tabs('tabs'); console.log(tabs[index].panel('options').title); // .tabs("select",title);选中title名的tabs // t.tabs("select","Shirt"+4); setInterval(function(){ t.tabs('select', tabs[index].panel('options').title); index++; if (index >= tabs.length){ index = 0; } }, 1000); }); </script> </body> </html>四、EasyUI实现左侧面板折叠功能
完整代码如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/easyui.css"><link rel="stylesheet" type="text/css" href="css/icon.css "><script type="text/javascript" src="js/jquery-3.1.1.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script></head><body><!--collapsible:是否可折叠collapsed:加载时候是否折叠--><div style="width:200px;height:auto;background:#7190E0;padding:5px;"><div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">View as a slide show<br/> Order prints online<br/> Print pictures</div><br/><div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">Make a new folder<br/> Publish this folder to the Web<br/> Share this folder</div><br/><div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">New York<br/> My Pictures<br/> My Computer<br/> My Network Places </div> <br/> <div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;"> My documents<br/> File folder<br/><br/> Date modified: Oct.3rd 2010 </div> </div> <script type="text/javascript"> .panel - body { background: #f0f0f0; } .panel - header { background: #fff url('images/panel_header_bg.gif') no - repeat top right; } .panel - tool - collapse { background: url('images/arrow_up.gif') no - repeat 0 px - 3 px; } .panel - tool - expand { background: url('images/arrow_down.gif') no - repeat 0 px - 3 px; } </script> </body> </html>五、EasyUI实现对话框
完整代码如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/easyui.css"><link rel="stylesheet" type="text/css" href="css/icon.css "><script type="text/javascript" src="js/jquery-3.1.1.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script></head><body><div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;" title="My Dialog" iconCls="icon-ok" toolbar="#dlg-toolbar" buttons="#dlg-buttons">Dialog Content.</div><div id="dlg-toolbar"><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="javascript:alert('Add')">Add</a><a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="javascript:alert('Save')">Save</a></div><div id="dlg-buttons"><a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="javascript:alert('Ok')">Ok</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dd').dialog('close')">Cancel</a></div></body></html>六、结束语
博主为了直观简洁，便没有对项目进行过多的解释，希望对大家能够有所帮助！
转载于:https://www.cnblogs.com/xyq1107/p/7821293.html
EasyUI实现购物车、菜单和窗口栏等最常用的用户界面功能.相关推荐
- 【Android】Activity和PopupWindow都实现从底部弹出或滑出选择菜单或窗口
使用Activity和PopupWindow都实现从底部弹出或滑出选择菜单或窗口 [Android]测试与popwindow PopupWindow转载自:Android PopupWindow实现从 ...
- 托盘图标菜单_全新开始菜单和任务栏，Windows 10X 抢先体验
微软正在Windows 10X的"开始"菜单和任务栏上打造全新的体验.Windows 10X具有流畅和极简主义,旨在使Windows体验更简单,减少不必要的遗留问题,从而使用户体验 ...
- 微软发布Windows 11测试版开始菜单和任务栏等区域无响应的解决办法
微软今早推出的Windows 11开发版和测试版均出现任务栏和开始等无响应问题,此问题影响较多用户正常使用. 微软经过调查后发现导致此问题的是后端服务器故障,部署的错误内容被推送给用户导致系统出现某些 ...
- android PopupWindow实现从底部弹出或滑出选择菜单或窗口
android PopupWindow实现从底部弹出或滑出选择菜单或窗口 http://www.open-open.com/lib/view/open1379383271818.html http:/ ...
- Win11还原Win10开始菜单及任务栏工具[Win7勿入]
功能介绍自由选择 Win10 和 Win11 款式的任务栏,支持从不合并.小图标和大量自定义. 禁用 Win11 右键菜单和命令栏. 开始菜单默认打开所有应用.设定显示常用应用个数.是否在当前显示器显 ...
- CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言 该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
- php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果 我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
- zencart购物车修改调用显示购物车图片,修改边栏购物车模版
zencart购物车修改调用显示购物车图片,修改边栏购物车模版 显示购物车图片教程 屏幕调暗了所以图片截取有点暗 开始是这样的 本来是没有图片的现在改了有图片 的 自己举一反三吧 事例 调用边栏购物车 ...
- pyqt5 最小化 系统托盘,PyQt5:如何从系统托盘图标上下文菜单启动窗口？
我有两个独立的文件,一个创建系统托盘图标和上下文菜单,另一个创建一个接受用户输入的窗口.在 traywindow.py包含以下内容:import sys import os from PyQt5 im ...
- 从“开始菜单”到任务栏
开始屏幕 从"开始菜单"到"任务栏" 自"开始菜单"在 Windows 95 出现后一直是除了桌面快捷方式外用户应用程序和系统功能的快速启动 ...
最新文章
- 史上最强：numpy实现全部机器学习算法
- 三个优秀的语义分割框架 PyTorch实现
- 网工小课堂(part1)--计算机网络概论
- Educational Codeforces Round 75 (Rated for Div. 2) D. Salary Changing 二分 + check
- 【英语学习】【Level 08】U01 Let's Read L5 You're a wizard, Harry.
- PowerShell全自动分配CPU
- 一条龙教程：Matlab下使用yalmip(工具箱)+cplex（求解器）
- 用数字计算机公式表白,爱情数学简单表白公式
- HTML转PDF浅析
- Python中的warnings模块详细阐述
- java虚拟机JVM--java虚拟机的结构
- docker容器创建的流程详解
- 手机端页面自适应解决方案
- ORACLE 获取某一日期所在周的周一
- 用Bootstrap框架制作下拉列表
- Android studio 使用androidX后应用启动log中报Didn‘t find class “android.view.View$OnUnhandledKeyEventListener“
- EtherCAT从站读取MPU9250数据并进行姿态解算
- 自己的选择，再难也要坚持—兄弟连IT教育
- EPSON RX8010SJ RTC 调试笔记之四， 报警中断功能 (Alarm Interrupt Function)
- KindEditor图片空间增加图片删除功能