當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

easyui首页模板

發布時間：2023/12/9 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 easyui首页模板小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Easyui首頁html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><meta name="renderer" content="webkit"></meta><title>管理員操作平臺</title><link href="/js/themes/default/easyui.css" rel="stylesheet" type="text/css"><link href="/js/themes/icon.css" rel="stylesheet" type="text/css"><script src="/js/jquery.min.js" type="text/javascript"></script> <script src="/js/jquery.easyui.min.js" type="text/javascript"></script><script src="/js/easyui-lang-zh_CN.js" type="text/javascript"></script> </head> <body style="margin:0px;"> <div class="easyui-layout" data-options="fit:true"><div data-options="region:'north'" style="height:60px;"><div class="top"><div class="top_left"><img src="/images/logo.jpg"/></div><div class="top_right"><p>歡迎您：admin <a href="http://localhost/user/logout.htm">退出</a></p></div></div> </div><div data-options="region:'west',split:'true',title:'導航'" style="width:220px"><div class="easyui-accordion" data-options="fit:true,border:false"><div title="系統管理"><a href="javascript:run('/user/view.htm', '用戶管理')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-blank'" style="width:100%;text-align:left;">用戶管理</a></div></div></div><div data-options="region:'center'" style="width:100%;height:100px;"><div id="tabs" class="easyui-tabs" data-options="fit:true,border:false"></div></div><div class="easyui-panel" title="管理平臺歡迎您" data-options="region:'south',collapsible:false"></div> </div><script type="text/javascript"> function run(url, title) {if (url.substring(0, 4) != 'http') {url = 'http://localhost/' + url;}if ($("#tb").tabs("getTab", title)) {$("#tb").tabs("select", title);} else {if (url.substring(0, 4) != 'http') {//第一種打開頁面方式$('#tb').tabs('add', {title: title,href: url,closable: true});}else{//第二種打開頁面方式$("#tb").tabs('add',{title:title,content:"<iframe id='" + title + "' frameborder=0 style='width:100%;height:100%'></iframe>",closable:true});$("#" + title)[0].src = url;}} } </script> </body> </html>

easyui中首頁一般是layout，一個layout可以劃分成多個塊，上北下南左西右東還有中。上方一般用來放logo，用戶名，退出登錄等信息，下方一般用來放公司信息，左邊是導航欄，剩下的中間是不同的標簽頁，用來模擬多窗口模式。
導航欄用的是easyui中的accordion，api中并沒有提到他，但他是最適合用來做導航欄的。點擊可以收縮擴展，效果不錯。 js中run方法的意思是在中間的標簽頁中打開對應的頁面。
run方法之所以用兩種是因為打開的效果不同，第一種打開是在dom里面加了一個div，里面的css引用不會生效，里面的元素和整個窗體公用一個dom；第二種方法打開是在里面加了一個iframe，和大窗體是子父窗體的概念，子窗體不會污染父窗體。建議使用第二中，否則你會被越來越多的元素id重名而煩惱。

總結

以上是生活随笔為你收集整理的easyui首页模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。