• 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,等等,先分析,再进行编码

  • 相关阅读:
    第二周之Hadoop学习(二)
    Java课程----自我介绍
    关于最大子序和的算法问题
    记账本----完结
    《人月神话》读后感----四
    记账本----四
    记账本----四
    《人月神话》读后感------三
    记账本------三
    家庭记账本----二
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11167899.html
Copyright © 2020-2023  润新知