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

jQuery,知问前端--概述及 jQuery UI

学习要点:

  1.项目介绍

  2.jQuery UI

  3.UI 主题

一.项目介绍

我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能。而“百度 知道”作为辅助功能来确定我们这个项目需要的前端功能。 从以上知名问答站点中,我们可以确认最主要的前端功能: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(jQuery UI 的文档文件)、themes(CSS 主题文件)和 ui(jQuery ui 的 JavaScript 文件)。 4.Index.html,可以查看 jQuery UI 功能的索引页。

三.CSS 主题

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

主讲:jquery-ui-1.10.3.custom

使用jquery-ui时

首先引入jquery

在引入jquery-ui

然后引入jquery-ui的css文件,也就是主题

时间: 2024-10-20 00:09:02

第一百七十七节,jQuery,知问前端--概述及 jQuery UI的相关文章

知问前端——概述及jQuery UI

知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里我们重点参考“知乎”,来学习一下它采用的前端效果. 项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能.而“百度知道”作为辅助功能来确定我们这个项目需要的前端功能. 从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框:2.前端按钮:3.折叠菜单:4.选项卡切

知问前端——自动补全UI

自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host }); 修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式,我们通过Firebug想获取到

第一百七十九节,jQuery-UI,知问前端--按钮 UI

jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) 5.单选.复选按钮 按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单 可以设置按钮或文本,还可以设置单选按钮和多选按钮. 一.使用 button 按钮 使用 button 按钮 UI 的时候,不一定必须是 input 按钮形式,普通的文本也可以设置成 button

第一百七十八节,jQuery-UI,知问前端--对话框 UI

jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中使用 on() dialog()方法,将指定区块实现对话框功能 一.开启多个 dialog 我们可以同时打开多个 dialog,只要设置不同的 id 即可实现. $('#reg').dialog(); $('#login').dialog(); 二.修改 dialog 样式 在弹出的 dialog

第三百七十节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页

第三百七十节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)用Django实现搜索结果分页 逻辑处理函数 计算搜索耗时 在开始搜索前:start_time = datetime.now()获取当前时间 在搜索结束后:end_time = datetime.now()获取当前时间 last_time = (end_time-start_time).total_seconds()结束时间减去开始时间等于用时,转换成秒 from django.shortcu

第三百七十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现我的搜索以及热门搜索

第三百七十一节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)用Django实现我的搜索以及热门 我的搜素简单实现原理我们可以用js来实现,首先用js获取到输入的搜索词设置一个数组里存放搜素词,判断搜索词在数组里是否存在如果存在删除原来的词,重新将新词放在数组最前面如果不存在直接将新词放在数组最前面即可,然后循环数组显示结果即可 热门搜索实现原理,当用户搜索一个词时,可以保存到数据库,然后记录搜索次数,利用redis缓存搜索次数最到的词,过一段时间更新

第三百三十七节,web爬虫讲解2—PhantomJS虚拟浏览器+

第三百三十七节,web爬虫讲解2-PhantomJS虚拟浏览器+selenium模块操作PhantomJS PhantomJS虚拟浏览器 phantomjs 是一个基于js的webkit内核无头浏览器 也就是没有显示界面的浏览器,利用这个软件,可以获取到网址js加载的任何信息,也就是可以获取浏览器异步加载的信息 下载网址:http://phantomjs.org/download.html  下载对应系统版本 下载后解压PhantomJS文件,将解压文件夹,剪切到python安装文件夹 然后将P

第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示

第三百八十七节,Django+Xadmin打造上线标准的在线教育平台-网站上传资源的配置与显示 首先了解一下static静态文件与上传资源的区别,static静态文件里面一般防止的我们网站样式的文件,包括ccs,js,网站样式图片 上传资源是用户操作上传的图片等资源 上传资源的配置 1,首先在项目里创建一个名称叫media的文件夹专门保存用户上传 2,settings.py文件配置上传资源的路径 # 上传资源路径,如果图片,上传文件等 MEDIA_URL = '/media/' # 设置上传资源

第三百九十七节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,主题本地化设置

第三百九十七节,Django+Xadmin打造上线标准的在线教育平台-其他插件使用说,主题本地化设置 主题设置是在xadmin\plugins\themes.py这个文件 默认xadmin是通过下面这个json文件来动态加载的.所以我们可以到它加载的json文件里下载好主题 themes.py修改方式 #coding:utf-8 from __future__ import print_function import httplib2 from django.template import lo