知问系统，是一个问答系统。主要功能：即会员提出问题，会员回答问题。目前比较热门的此类网站有：知乎http://www.zhihu.com、百度知道http://zhidao.baidu.com等。这里我们重点参考“知乎”，来学习一下它采用的前端效果。

项目介绍

我们重点仿照“知乎”的架构模式来搭建界面和布局，以及大部分前端功能。而“百度知道”作为辅助功能来确定我们这个项目需要的前端功能。

从以上知名问答站点中，我们可以确认最主要的前端功能：1.弹出对话框；2.前端按钮；3.折叠菜单；4.选项卡切换；5.滑动块；6.日历；7.自动补全；8 拖放等一系列前端模块。

jQuery UI

jQuery UI是以jQuery为基础的开源JavaScript网页用户界面代码库，包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jQuery UI的官网网站为：http://jqueryui.com/，我们下载最新版本的即可。目前本项目采用的最新版本为：jquery-ui-1.11.4.custom.zip。里面目录结构如下：

1.xxx.css包含与jQuery UI相关的CSS文件

2.xxx.js包含jQuery UI相关的JavaScript文件

3.index.html可以查看jQuery UI功能的索引页

CSS主题

CSS主题就是jQuery UI的皮肤，有各种色调的模版提供使用。对于程序员，可以使用最和网站符合的模版；对于美工，也提供了没有任何样式的模版基于设计。

我们可以在这里：http://jqueryui.com/themeroller/查看已有模版样式。

知问前端——概述及jQuery UI的更多相关文章

  1. 第一百七十七节，jQuery，知问前端--概述及 jQuery UI

    jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...

  2. 知问前端——自动补全UI

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var hos ...

  3. 知问前端——对话框UI(一)

    对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...

  4. 知问前端——日历UI(三)

    datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...

  5. 知问前端——日历UI(二)

    datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...

  6. 知问前端——日历UI(一)

    日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); ...

  7. 知问前端——工具提示UI

    工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...

  8. 知问前端——按钮UI

    按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...

  9. 第一百八十七节，jQuery，知问前端--cookie 插件，注册成功后生成cookie，显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

随机推荐

  1. go语言包与包引用

    go语言中包(package)与java中的包(package)非常类似,都是组织代码的方式,而且都和磁盘上的目录结构存在对应关系. go语言中,包名一般为go代码所在的目录名,但是与java不同的是 ...

  2. 基于jquery的页面代码的优化

    高亮显示,选中的文字链接 显示效果如下 默认选择“通知公告”效果 通知公告 学院动态 行业动态       选择“学院动态”效果 通知公告 学院动态 行业动态       选择“行业动态”效果 通知公 ...

  3. WordPress实现长篇文章/日志/单页面分页功能效果

    在WordPress里写文章,如果内容很多,你可能想要把文章分成几页来让访客浏览,这样既保持了网页的美观,也提高了网页的打开速度.但是在WordPress默认提供的按钮里,你可能找不到文章分页功能所对 ...

  4. linux下sort详解（sort对科学记数法的排序）

    1.参数解释 -t 设置分隔符 -k 设置比较域(列) -n 按数字比较 -g 科学记数法方式比较 -o 设置输出文件,与“>”相比可以设置输出到原文件,“>”会清空原文件 -r 降序(大 ...

  5. 20145103 《Java程序设计》第2周学习总结

    20145103 <Java程序设计>第2周学习总结 教材学习内容总结 在第三章主要学习了Java语言中的类型及其变量主要类型为:整数(1字节的byte,2字节的short,4字节的int ...

  6. Kibana4学习<二>

    生产环境部署 Kibana4 是是一个完整的 web 应用.使用时,你需要做的只是打开浏览器,然后输入你运行 Kibana 的机器地址然后加上端口号.比如说:localhost:5601 或者 htt ...

  7. 【Construct Binary Tree from Inorder and Postorder Traversal】cpp

    题目: Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume ...

  8. c++ swap 函数

    转载地址 1,最通用的模板交换函数模式:创建临时对象,调用对象的赋值操作符. template <class T> void swap ( T& a, T& b ) { T ...

  9. Javascript使用function创建类的两种方法

    1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i= ...

  10. C++ Tempatet之模板模型

    模板一共有三种类型: 1.第一种包含模型:包含模型是讲模板的定义和声明都放在头文件里(注:一般我们写的代码是将声明放在头文件里,实现放在cpp里,防止产生两份实现代码) 缺点:包含模型会增加代码的量. ...