zoukankan      html  css  js  c++  java
  • 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,等等,先分析,再进行编码

  • 相关阅读:
    axios的兼容性
    js中的特殊符号含义
    div垂直居中
    HTTP协议(一):介绍
    HTTP协议(二)header标头说明
    AJAX 状态值(readyState)与状态码(status)详解
    Javascript替代eval方法
    vue基础知识之vue-resource/axios
    ES6的export与Nodejs的module.exports
    PM2来部署nodejs服务器永久开启
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11167899.html
Copyright © 2011-2022 走看看