首頁 > 網際網路

使用JQuery快速高效製作網頁

2019-12-12 02:56:49

要想使用JQuery快速高效的製作網頁,需要找到一套你熟悉或者適合你業務場景的JQuery控制元件,然後,在系統中使用它,就不用擔心頁面布局,省去了很多頁面樣式、js、瀏覽器相容性的事宜

1

bootstrap前端基於jquery的框架:找到bootstrap頁面,下載原始碼,可以全部引入,也可以按需引入部分檔案,bootstrap的整站風格大致如圖所示


2

jquery ui也是一套前端框架,大致的風格如圖所示


3

layui前端框架大致風格如圖所示


4

easyui前端框架大致風格如圖所示


5

以easyui框架為例,下載原始碼,找到easyui網頁的Demo,點選「資料表格 DataGrid」,下方就會出現一個表格樣子,同時有html頁面程式碼



6

建立一個html頁面,將easyui資料表格的html程式碼全部拷貝到新頁面中,按照原始碼將需要引入的css和js檔案放到html頁面同級目錄,再修改html頁面中的檔案參照路徑,儲存即可


7

開啟瀏覽器執行html頁面,就可以看到easyui呈現出來的表格樣子。因此,再選擇任何一個前端框架之後,只需要按照各自的規範,書寫dom結構與固定的class,就可以呈現出框架的樣子,從而達到快速開發網頁的效果



IT145.com E-mail:sddin#qq.com