├── .gitignore ├── 403.html ├── 404.html ├── 500.html ├── README.md ├── favicon.ico ├── favicon.png ├── images └── readme.txt ├── index.html ├── scripts └── jquery-1.8.0.js └── styles ├── base.css ├── theme1 ├── images │ └── readme.txt ├── layout.css └── theme.css ├── theme2 ├── images │ └── readme.txt ├── layout.css └── theme.css └── theme3 ├── images └── readme.txt ├── layout.css └── theme.css /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | 4 | images/.gitignore 5 | -------------------------------------------------------------------------------- /403.html: -------------------------------------------------------------------------------- 1 | 403 2 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 404 -------------------------------------------------------------------------------- /500.html: -------------------------------------------------------------------------------- 1 | 500 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | web-ui 2 | ====== 3 | 4 | ## 前端架构要求 5 | 6 | * 可以使用部分 HTML5 标签，只要保证浏览器兼容。兼容 IE8+，Safari，Chrome，Firefox。 7 | * 以 JQuery1.8 为核心。 8 | * 方便的多主题切换（不止皮肤，还包括布局），这部分可能需要结合部分后台程序，但在前端架构上要考虑和支持这一点。 9 | * 尽量少的图片，所有的小图标用 Sprites。 10 | * 注意静态文件的数量，只把必要先加载的 JS 放在头部。 11 | * 重点关注性能，主要关注 HTTP 请求数，加载顺序、脚本阻塞。 12 | * 重复出现的样式，脚本必须放到 css、js 文件中。 13 | * 所有静态文件、代码命名要规范。 14 | * 保持代码干净，无冗余代码。 15 | * 不使用 frame，除非必要的情况。 16 | * 除非真正的表格，禁止使用 table。 17 | * 避免在 html 标签中书写 style 属性或者和样式相关的代码。 18 | * 在移动设备（iPad）可以基本正常操作。 19 | 20 | ## 目录结构规范 21 | 22 | . 23 | |-- 403.html 24 | |-- 404.html 25 | |-- 500.html 26 | |-- favicon.ico 27 | |-- favicon.png 28 | |-- images 29 | |-- … .png 30 | |-- … .jpg 31 | |-- … .gif 32 | |-- scripts 33 | |-- jquery-1.8.0.js 34 | |-- … .js 35 | |-- index.html 36 | |-- … .html 37 | |-- styles 38 | |-- base.css 39 | |-- ... 40 | |-- theme1 41 | |-- images 42 | |-- … .png 43 | |-- … .jpg 44 | |-- … .gif 45 | |-- layout.css 46 | |-- theme.css 47 | |-- theme2 48 | |-- images 49 | |-- ... 50 | |-- layout.css 51 | |-- theme.css 52 | |-- theme3 53 | |-- images 54 | |-- ... 55 | |-- layout.css 56 | |-- theme.css 57 | 58 | 59 | - **images** 60 | 基础图片目录。 61 | 62 | - **scripts** 63 | 脚本目录。 64 | 65 | - **styles** 66 | 基础样式文件。 67 | 68 | - **theme** 69 | 主题相关样式、图片，默认 theme1。具体 theme 的名字根据实际情况修改。 70 | 71 | ## 前后端交互 72 | 73 | * 主要采用 AJAX + JSON 方式。 74 | * 所有页面（主要是查询相关），先展示页面，再加载数据（耗时操作提供进度条）。 75 | 76 | ## 前端的主要工作 77 | 78 | * 建设基础 UI 组件库 79 | * 列表的 AJAX 加载 80 | * 列表的修改、删除（批量删除）操作、交互校验 81 | * 统一的模态交互窗口 82 | * 成功、失败、警告提示 83 | * 表单校验 84 | * 进度条 85 | * 上传组件、客户端文件大小校验 86 | * 自动完成 87 | * API 文档 88 | * 配合后端程序员完成页面相关的功能 89 | 90 | ## 后端和前端结合部分的工作 91 | 92 | * 静态 CSS 和 JS 文件的压缩和合并会在应用程序打包时自动完成，前端不用关心这一点，但必须保证这些文件压缩、合并之后不会出现冲突。 93 | * Gzip、Expires、文件名动态时间戳 这些参数会在服务端配置，前端不用关心。 94 | * 后端程序员完成和业务逻辑相关的编码（表单参数校验、Submit、GET/PUT/POST/DELETE）。 95 | 96 | ## 推荐参考 97 | 98 | * [Twitter Bootstrap](http://twitter.github.com/bootstrap/index.html) 99 | * [Jekyll Bootstrap](http://jekyllbootstrap.com) 100 | * [Wordpress](http://wordpress.org) 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/favicon.ico -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/favicon.png -------------------------------------------------------------------------------- /images/readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/images/readme.txt -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/index.html -------------------------------------------------------------------------------- /styles/base.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/base.css -------------------------------------------------------------------------------- /styles/theme1/images/readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme1/images/readme.txt -------------------------------------------------------------------------------- /styles/theme1/layout.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme1/layout.css -------------------------------------------------------------------------------- /styles/theme1/theme.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme1/theme.css -------------------------------------------------------------------------------- /styles/theme2/images/readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme2/images/readme.txt -------------------------------------------------------------------------------- /styles/theme2/layout.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme2/layout.css -------------------------------------------------------------------------------- /styles/theme2/theme.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme2/theme.css -------------------------------------------------------------------------------- /styles/theme3/images/readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme3/images/readme.txt -------------------------------------------------------------------------------- /styles/theme3/layout.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme3/layout.css -------------------------------------------------------------------------------- /styles/theme3/theme.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/batizhao/web-ui/506564fa6e2932821399422b08fa4036d4d82716/styles/theme3/theme.css --------------------------------------------------------------------------------