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,等等,先分析,再進行編碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM