查看: 1758|回复: 0

[.NET源码] MVC+EasyUI+三层新闻网站建立 tabs标签制作方法(六)

发表于 2018-1-1 08:00:00

MVC新闻网站建立,完成tabs标签的制作。

首先对 Center 进行一个简单的布局

  1. <!--------------中间布局开始---------------->
  2. <div data-options="region:'center',title:'Center'" >
  3. <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">
  4. <div title="欢迎使用">
  5. <h1 style="font-size: 24px;">欢迎!</h1>
  6. <h1 style="font-size: 24px; color:red;"> Welcome !</h1>
  7. </div>
  8. </div>
  9. </div>
  10. <!--------------中间布局结束--------------->
复制代码

然后就是在js里面完成tabs的点击事件实现了

其实center就是在div里面嵌入了一个iframe,所以最后返回的就是一个iframe

  1. <script type="text/javascript">
  2. $(function () {
  3. //tabs的点击事件
  4. bindTabsEvent();
  5. });
  6. function bindTabsEvent() {
  7. $(".detail").click(function () {
  8. //拿到点击标题
  9. var title = $(this).text();
  10. //拿到点击的url
  11. var url = $(this).attr("url");
  12. //判断标签是否存在
  13. var isExt = $("#tt").tabs("exists", title);
  14. //如果存在则选中
  15. if (isExt) {
  16. $("#tt").tabs("select", title); //选中
  17. return;
  18. }
  19. //不存在就添加标签
  20. $("#tt").tabs("add", {
  21. title: title,
  22. content: createTabContent(url),
  23. closable:true
  24. });
  25. });
  26. }
  27. function createTabContent(url) {
  28. return '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>';
  29. }
  30. </script>
复制代码

这里需要注意一点就是上面的detail是导航栏的类选择器的值(这里的class一定要一样)

整个页面代码

  1. @{
  2. Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta name="viewport" content="width=device-width" />
  8. <title>Index</title>
  9. <script src="~/Scripts/jquery-1.8.2.js"></script>
  10. <script src="~/Content/EasyUI/jquery.easyui.min.js"></script>
  11. <script src="~/Content/EasyUI/easyui-lang-zh_CN.js"></script>
  12. <link href="~/Content/EasyUI/themes/default/easyui.css" rel="external nofollow" rel="stylesheet" />
  13. <link href="~/Content/EasyUI/themes/icon.css" rel="external nofollow" rel="stylesheet" />
  14. <script type="text/javascript">
  15. $(function () {
  16. //tabs的点击事件
  17. bindTabsEvent();
  18. });
  19. function bindTabsEvent() {
  20. $(".detail").click(function () {
  21. //拿到点击标题
  22. var title = $(this).text();
  23. //拿到点击的url
  24. var url = $(this).attr("url");
  25. //判断标签是否存在
  26. var isExt = $("#tt").tabs("exists", title);
  27. //如果存在则选中
  28. if (isExt) {
  29. $("#tt").tabs("select", title); //选中
  30. return;
  31. }
  32. //不存在就添加标签
  33. $("#tt").tabs("add", {
  34. title: title,
  35. content: createTabContent(url),
  36. closable:true
  37. });
  38. });
  39. }
  40. function createTabContent(url) {
  41. return '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>';
  42. }
  43. </script>
  44. </head>
  45. <body class="easyui-layout">
  46. <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
  47. <!---------左侧布局------------------------------------>
  48. <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:0px;">
  49. <div class="easyui-accordion" style="width:auto;height:auto;">
  50. <div title="新闻管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
  51. <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="detail" url="/AdminNewInfo/Index">新闻管理</a>
  52. </div>
  53. <div title="评论管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
  54. <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="detail" url="/CommentInfo/Index">评论管理</a>
  55. </div>
  56. </div>
  57. </div>
  58. <!---------左侧布局结束------------------------------------>
  59. <div data-options="region:'south',border:false" style="height:30px;background:#A9FACD;padding:10px;">south region</div>
  60. <!--------------中间布局开始---------------->
  61. <div data-options="region:'center',title:'Center'" >
  62. <div class="easyui-tabs" style="width:700px;height:250px" fit="true" id="tt">
  63. <div title="欢迎使用">
  64. <h1 style="font-size: 24px;">欢迎!</h1>
  65. <h1 style="font-size: 24px; color:red;"> Welcome !</h1>
  66. </div>
  67. </div>
  68. </div>
  69. <!--------------中间布局结束--------------->
  70. </body>
  71. </html>
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报