=====================
頁面相關樣式及其腳本的引入先后順序,如下:
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,等等,先分析,再進行編碼