学习要点:
1.项目介绍
2.jquery UI
3.UI主题
知问系统,是一个答问系统。主要功能:即会员提出问题,会员回答问题。目前比较热门的此类网站有:知乎http://www.zhihu.com,百度知道http://zhidao.baidu.com/等。这里我们重点参考“知乎”,来学习一下它采用的前端效果。
一、项目介绍
我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能。而“百度知道”作为辅助功能来确定我们 这个项目需要的前端功能。
从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框;2.前端按钮;3.折叠菜单;4.选项卡切换;5.滑动块;6.日历;7.自动补全;8.拖放;等一系列前端模块。
我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能。而“百度知道”作为辅助功能来确定我们 这个项目需要的前端功能。
从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框;2.前端按钮;3.折叠菜单;4.选项卡切换;5.滑动块;6.日历;7.自动补全;8.拖放;等一系列前端模块。
二、jQuery UI
jquery UI是以jquery为基础的开源javaScript网页用户代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建有很好交互性的web应用程序。
jquery UI是以jquery为基础的开源javaScript网页用户代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建有很好交互性的web应用程序。
jquery UI的官方网站为:http://jqueryui.com/,我们下载最新版本即可。目前本课程采用的最新版本为:jquery-ui-1.10.3.custom.zip。里面目录结构如下:
1.css,包含与jquery UI相关的css文件;
2.js,包含jquery UI相关的javascript文件;
3.Development-bundle,包含多个不同的子目录:demos(jquery UI示例文件)、docs(jquery UI的文档文件)、themes(css主题文件)和ui(jquery UI的javascript文件)。
1.css,包含与jquery UI相关的css文件;
2.js,包含jquery UI相关的javascript文件;
3.Development-bundle,包含多个不同的子目录:demos(jquery UI示例文件)、docs(jquery UI的文档文件)、themes(css主题文件)和ui(jquery UI的javascript文件)。
三、css主题
css主题就是jquery UI的皮肤,有各种色调的模板提供使用。对于程序员,可以使用最和网站符号的模板;对于美工,也提供了没有任何样式的模板基于设计。
我们可以在这里:http://jqueryui.com/themeroller/查看已有模板样式。
css主题就是jquery UI的皮肤,有各种色调的模板提供使用。对于程序员,可以使用最和网站符号的模板;对于美工,也提供了没有任何样式的模板基于设计。
我们可以在这里:http://jqueryui.com/themeroller/查看已有模板样式。