如何使用easyUI創建選項卡
選項卡是指在一個窗口中可以顯示多個頁面,每個頁面有不同的內容,由這樣一個個頁面組成的就是選項卡。不僅jQuery代碼可以創建出選項卡工具,easyUI也可以,而且代碼更加簡單易懂,現在我們來使用easyUI代碼創建選項卡。
操作方法
(01)新建文檔雙擊桌面上的Dreamweaver圖標,打開軟件,然後在菜單欄中點擊【文件】--【新建】--【HTML】,新建一張HTML頁面。
(02)重命名新建的文檔系統會給出默認的名稱,但是為了見名知意,我們通常是自己命名,快捷鍵ctrl+s,會彈出一個保存窗口,文件名輸入tabs,保存類型為All Document類型,然後點擊保存按鈕即可。
(03)導入4個js文件首先要將【easyUI文件夾】複製粘貼到站點中,然後在easyUI文件夾中找到4個js文件拉到head頭部,如下四個文件:<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>
(04)選項卡代碼然後在body裏面編寫如下的選項卡代碼:<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div>
(05)啟動wampserver服務器然後雙擊桌面上的wampserver圖標,啟動wampserver服務器,當圖標變成綠色説明啟動完成。
(06)預覽效果點擊Dreamweaver的地球圖標,選擇【在360se瀏覽】即可以在360瀏覽器中預覽效果。
(07)在瀏覽器中的效果如下圖所示,要記得刪除代碼中的display:none,否則選項卡將不能切換。
(08)代碼解析(1)class="easyui-tabs"説明是tabs選項卡,class是類;(2)style="width:500px;height:250px;"選項卡的高度和寬度,可以調節與刪除;(3)data-options="closable:true"説明選項卡是可關閉的;(3)iconCls:'icon-reload'選項卡的頭部圖標;
特別提示
如果是咋手冊中複製的代碼,要記得刪掉display:none代碼,否則將無法實現選項卡的切換功能。
-
獨角獸真的存在嗎?獨角獸的十大來歷和傳説
導語:有沒有想過獨角獸是真的?這隻強大的野獸只是個神話嗎?古往今來,有很多人在問世界上真的有獨角獸嗎?獨角獸有什麼特殊含義?之前小編為大家講解過世上有龍的十大證據,接下來呢就為大家揭祕獨角獸的十大來歷和傳説,感興趣的不妨一起往下看!獨角獸的十大來歷和傳...
-
電腦沒有聲音怎麼調出來
(01)電腦沒有聲音可能是因為多種原因,例如音量設置為靜音、音頻設備未連接、驅動程序問題等。下面是一些可能的解決方案:1.檢查音量設置:在任務欄右側找到音量圖標,單擊並將鼠標指針懸停在音量調節器上。(02)然後嘗試調整音量,看看是否有聲音輸出。2.檢查音頻設備:確保耳...
-
一個比特幣值多少人民幣?2019突破55285元(最高137177元)
導語:比特幣是一種加密的虛擬數字貨幣,在2017年12月17日曾達到歷史最高價19850美元,但是在2017年9月4日,央行表示禁止虛擬貨幣的交易,並且比特幣在中國是沒有法律上的貨幣地位,不過據國外報價表明,在2019年5月14日,比特幣的價格已經再創新高,突破了8000美元,也就是人民幣...
-
酒能寄快遞嗎
(01)酒在寄快遞方面需要考慮以下因素:1.國家法律法規:不同國家對於寄送酒類的規定存在差異,一些國家可能允許寄送酒類,但也有些國家可能禁止或限制寄送酒類。(02)在寄送酒類之前,需要先了解目的地國家的法律法規和郵寄政策。2.郵寄公司政策:郵寄公司通常有自己的規定和限...