小溪里 - XiaoXili.com

前端,前端开发工程师,云开发,云开发布道师,小程序,Taro,人工智能,xiaoxili,沪江 cctalk


  • 网站首页

  • 博客首页

  • 关于

  • 归档

  • Sitemap
小溪里 - XiaoXili.com

AngularJS 多字段混合排序

发表于 2016-03-31 | 分类于 前端

在小溪里最近做的 “加入我们” 碰到了多字段中英文排序,需要把多个字段按照先英文后中文的方式进行排序。

##初始字段

  • 职位名称:中英文,如“Web 前端开发工程师”
  • 是否热门:new
  • 工作职能:中英文,如“软件研发”
  • 工作地点:中英文,如“北京 - 望京”或“北京 - 亦庄”
  • 职位详情:HTML 文档

排序具体规则

产品说需要将职位是否热门、职位名称、工作职能、工作地点按照汉语拼音/English 进行排序,相同拼音(字母)开头开头时,按照英文在前面来排,如“Android 工程师”在 “安全工程师”之前。

产品经理制定的排序具体规则:(减号表示降序)

  • PC
    • 默认升序: 职能 > 热门 > 职位 > 地点
    • 职位升序: 热门 > 职位 > 职能 > 地点
    • 职位降序: 热门 > -职位 > 职能 > 地点
    • 职能升序: 职能 > 热门 > 职位 > 地点
    • 职能降序:-职能 > 热门 > 职位 > 地点
    • 地点升序: 地点 > 热门 > 职能 > 职位
    • 地点降序:-地点 > 热门 > 职能 > 职位
  • 移动端
    • 默认升序: 热门 > 职能 > 职位 > 地点
阅读全文 »
小溪里 - XiaoXili.com

移动端 Web 网页调试技巧

发表于 2016-02-25 | 分类于 前端

本文主要列举了调试本地网页、查看测试环境网页的各种方法,涵盖了PC、iPad、移动端的调试技巧。
本文的不足之处在于,小溪里暂时还没有找到调试位于微信中和安卓各国产浏览器上的网页。

阅读全文 »
小溪里 - XiaoXili.com

响应式Web设计——断点设计

发表于 2015-06-03 | 分类于 前端

前言

小溪里从2013年开始接触响应式Web设计,前后做过多个响应式网站,对 CSS3 媒体查询中断点还是有一点理解的。

本文重点探讨的是一个响应式网站的需求:

  • 通用型 CSS3 Media Query,尽可能短而简单,容易扩展;
  • 在手机上等小屏幕设备上显示的是Mobile版,而在包括iPad、PC端在内的中大型屏幕上要显示的PC版;
  • 不借助 JavaScript 的 UserAgent 判断设备或浏览器;
  • 咱不考虑 Window Phone 和 Surface Pro,事实上小溪里手上也没这两款测试设备。
阅读全文 »
小溪里 - XiaoXili.com

从PC Web到移动 Web,我踩过的坑

发表于 2015-06-03 | 分类于 前端

我在《响应式Web设计——断点设计》一文中简单阐述了我对断点的理解及运用。

快速审查

问题1:屏幕变宽,页面中可能会出现过多空白区域。应当调节元素宽度或者设置其他方式自动来补充页面留白.

示例: 互联网分析沙龙

阅读全文 »
小溪里 - XiaoXili.com

TweenMax 动画研究

发表于 2015-06-02 | 分类于 前端

最近 Html5 动画非常火,小溪里也在某一个网页中发现了它的踪迹。DEMO(建议在手机微信或者iPad微信上观看)

我在帝都的前端朋友也有问我,这种Html5动画怎么做。这里我把我的研究成果在这里展示一下。

我的这个 HTML5 动画研究是基于 Tween 的高级版 TweenMax 来做的。

阅读全文 »
小溪里 - XiaoXili.com

github-hexo

发表于 2015-06-01 | 分类于 博客

为嘛用它
现今非常流行使用github来管理自己的代码,用来展示自己的技术研究。小溪里也不能免俗地喜欢了使用github.io来放置我的个人博客。

##简介
hexo是一款基于Node.js的静态博客框架。目前在GitHub上已有 5160 star 和 814 fork。
hexo 中文官网
Hexo在github上构建免费的Web应用

阅读全文 »
小溪里 - XiaoXili.com

PageScroll 研究

发表于 2015-05-26 | 分类于 前端

引言

使用了jQuery插件 jquery.onepage-scroll.js 1.2.1 (下文用onepage-scroll)插件进行修改。具体文章详见 How I Built The One Page Scroll Plugin。onepage-scroll新版本为 1.3.1

本插件的名字为 jquery.pagescroll.js(下文用 pagescroll) ,以向 onepage-scroll 致敬,同时为了有点区别。

功能列表

  • 单页/全屏滚动(借鉴)
    • 支持鼠标滚轮、空格键、上下方向键、上下翻页键、上下滑动
    • 在PC和ipad上支持 响应式 操作
    • 在Mobile上支持竖屏滚动,横屏正常拖动
  • 支持 header、footer、topSlideNav、pagination
  • 手指跟随(未加入阻尼)
  • 页面回弹(有阻尼)
  • 支持 CSS3 easing cubic-bezier()
阅读全文 »
<12
Xiao Xi Li

Xiao Xi Li

盛瀚钦,沪江 CCtalk 前端开发工程师,Hi头像小程序作者,腾讯云云开发布道师,Taro 社区的知识共建者,著有《从0到1开发一个智能头像识别小程序》小册。

17 日志
4 分类
31 标签
© 2021 Xiao Xi Li
由 Hexo 强力驱动
沪ICP备20020594号-2
Look at My GitHub
主题 - NexT.Mist