=====================

页面相关样式及其脚本的引入先后顺序,如下:

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组件化开发的更多相关文章

  1. 学习 | jQuery移动端页面组件化开发(一)

    最近在学习移动端组件化开发web页面,其中有好多小细节,值的去思考. 主要介绍JS的思路,具体的代码就不贴了,主要是想表达出一种思路 总体来说 1.入口文件,在入口文件中导入插件,插件样式,jquer ...

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  4. Atitit.web ui  组件化 vs  mvc

    Atitit.web ui  组件化 vs  mvc   组件化  与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...

  5. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  6. 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  7. vue(9)—— 组件化开发 - webpack(3)

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  8. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  9. 从徐飞的文章《Web应用的组件化开发(一)中窥视web应用开发的历史

    Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...

  10. UI组件化介绍

    组件化相关概念 怎么理解组件化开发 https://www.cnblogs.com/zs-note/p/7093323.html 前端组件化框架之路 https://blog.csdn.net/hap ...

随机推荐

  1. 【坑】解决maven管理SSM中mybatis的mapper文件扫描失败的问题

    文章目录 前言 改进方式来替换原始的使用方式 后记 好久没有写博客了,11月底来到公司实习,上个月写个小demo,趁此回顾下SSM,今天将最近的积累记录下: 前言 在学习 mybatis 的时候,都知 ...

  2. 版本管理——Git和SVN的介绍及其优缺点

    版本管理 概念:版本管理是软件配置管理的基础,它管理并保护开发者的软件资源.   好处:可以保留我们的历史版本,在代码开发到一半的时候,不至于无故丢失,还可以查看BUG的来龙去脉.   版本管理种类: ...

  3. set object is not JSON serializable 解决方式

    python return json的时候报错: set object is not JSON serializable 解决方式,增加一个将set转为list的函数: def set_default ...

  4. C#基础算法题 找出最大值和最小值

    找出最大值和最小值 题目要求 输入n个数,n<=100,找到其中最小的数和最大的数 实现代码 using System; namespace _1.求最大最小 { class Program { ...

  5. Python复习笔记02

    语句表达式: 在Python中支持遍历循环的对象:可迭代器对象,支持迭代协议的对象 比如列表list没有迭代功能只是可迭代对象 迭代:迭代协议 --> 例:f.__next__() 属于f的迭代 ...

  6. 少儿编程 | 01.Scratch 3.0简介

    欢迎参加这套Scratch3.0少儿编程课程的学习.本系列课程将通过视频和图文的方式进行(视频制作中,后续会发布).如果喜欢本系列课程,欢迎点击订阅关注或者转发. 这是本系列课程的第一课,主要是给家长 ...

  7. react-router 5.0 的鉴权

    react-router 5.0 的鉴权 当我们使用react-router 控制页面的路由时候,有些页面,是需要登录才能访问,有些不需要登录就可以访问,还有些页面,是根据用户的权限来限制访问的. 如 ...

  8. MySQL 子查询(二)

    接上篇文章,从这节起:MySQL 5.7 13.2.10.5 Row Subqueries 五.行子查询(ROW Subqueries) 标量子查询返回单个值,列子查询返回一个列的多个值.而行子查询是 ...

  9. (五)Struts之Action类基础(二)

    上一章节末((三)Struts之Action类基础(一))介绍了如何获取用户输入数据的获取.接着就是在Struts中怎么把数据响应给用户端,这就必须要求我们把数据放到作用域中,然后才能显示到用户浏览器 ...

  10. (一)Centos之VMware虚拟机安装

    一.下载 64位的VM12 安装包: http://pan.baidu.com/s/1bpzoXQZ 二.安装 点击下一步: 老规矩,打勾,下一步: 这里我们新建一个文件夹 VM12 最好放在D盘或者 ...