知问系统,是一个问答系统。主要功能:即会员提出问题,会员回答问题。目前比较热门的此类网站有:知乎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. Golang与MySQL

    1. 在golib下载go-sql-driver/mysql go get github.com/go-sql-driver/mysql 2. 代码引入 import ( "database ...

  2. [译]rabbitmq 2.5 Where’s my message? Durability and you

    我对rabbitmq学习还不深入,这些翻译仅仅做资料保存,希望不要误导大家. There’s a dirty secret about creating queues and exchanges in ...

  3. require.js的用法

    我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文 ...

  4. 使用VBA实现Excel自杀功能

    曾经看到过一个“Excel-Home”出品的“关于Excel自杀功能”的视频教程,经认真学习后,我写下了自己的代码,分享于此. 实现思路: 使用VBA创建一个隐藏的名称,记录当前工作簿打开的次数,如果 ...

  5. Daily Scrum7

    今天我们小组开会内容分为以下部分: part 1: 研讨上一届的项目里积分制度的功能,确定其不足,以及我们可以改进的地方: part 2: 讨论确定我们项目的积分制度的功能目标: part 3:针对用 ...

  6. CS小分队第一阶段冲刺站立会议(5月10日)

    昨日成果:完成了从excel表格导入名单,并且进行抽号的功能 遇到的困难: 1.Excel表格导入时由于版本不同,导致旧版本无法显示,后经修改初步解决 2.改程序无法在未安装office excel驱 ...

  7. .NET-提取字符串实践总结

    前阶段工作时遇到一个截取字符串的问题,由于字符串比较长,大概得几万字符吧(XML形式),要提取中间两个节点之间的内容,在网上费了好大功夫才找到能用的正则.工作当用的时候碰到这样的事最蛋疼了,网上的资源 ...

  8. 8、android代码优化技术记录

    1.length.length().size的优化 举例: int array_one[] = {1,2,3,4,5,6,7,8,9,10}; int array_two[] = {1,2,3,4,5 ...

  9. 心情符号love

    写点什么呢,先谢谢心情吧,算是第一个脚印了,想先把之前的一些笔记和心得迁移进来吧,以后每个月都要充实自己的知识.向大婶们看齐.走你们走过的脚印,看你们前行的身影.沿着你们留下的路,继续为后者拓宽道路. ...

  10. 工作点滴积累(1)---MD5和编码

    今天同事忽然问了一个问题,他发现同一个字符,比如"电影",用项目中的md5工具类生成的hash值和网上提供的在线MD5生成的hash值有时不一样,在只包含了字母字符串中,生成的ha ...