登录  /  注册
首页 > web前端 > js教程 > 正文
使用jQuery UI库开发Web界面的简单入门指引_jquery
php中文网
发布: 2016-05-16 15:04:17
原创
872人浏览过

一.jQuery UI
jQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库。包
含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很
好交互性的web 应用程序。
jQuery UI 的官网网站为:http://jqueryui.com/
jquery-ui-x.xx.x.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 不同组件的引入都有类似的特点和语法,所以这里只介绍两种组件
的引入方式,这样可以以此类推其他组件的引入方式。
button 按钮

//将button 按钮设置成UI 
$('#button').button(); 
登录后复制

dialog 对话框

//将div 设置成dialog 对话框 
$('#dialog ').click(function () { 
 
  $("#dialog ").dialog(); 
 
}); 
登录后复制

这样的形式,可以得知,jQuery UI的引入都是这样的 组件名() 方法的形式引入。

相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学