`
chaoyi
  • 浏览: 311042 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

第16章 知问前端--概述及jQuery UI

 
阅读更多

学习要点:
1.项目介绍
2.jQuery UI
3.UI 主题

知问系统,是一个问答系统。主要功能:即会员提出问题,会员回答问题。目前比较热门的此类网站有:知乎 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.10.3.custom.zip。里面目录结构如下:
1.css,包含与 jQuery UI 相关的 CSS 文件;
2.js,包含 jQuery UI 相关的 JavaScript 文件;
3.Development-bundle, 包含多个不同的子目录: demos(jQuery UI 示例文件)、 docs(jQueryUI 的文档文件)、themes(CSS 主题文件)和 ui(jQuery ui 的 JavaScript 文件)。
4.Index.html,可以查看 jQuery UI 功能的索引页。

三.CSS 主题
CSS 主题就是 jQuery UI 的皮肤,有各种色调的模版提供使用。对于程序员,可以使用最和网站符合的模版;对于美工,也提供了没有任何样式的模版基于设计。
我们可以在这里:http://jqueryui.com/themeroller/查看已有模版样式。

分享到:
评论

相关推荐

    jQuery权威指南-源代码

    第8章 jQuery UI插件/242 8.1 认识jQuery UI /243 8.2 jQuery UI交互性插件/244 8.2.1 拖曳插件/244 8.2.2 放置/247 8.2.3 排序插件/250 8.3 jQuery UI微型插件/252 8.3.1 折叠面板插件/252 8.3.2 日历/255...

    jquery easyui 模板

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它提供了一系列的 UI 组件,如对话框、表格、菜单、按钮等,帮助开发者快速构建具有专业外观的 Web 应用程序。这个模板是为初学者和有经验的开发者设计的,旨在...

    15 day learn jQuery

    《15天学会jQuery》教程概述 jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本教程旨在帮助初学者在短短15天内快速掌握jQuery的核心概念和实用技巧。 ...

    【hr点评】社招模板-求职前端开发岗位(1).docx

    #### 一、Web前端技术概述 - **HTML5**: 超文本标记语言的第五代标准,提供了更多的语义标签和多媒体支持,如`<article>`、`<section>`、`<video>`等。 - **CSS3**: 层叠样式表的第三个版本,引入了新的选择器、伪...

    10天学会jquery.rar

    《10天学会jQuery》教程概述 jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本教程旨在帮助你在短短的10天内掌握jQuery的核心概念和实用技巧,使你...

    jQuery应用程序架构设计工具

    ### jQuery应用程序架构设计工具 #### 一、概述 在当今高度动态且复杂的Web开发环境中,JavaScript框架和库的出现极大地简化了开发流程。其中,jQuery因其简洁易用的API而广受欢迎,但随着项目规模的增长,仅依靠...

    前端架构体系技术.pdf

    本文将对前端架构体系技术进行概述,涵盖 Bootstrap 框架设计、响应式布局、第三方插件管理、MVC/MVVM 框架原理设计、数据绑定、Virtual DOM、 Incremental DOM 等多个方面。 一、框架与组件设计 在前端架构体系...

    Web前端工程师培训课程大纲.docx

    ### Web前端工程师培训课程知识点概览 #### 一、课程背景与目标 - **背景**:根据《上海互联网行业人才紧缺指数(TSI)报告》,Web前端开发工程师是上海互联网行业中非常紧缺的职位之一。该职位不仅需求量大,而且...

    dwz-user-guide.pdf

    - **整合第三方jQuery插件**:提供了一套标准的方法来引入和使用第三方插件,确保与DWZ框架兼容。 - **错误加载XML文档**:遇到此类问题时,检查XML文件的路径和格式是否正确。 - **IIS访问*.html页面的问题**:配置...

    JavaScript权威指南(第6版) 中文版

    第16章 脚本化css 410 16.1 css概览 411 16.2 重要的css属性 416 16.3 脚本化内联样式 427 16.4 查询计算出的样式 431 16.5 脚本化css类 433 16.6 脚本化样式表 436 第17章 事件处理 440 17.1 事件类型 442 17.2 ...

    rail on ruby

    #### 一、Ruby on Rails 概述 - **定义**: Ruby on Rails(简称 Rails 或 RoR)是一种基于 Ruby 语言的 Web 应用开发框架,采用 Model-View-Controller(MVC)架构模式。 - **特点**: - 遵循“约定优于配置”原则...

    struts2基础入门pdf,struts2全面介绍

    #### 十七至十九章 实战案例分析 - **投票管理系统**:通过一个投票管理系统的实例,展示Struts2与其他技术(如Hibernate、Spring)的集成应用。 - **无纸化办公管理系统**:介绍如何利用Struts2框架构建一个无纸化...

    html5入门到精通 视频教程

    04 UI设计(第2阶段内容) 05 AP原型 06 阶段项目02 07 JavaScript核心编程 08 DOM编程 09 阶段项目03 10 服务器端开发技术 11 HTTP协议 12 HTML5高级 13 阶段项目04 14 JQUERY 15 AJAX 16 阶段项目05 17 Bootstrap ...

    LegendShop 技术介绍

    - **前端技术**:JSP/JSTL/taglib、Apache Tiles 3.0.5、AmazeUI、Displaytag等。 - **其他**:JDBC/Druid连接池、JavaScript/jQuery/JSON/XML、JavaMail、Log4j/SLF4j、Solr/Lucene全文检索等。 #### 十、功能模块...

    Pro Android Web Apps Develop for Android using HTML5, CSS3 & JavaScript 2011.pdf

    第十一章对比分析了几种流行的移动UI框架,如jQuery Mobile、Sencha Touch等,帮助开发者选择最适合项目的工具。 **11. 应用发布前的打磨与封装** 第十二章介绍了在发布Web应用之前需要注意的一些细节,包括性能...

    Struts2入门v3[1].0.pdf

    - **Action**:处理用户请求的核心类,负责业务逻辑处理及数据模型的构建。 - **视图**:如JSP或Freemarker模板,用于展示数据给用户。 - **模型**:通常是指JavaBean,用来封装业务数据和逻辑。 - **配置文件**...

    EXT 中文手册

    - **Ext2概述**:介绍了EXT的第二个版本的主要特点和新增功能。 - **组件模型**:详细讲解了EXT中组件的生命周期、状态管理等内容。 - **容器模型**:解释了容器如何管理和组织其内部的子组件。 - **布局**:介绍了...

Global site tag (gtag.js) - Google Analytics