Coder Social home page Coder Social logo

taobao's Introduction

taobao淘宝购物车

###demo仅供学习参考!

在pc端实现的淘宝购物车页面实现了以下功能,或者说的高端一些,实现了一些与用户交互方面的功能。

  1:顶部实现了hover状态和非hover状态时二级菜单的出现和隐藏,并且弹出的二级菜单absolute化。这里的icon涉及了css3中的伪元素。并且向下的按钮是使用css3实现的。

  2:搜索框实现了功能比较多。

   搜索框的使用:输入lan,n按回车或者按搜索按钮;弹出的下拉框选择第三个产品,回车或按搜索按钮。

    首先是当你输入某个字符串之后会有相应的下拉菜单弹出。这里涉及了jquery ajax 的方法,使用$.get方法去获取json数据,然后动态加载html,最后返回到客户端上。另外涉及了jquery中的键盘事件keyup,当keycode为13(也就是enter键)时,会有相应的json数据被异步加载,然后放到相应的容器内。这样做的好处是不用整页刷新,对客户体验较好,特别是在移动端上。异步加载会极大减少流量的消耗。

    当然这里还要重点在说的是,如果希望可以操作异步加载的数据,然后返回到客户端上的相应内容时,这里需要用到事件代理和事件冒泡的原理。什么意思呢?就是说,如果你把一些事件绑定在被动态加载html的元素上面,那么这些被绑定的事件会失效。解决方法是需要将事件绑定到body(或者其他非动态加载的html)元素上。详细的我会在之后的文章中谈及。

  3:商品的选择,查询,删除,增加。

    选择商品大概有几种逻辑:当点击全选按钮时,全部商品被选择,并且计算相应的价格和商品数量;取消全选时,全部商品被取消,并且商品价格和数量相应变化;当在全选状态下,某个商品被取消选择,则取消全选状态,并且会相应计算商品价格和商品数量;当所有商品被全部选中时,全选按钮重新被激活,并且计算相应的商品价格和商品数量。

    查询商品:如果想要查询自己购物车的商品,我的实现是自己去写一些json数据,然后通过ajax动态加载html,然后返回到客户端。

    删除商品:pc端页面还有一个没有实现的就是当我去删除某个商品时,如何删除json数据里面的相应商品数据。我能做到的就是在页面上删除。做法是使用了jquery的detach()方法,而不是remove()方法。如果有博友知道怎么实现json数据内的相应商品数据一并删除,希望能给我留言,给予我一定的解决方案。

  4:固定底部的商品操作栏。

    这里主要有两个知识点:一是让整个footer的父容器fixed,然后bottom设置为0。二是在.container元素上设置margin-bottom值,距离可视窗口底部有一定的距离。如果不设置的话,当拉到最后一个商品时,最后一个商品会被fixed的容器覆盖。用户体验不够好。

在移动端,一套代码实现了不同设备的响应式布局,我使用的media query最大支持1024px。因为我是第一次接触移动端页面,移动端淘宝购物车页面是基于css3的flexbox伸缩布局盒模型实现的,如果有什么不足之处,希望前端牛人指出,抱着学习的态度,本人积极改正。

在移动端上,实现的功能相对简单,因为手机屏幕小的原因,对很多在pc端存在的元素,在移动端页面上都进行了相应地做了减法。

taobao's People

Contributors

keithchou avatar

Stargazers

黄文君 avatar

Watchers

James Cloos avatar

Forkers

jjg0519

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.