JQuery-UI组件化开发



=====================
页面相关样式及其脚本的引入先后顺序,如下:
1,layout.css 页面的静态基本框架布局样式
2,base.css 页面的静态细节样式
3,ui.css 动态页面交互部分
4,引入jQuery.js文件
5,引入 ui.js 业务逻辑
6,另外还可以把一些 script 可以放在 body标签的末尾。
进行UI组件开发的前提:
1,引入 jQuery.js
2,创建一个 ui.js
3,创建一个 ui.css
UI组件开发分析:
一,界面分析,组件名:.ui-search
二,界面由几个部分组成:
1,下拉框 .ui-search-selected
2,下拉列表 .ui-search-select-list
3,输入框 .ui-search-input
4,搜索按钮 .ui-search-submit
三,行为:
1,当下拉列表某项被选中时,下拉框显示指定项,且下拉列表消失。
2,当点击/悬浮下拉框时,显示下拉列表,点击/移开下拉框时,下拉列表消失
3,等等其他行为...

轮播图片:

界面:
1,组件叫:.ui-slider
2,左右按钮:.ui-slider-arrow-left .ui-slider-arrow-right
3,底下圆点按钮:.ui-slider-process
行为:
1,点击左右按钮,切换上下张图片
2,点击底边按钮,切换到相应图片
3,自动轮播
4,无缝切换
5,鼠标悬停停止轮播,鼠标移开开始正常轮播
6,切换任何一张图片,对应的底边按钮高亮
7,等等,先分析,再进行编码
JQuery-UI组件化开发的更多相关文章
- 学习 | jQuery移动端页面组件化开发(一)
最近在学习移动端组件化开发web页面,其中有好多小细节,值的去思考. 主要介绍JS的思路,具体的代码就不贴了,主要是想表达出一种思路 总体来说 1.入口文件,在入口文件中导入插件,插件样式,jquer ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- Atitit.web ui 组件化 vs mvc
Atitit.web ui 组件化 vs mvc 组件化 与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战
一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...
- vue(9)—— 组件化开发 - webpack(3)
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- 从徐飞的文章《Web应用的组件化开发(一)中窥视web应用开发的历史
Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...
- UI组件化介绍
组件化相关概念 怎么理解组件化开发 https://www.cnblogs.com/zs-note/p/7093323.html 前端组件化框架之路 https://blog.csdn.net/hap ...
随机推荐
- 关于npm install 报错 EAI_AGAIN reason: getaddrinfo EAI_AGAIN registry.npmjs.org
在公司里使用了isa连接外网,刚开始使用npm 安装依赖的时候一直报错EAI_AGAIN reason: getaddrinfo EAI_AGAIN registry.npmjs.org,我们的老大给 ...
- Spring Bean装配详解(五)
装配 Bean 的概述 前面已经介绍了 Spring IoC 的理念和设计,这一篇文章将介绍的是如何将自己开发的 Bean 装配到 Spring IoC 容器中. 大部分场景下,我们都会使用 Appl ...
- java访问磁盘文件
转载,务必写上原文链接 !(尊重与你分享知识的人) 目录 文件 File 对象 VS FileDescriptor 对象 文件讲解java访问磁盘文件过程 fileReader.read() 图解ja ...
- (十三)Activitivi5之流程控制网关:并行
一.概念 所谓排他网关 顾名思义 执行到该网关,会有多条线路同时并行执行,当都执行完才继续执行后面的: 二. 案例 此时当“学生请假”任务节点完成之后,如下图此时有两个任务,必须等到两个任务都完成才会 ...
- 转------深入理解--Java按值传递和按引用传递
引言 最近刷牛客网上的题目时碰到不少有关Java按值传递和按引用传递的问题,这种题目就是坑呀,在做错了n次之后,查找了多方资料进行总结既可以让自己在总结中得到提高,又可以让其他人少走弯路.何乐而不为? ...
- maven项目打包和编译跳过单元测试和javadoc
代码中可能由于单元测试.注释(方法中的参数)或者maven javadoc插件的问题导致无法打包,影响工作,为避免这两种情况可以在打包时输入命令: mvn clean install -Dmaven. ...
- charles 的安装和手机配置 (我用的win7系统 ,和 iphone8 的配置)
2018/12/17 由于想抓一下某个手机上app的数据,然后就装了charles,纯记录一下,便于以后不用再查资料.个人参考的网址:https://blog.csdn.net/weixin_4233 ...
- fastclick插件中存在的bug
1.在vue项目中安装fastclick插件 npm install --save fastclick 2.在main.js中引入并绑定到body import FastClick from 'fas ...
- vue 钩子函数的初接触
vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...
- Java 面向对象(三)static 关键字
一.static 1.概述 static 的意思的静态的,也是一种修饰符. 关于 static 关键字的使用,它可以用来修饰的成员变量和成员方法,被修饰的成员是属于类的,而不是单单属于某个对象的. 用 ...