MVC + EasyUI + three-layer news website (six tabs completed), easyuitabs

MVC + EasyUI + three-layer news website (six tabs completed), easyuitabs

First, perform a simple layout for the Center.

<! -------------- Intermediate layout --------------> <div data-options = "region: 'center', title: 'center'"> <div class = "easyui-tabs" style = "width: 700px; height: 250px "fit =" true "id =" tt "> <div title =" welcome "> 

Then, the tabs click event is implemented in js.
In fact, the center is embedded with an iframe In the div, so the final returned result is an iframe
<Script type = "text/javascript"> $ (function () {// bindTabsEvent () ;}); function bindTabsEvent () {$ (". detail "). click (function () {// get the title var title = $ (this ). text (); // get the clicked url var url = $ (this ). attr ("url"); // determines whether the tag has var isExt =$ ("# tt "). tabs ("exists", title); // if yes, select if (isExt) {$ ("# tt "). tabs ("select", title); // select return;} // If the tag does not exist, add the tag $ ("# tt "). tabs ("add", {title: title, content: createTabContent (url), closable: true}) ;}) ;} function createTabContent (url) {return '<iframe src = "' + url + '" scrolling = "no" frameborder = "0" width = "100%" height = "100%"> </iframe>' ;} </script>
Note that the above detail is the value of the class selector in the navigation bar (the class must be the same here)

 
Code of the entire page
@ {Layout = null ;}<! DOCTYPE html>