怎樣使用Jquery Mobile建立表格

2019-12-12 23:43:58

Jquery Mobile是現在新興的製作web APP的框架，框架可以實現多種功能，近日小漁就使用其製作了一個簡單的table表格，表格可以根據螢幕大小進行自適應，很是巧妙，特來與大家一起分享。

首先，我們需要開啟電腦上的DreamWeaver軟體，新建一個htm5的頁面，然後我們需要設定頁面為螢幕自適應

接下來我們需要搭建Jquery Mobile的環境，先在官網下載Jquery Mobile的庫檔案，有很多版本，我下載的是1.4.5

然後我們在頁面中參照庫檔案，注意庫檔案的參照順序，需要參照的是min.css而不是普通的css檔案。jquery.js的參照要在jquery.mobile.min.js的參照之前

這些都準備妥當之後，我們就在body裡面新建一個div，將其data-role設定為page表示是一個頁面。

然後我們在div中插入一個main DIV,再在div中插入一個包含thead和tabody的table表格。

我們插入之後，可以先在瀏覽器中檢視一下內容，可以看到只是幾行字，一點樣式都沒有，這就需要我們為其新增Jquery Mobile中的樣式

我們為其新增data-role="table"和其他屬性，不用再另新增新的樣式，就可以使得表格更像一個表格

這樣，我們的表格就做好了。其可以隨著頁面的放大而改變自己的樣式，與螢幕相適應。