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

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

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. 如何用IDEA创建springboot(maven)并且整合mybatis连接mysql数据库和遇到的问题

    一.New->Project 二.点击next 三.在Group栏输入组织名,Artifact就是项目名.选择需要的java版本,点击next 四.添加需要的依赖 在这里我们也可以添加sql方面 ...

  2. JSON文件转为Excel

    前言 今天在帮老师做年终党统的时候,发现管理平台上没有将正在发展的同志的信息导出功能,只能一个一个点击进去查看,操作起来步骤很多很麻烦,所以我就想到了"扒"一下这个网页,扒下来发现 ...

  3. 在VMware Workstation10下CentOS7虚拟机中创建与主机共享文件夹的详细步骤

    一.前言 在使用虚拟机时,常常需要与宿主计算机(以下简称为主机)操作系统交换文件,为此需要在虚拟机与主机之间建立共享文件夹. 二. 安装VMTools 要使用共享文件机制,必须首先安装VMTools. ...

  4. 浅析ARM协处理器CP15寄存器有关指令:MCR\MRC

    ref:http://blog.csdn.net/gameit/article/details/13169405 背景: 在uboot中,start.s中涉及到了 CP15 的有关操作.查阅有关资料, ...

  5. substr函数索引创建测试

    技术群里小伙伴,沟通说一条经常查询的SQL缓慢,单表SQL一个列作为条件,列是int数值类型,索引类型默认创建. 一.SQL文本substr函数索引创建测试 ,) nm1 ')需求,将上述SQL执行速 ...

  6. 分布式服务追踪与调用链 Zikpin

    分布式服务追踪与调用链系统产生的背景 在为服务中,如果服务与服务之间的依赖关系非常复杂,如果某个服务出现了一些问题,很难追查到原因,特别是服务与服务之间调用的时候. 在微服务系统中,随着业务的发展,系 ...

  7. C# 对象互转

    /// <summary> /// 适用于初始化新实体 /// </summary> static public T RotationMapping<T, S>(S ...

  8. (六)在线文档编辑器的使用和数据字典(ueditor编辑器/my97datepicker日期控件)

    使用ueditor编辑器注意: 1. 要把ueditor的jar包添加到WEB-INF/lib里. 2. 在做图片上传等功能时,必须重写struts的过滤器,否则图片流会被拦截程序无法得到图片. 3. ...

  9. Java链表设计

    链表 1,链表的实现 在实际开发之中对象数组是一项非常实用的技术,并且利用其可以描述出“多”方的概念,例如:一个人有多本书,则在人的类里面一定要提供有一个对象数组保存书的信息,但是传统的对象数组依赖于 ...

  10. vue 集成 vis-network 实现网络拓扑图

    vis.js  网站 https://visjs.org/ vs  code 下安装命令 npm install vis-network 在vue  下引入 vis-network组件 const v ...