initProject

EProject/FineUIPro.Web/res/js/common.js

@@ -0,0 +1,18 @@
+
+
+
+// 显示居中通知对话框
+function showCenterNotify(message, messageIcon) {
+    F.notify({
+        message: message,
+        messageIcon: messageIcon || '',
+        modal: true,
+        hideOnMaskClick: true,
+        header: false,
+        displayMilliseconds: 3000,
+        positionX: 'center',
+        positionY: 'center',
+        messageAlign: 'center',
+        minWidth: 200
+    });
+}

EProject/FineUIPro.Web/res/js/dashboard_chart.js

@@ -0,0 +1,315 @@
+
+function emptyContentColor() {
+    return $('#emptycontent').css('color');
+}
+function randomColors() {
+    var colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
+    var randomIndex = Math.random() * colors.length;
+    return $.merge(colors.slice(randomIndex), colors.slice(0, randomIndex));
+}
+function initChart1() {
+    var chart = echarts.init($('.mycard .chart1')[0]);
+    var option = {
+        color: randomColors(),
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            left: 0,
+            right: 0
+        },
+        xAxis: {
+            show: false,
+            type: 'category',
+            data: ['02/01', '02/02', '02/03', '02/04', '02/05', '02/06', '02/07', '02/08', '02/09', '02/10', '02/11', '02/12']
+        },
+        yAxis: {
+            show: false,
+            type: 'value',
+            max: function (value) {
+                return value.max + 100;
+            }
+        },
+        series: [{
+            name: 'Page View',
+            type: 'bar',
+            data: [800, 1000, 600, 1200, 600, 500, 800, 500, 1500, 1000, 900, 600]
+        }]
+    };
+    chart.setOption(option);
+    return chart;
+}
+function initChart2() {
+    var chart = echarts.init($('.mycard .chart2')[0]);
+    var option = {
+        color: randomColors(),
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            left: 0,
+            right: 0
+        },
+        xAxis: {
+            show: false,
+            type: 'category',
+            data: ['02/01', '02/02', '02/03', '02/04', '02/05', '02/06', '02/07', '02/08', '02/09', '02/10', '02/11', '02/12']
+        },
+        yAxis: {
+            show: false,
+            type: 'value',
+            max: function (value) {
+                return value.max + 200;
+            }
+        },
+        series: [{
+            name: 'Dedicated IP',
+            type: 'line',
+            smooth: true,
+            areaStyle: {},
+            data: [800, 1000, 600, 1200, 600, 500, 800, 500, 1500, 1000, 900, 600]
+        }]
+    };
+    chart.setOption(option);
+    return chart;
+}
+
+function initChart3() {
+    var chart = echarts.init($('.mycard .chart3')[0]);
+    var option = {
+        color: randomColors(),
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            left: 0,
+            right: 0
+        },
+        xAxis: {
+            show: false,
+            type: 'category',
+            data: ['02/01', '02/02', '02/03', '02/04', '02/05', '02/06', '02/07', '02/08', '02/09', '02/10', '02/11', '02/12']
+        },
+        yAxis: {
+            show: false,
+            type: 'value',
+            max: function (value) {
+                return value.max + 200;
+            }
+        },
+        series: [{
+            name: 'User Amount',
+            type: 'bar',
+            data: [400, 500, 300, 900, 300, 600, 600, 300, 800, 1200, 200, 300]
+        }, {
+            name: 'Page View',
+            type: 'line',
+            smooth: true,
+            data: [800, 1000, 600, 1200, 600, 500, 800, 500, 1500, 1000, 900, 600]
+        }]
+    };
+    chart.setOption(option);
+    return chart;
+}
+
+function initTabStripChart1() {
+    var chart = echarts.init($('.tabstrip-chart.chart1')[0]);
+    var contentColor = emptyContentColor();
+    var option = {
+        title: {
+            text: 'Week Page View',
+            padding: [20, 20, 0, 20],
+            textStyle: {
+                fontSize: 12,
+                fontWeight: 'normal',
+                color: contentColor
+            }
+        },
+        color: randomColors(),
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+                lineStyle: {
+                    color: contentColor
+                }
+            },
+            data: ['02/01', '02/02', '02/03', '02/04', '02/05', '02/06', '02/07', '02/08', '02/09', '02/10', '02/11', '02/12']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: contentColor
+                }
+            }
+        },
+        series: [{
+            name: 'Page View',
+            type: 'line',
+            smooth: true,
+            areaStyle: {},
+            data: [800, 1000, 600, 1200, 600, 500, 800, 500, 1500, 1000, 900, 600]
+        }]
+    };
+    chart.setOption(option);
+    return chart;
+}
+
+function initTabStripChart2() {
+    var chart = echarts.init($('.tabstrip-chart.chart2')[0]);
+    var contentColor = emptyContentColor();
+    var option = {
+        title: {
+            text: 'Week User Amount',
+            padding: [20, 20, 0, 20],
+            textStyle: {
+                fontSize: 12,
+                fontWeight: 'normal',
+                color: contentColor
+            }
+        },
+        color: randomColors(),
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                lineStyle: {
+                    color: contentColor
+                }
+            },
+            data: ['02/01', '02/02', '02/03', '02/04', '02/05', '02/06', '02/07', '02/08', '02/09', '02/10', '02/11', '02/12']
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: contentColor
+                }
+            }
+        },
+        series: [{
+            name: 'User Amount',
+            type: 'bar',
+            data: [400, 500, 300, 900, 300, 600, 600, 300, 800, 1200, 200, 300]
+        }, {
+            name: 'Page View',
+            type: 'line',
+            smooth: true,
+            data: [800, 1000, 600, 1200, 600, 500, 800, 500, 1500, 1000, 900, 600]
+        }]
+    };
+    chart.setOption(option);
+    return chart;
+}
+
+
+function initChartPie() {
+    var chart = echarts.init($('.mychart-pie')[0]);
+    var contentColor = emptyContentColor();
+    var option = {
+        color: randomColors(),
+        title: {
+            text: '用户访问来源',
+            subtext: '这是说明文字',
+            x: 'center',
+            textStyle: {
+                color: contentColor
+            }
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            textStyle: {
+                color: contentColor
+            },
+            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+        },
+        series: [{
+            name: '访问来源',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [
+                { value: 335, name: '直接访问' },
+                { value: 310, name: '邮件营销' },
+                { value: 234, name: '联盟广告' },
+                { value: 135, name: '视频广告' },
+                { value: 1548, name: '搜索引擎' }
+            ],
+            itemStyle: {
+                emphasis: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }]
+    };
+    chart.setOption(option);
+    return chart;
+}
+
+F.ready(function () {
+
+    if (F._base) {
+        return;
+    }
+
+    var chart1 = initChart1();
+    var chart2 = initChart2();
+    var chart3 = initChart3();
+    var tabstripChart1 = initTabStripChart1();
+    var tabstripChart2 = initTabStripChart2();
+    var chartPiew = initChartPie();
+
+
+    F.windowResize(function () {
+        chart1.resize();
+        chart2.resize();
+        chart3.resize();
+        tabstripChart1.resize();
+        tabstripChart2.resize();
+        chartPiew.resize();
+    });
+
+
+    var mytabstrip = $('.mytabstrip');
+    if (mytabstrip.length) {
+        F(mytabstrip).on('tabchange', function (event, tab) {
+            var chartDom = tab.el.find('.tabstrip-chart')[0];
+            var chartInstance = echarts.getInstanceByDom(chartDom);
+
+            // 如果图表宽度为零，说明是在隐藏状态下初始化的，需要重置大小
+            if (!chartInstance.getWidth()) {
+                chartInstance.resize();
+            }
+        });
+    }
+
+
+});

EProject/FineUIPro.Web/res/js/grid.js

@@ -0,0 +1,91 @@
+
+// 文本 - 性别
+function renderGender(value, params) {
+    return value == 1 ? '男' : '女';
+}
+
+// 超链接标签 - 所学专业
+function renderMajor(value, params) {
+    var url = 'http://gsa.ustc.edu.cn/search?q=' + F.urlEncode(value);
+    return F.formatString('<a href="{0}" data-qtip="{1}" target="_blank">{1}</a>', url, F.htmlEncode(value));
+}
+
+// 图片标签 - 分组
+function renderGroup(value, params) {
+    var imageUrl = F.baseUrl + 'res/images/16/' + value + '.png';
+    return F.formatString('<img class="f-grid-imagefield" src="{0}"/>', imageUrl);
+}
+
+// HTML - 行扩展列
+function renderExpander(value, params) {
+    return '<div class="expander">' +
+        '<p><strong>姓名：</strong>' + params.rowData.values.Name + '</p>' +
+        '<p><strong>简介：</strong>' + value + '</p>' +
+        '</div>';
+}
+
+// 公共方法 - 显示通知框
+function showNotify(content) {
+    // 消息正文可能会比较长，所以不显示前面的图标（messageIcon: ''）
+    F.notify({
+        message: content,
+        target: '_top',
+        header: false,
+        messageIcon: '',
+        positionX: 'center',
+        positionY: 'top'
+    });
+}
+
+// 公共方法 - 通过消息框展示表格选中的行
+function notifySelectedRows(gridId) {
+    var grid = F(gridId);
+
+    if (!grid.hasSelection()) {
+        F.alert('没有选中项！');
+        return;
+    }
+
+    var genderColumn = grid.getColumn('Gender');
+    var majorColumn = grid.getColumn('Major');
+
+    var result = ['<table class="result">'];
+    result.push('<tr>');
+    if (grid.idField) {
+        result.push('<th>ID</th>');
+    }
+    if (grid.textField) {
+        result.push('<th>Text</th>');
+    }
+    if (genderColumn) {
+        result.push('<th>性别</th>');
+    }
+    if (majorColumn) {
+        result.push('<th>专业</th>');
+    }
+
+    result.push('</tr>');
+
+    $.each(grid.getSelectedRows(true), function (index, row) {
+        result.push('<tr>');
+        if (grid.idField) {
+            result.push('<td>' + row.id + '</td>');
+        }
+        if (grid.textField) {
+            result.push('<td>' + row.text + '</td>');
+        }
+        if (genderColumn) {
+            result.push('<td>' + (row.values['Gender'] == 1 ? '男' : '女') + '</td>');
+        }
+        if (majorColumn) {
+            result.push('<td>' + row.values['Major'] + '</td>');
+        }
+
+        result.push('</tr>');
+    });
+
+    result.push('</table>');
+
+    showNotify(result.join(''));
+}
+

EProject/FineUIPro.Web/res/js/index.js

@@ -0,0 +1,597 @@
+
+// plaintree - 树菜单
+// tree - 智能树菜单
+var _menuStyle = F.cookie('MenuStyle') || 'tree';
+// 主选项卡标签页
+var _mainTabs = F.cookie('MainTabs') || 'multi';
+
+var SIDEBAR_WIDTH_CONSTANT = 260;
+// _sidebarWidth变量会随着用户拖动分隔条而改变
+var _sidebarWidth = SIDEBAR_WIDTH_CONSTANT;
+
+
+
+function isSmallWindowWidth() {
+    var windowWidth = $(window).width();
+    return windowWidth < 992;
+}
+
+function checkMobileView() {
+    var bodyEl = $('body');
+    var isMobileView = bodyEl.hasClass('mobileview');
+    var needLayout = false;
+
+    // 如果窗体宽度小于992px，则启用移动视图
+    if (isSmallWindowWidth()) {
+        if (!isMobileView) {
+            bodyEl.addClass('mobileview');
+            F.viewPortExtraWidth = SIDEBAR_WIDTH_CONSTANT;
+            needLayout = true;
+        }
+    } else {
+        if (isMobileView) {
+            bodyEl.removeClass('mobileview');
+            F.viewPortExtraWidth = 0;
+            needLayout = true;
+        }
+    }
+
+    if (needLayout) {
+        if (!isMobileView) {
+            // 更新为移动视图之前，要先展开左侧面板
+            _sidebarWidth = SIDEBAR_WIDTH_CONSTANT;
+            if (getFoldButtonStatus()) {
+                // 如果当前处于折叠状态
+                toggleSidebar(false);
+            } else {
+                // 如果当前处于展开状态，将左侧面板的宽度还原为初始值
+                F(PARAMS.sidebarRegion).setWidth(_sidebarWidth);
+            }
+            setFoldButtonStatus(true);
+        } else {
+            // 更新为正常视图之前，要先隐藏侧边栏和遮罩层
+            hideSidebarAndMask();
+            setFoldButtonStatus(false);
+        }
+
+        F(PARAMS.mainPanel).doLayout();
+    }
+
+    // 第一次检查时不启用动画
+    if (!bodyEl.hasClass('mobileview-transition')) {
+        bodyEl.addClass('mobileview-transition');
+    }
+    
+}
+
+// 移动视图 - 隐藏侧边栏和遮罩层
+function hideSidebarAndMask() {
+    $('.mainpanel').removeClass('showsidebar');
+    $('.bodyregion .showsidebar-mask').hide();
+    setFoldButtonStatus(true);
+}
+
+// 移动视图 - 显示侧边栏和遮罩层
+function showSidebarAndMask() {
+    $('.mainpanel').addClass('showsidebar');
+    $('.bodyregion .showsidebar-mask').show();
+    setFoldButtonStatus(false);
+}
+
+// 点击折叠/展开按钮
+function onFoldClick(event) {
+    // 基础版不支持移动视图
+    if (!F._base && isSmallWindowWidth()) {
+        var sidebarregionEl = $('.sidebarregion');
+        var bodyregionEl = $('.bodyregion');
+
+        // 创建遮罩层
+        var maskEl = bodyregionEl.find('.showsidebar-mask');
+        if (!maskEl.length) {
+            maskEl = $('<div class="showsidebar-mask"></div>').appendTo(bodyregionEl.find('>.f-panel-bodyct'));
+            maskEl.on('click', function () {
+                if (isSmallWindowWidth()) {
+                    hideSidebarAndMask();
+                }
+            });
+
+            sidebarregionEl.on('click', '.leftregion .f-tree-node-leaf', function () {
+                if (isSmallWindowWidth()) {
+                    hideSidebarAndMask();
+                }
+            });
+        }
+
+        if (getFoldButtonStatus()) {
+            showSidebarAndMask();
+        } else {
+            hideSidebarAndMask();
+        }
+
+    } else {
+        toggleSidebar();
+    }
+}
+
+// 设置折叠按钮的状态
+function setFoldButtonStatus(collapsed) {
+    var foldButton = F(PARAMS.btnCollapseSidebar);
+    if (collapsed) {
+        foldButton.setIconFont('f-iconfont-unfold');
+    } else {
+        foldButton.setIconFont('f-iconfont-fold');
+    }
+}
+
+// 获取折叠按钮的状态
+function getFoldButtonStatus() {
+    var foldButton = F(PARAMS.btnCollapseSidebar);
+    return foldButton.iconFont === 'f-iconfont-unfold';
+}
+
+
+// 基础版下载
+function onBaseDownloadClick() {
+    window.open('http://fineui.com/fans/', '_blank');
+}
+
+// 点击企业版试用
+function onApplyTrialClick(event) {
+    var windowApplyTrial = F(PARAMS.windowApplyTrial);
+    windowApplyTrial.show();
+    // 删除按钮的徽标
+    this.setBadge(false);
+}
+
+// 点击主题仓库
+function onThemeSelectClick(event) {
+    var windowThemeRoller = F(PARAMS.windowThemeRoller);
+    windowThemeRoller.show();
+}
+
+// 点击加载动画
+function onLoadingSelectClick(event) {
+    var windowLoadingSelector = F(PARAMS.windowLoadingSelector);
+    windowLoadingSelector.show();
+}
+
+// 设置长期存在的Cookie
+function setCookie(name, value) {
+    F.cookie(name, value, {
+        expires: 100  // 单位：天
+    });
+}
+
+
+
+// 展开侧边栏
+function expandSidebar() {
+    toggleSidebar(false);
+}
+
+// 折叠侧边栏
+function collapseSidebar() {
+    toggleSidebar(true);
+}
+
+// 折叠/展开侧边栏
+function toggleSidebar(collapsed) {
+    var sidebarRegion = F(PARAMS.sidebarRegion);
+    var treeMenu = F(PARAMS.treeMenu);
+    var logoEl = sidebarRegion.el.find('.logo');
+
+    var currentCollapsed = getFoldButtonStatus();
+    if (F.isUND(collapsed)) {
+        collapsed = !currentCollapsed;
+    } else {
+        if (currentCollapsed === collapsed) {
+            return;
+        }
+    }
+
+    F.noAnimation(function () {
+
+        setFoldButtonStatus(collapsed);
+
+        if (!collapsed) {
+            if (_menuStyle === 'tree') {
+                logoEl.removeClass('short').text(logoEl.attr('title'));
+                sidebarRegion.setWidth(_sidebarWidth);
+                // 启用分隔条拖动
+                sidebarRegion.setSplitDraggable(true);
+
+                // 禁用树微型模式
+                treeMenu.miniMode = false;
+                // 重新加载树菜单
+                treeMenu.loadData();
+            } else {
+                sidebarRegion.expand();
+            }
+        } else {
+            if (_menuStyle === 'tree') {
+                logoEl.addClass('short').text('F');
+                sidebarRegion.setWidth(60);
+                // 禁用分隔条拖动
+                sidebarRegion.setSplitDraggable(false);
+
+                // 启用树微型模式
+                treeMenu.miniMode = true;
+                // 重新加载树菜单
+                treeMenu.loadData();
+            } else {
+                sidebarRegion.collapse();
+            }
+        }
+    });
+}
+
+// 侧边栏分隔条拖动事件
+function onSidebarSplitDrag(event) {
+    _sidebarWidth = this.width;
+}
+
+
+// 点击仅显示基础版示例
+function onShowOnlyBaseClick(event) {
+    var checked = this.isChecked();
+
+    setCookie('ShowOnlyBase', checked);
+    top.window.location.reload();
+}
+
+
+function onSearchTrigger1Click(event) {
+    F.removeCookie('SearchText');
+    top.window.location.reload();
+}
+
+function onSearchTrigger2Click(event) {
+    var ttbxSearch = this;
+    if (ttbxSearch.el.hasClass('collapsed')) {
+        ttbxSearch.el.removeClass('collapsed').addClass('expanded').outerWidth(200);
+    } else {
+        var ttbxSearchValue = ttbxSearch.getValue();
+        if (ttbxSearchValue) {
+            setCookie('SearchText', this.getValue());
+            top.window.location.reload();
+        }
+    }
+}
+
+function onSearchBlur(event) {
+    var ttbxSearch = this;
+    if (!ttbxSearch.getValue()) {
+        ttbxSearch.el.removeClass('expanded').addClass('collapsed').outerWidth(24);
+    }
+}
+
+// 点击标题栏工具图标 - 查看源代码
+function onToolSourceCodeClick(event) {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+    var windowSourceCode = F(PARAMS.windowSourceCode);
+
+
+    var activeTab = mainTabStrip.getActiveTab();
+    var iframeWnd, iframeUrl;
+    if (activeTab.iframe) {
+        iframeWnd = activeTab.getIFrameWindow();
+        iframeUrl = activeTab.getIFrameUrl();
+    }
+
+    var files = [iframeUrl];
+    var sourcefilesNode = $(iframeWnd.document).find('head meta[name=sourcefiles]');
+    if (sourcefilesNode.length) {
+        $.merge(files, sourcefilesNode.attr('content').split(';'));
+    }
+    windowSourceCode.show(PARAMS.sourceUrl + '?files=' + encodeURIComponent(files.join(';')));
+
+}
+
+// 点击标题栏工具图标 - 刷新
+function onToolRefreshClick(event) {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+
+    var activeTab = mainTabStrip.getActiveTab();
+    if (activeTab.iframe) {
+        var iframeWnd = activeTab.getIFrameWindow();
+        iframeWnd.location.reload();
+    }
+}
+
+// 点击标题栏工具图标 - 在新标签页中打开
+function onToolNewWindowClick(event) {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+
+    var activeTab = mainTabStrip.getActiveTab();
+    if (activeTab.iframe) {
+        var iframeUrl = activeTab.getIFrameUrl();
+        iframeUrl = PARAMS.processNewWindowUrl(iframeUrl);
+        window.open(iframeUrl, '_blank');
+    }
+}
+
+
+// 添加示例标签页（通过href在树中查找）
+// href: 选项卡对应的网址
+// actived: 是否激活选项卡（默认为true）
+function addExampleTabByHref(href, actived) {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+    var treeMenu = F(PARAMS.treeMenu);
+
+    F.addMainTabByHref(mainTabStrip, treeMenu, href, actived);
+}
+
+
+// 添加示例标签页
+// tabOptions: 选项卡参数
+// tabOptions.id： 选项卡ID
+// tabOptions.iframeUrl: 选项卡IFrame地址 
+// tabOptions.title： 选项卡标题
+// tabOptions.icon： 选项卡图标
+// tabOptions.createToolbar： 创建选项卡前的回调函数（接受tabOptions参数）
+// tabOptions.refreshWhenExist： 添加选项卡时，如果选项卡已经存在，是否刷新内部IFrame
+// tabOptions.iconFont： 选项卡图标字体
+// actived: 是否激活选项卡（默认为true）
+function addExampleTab(tabOptions, actived) {
+
+    if (typeof (tabOptions) === 'string') {
+        tabOptions = {
+            id: arguments[0],
+            iframeUrl: arguments[1],
+            title: arguments[2],
+            icon: arguments[3],
+            createToolbar: arguments[4],
+            refreshWhenExist: arguments[5],
+            iconFont: arguments[6]
+        };
+    }
+
+    F.addMainTab(F(PARAMS.mainTabStrip), tabOptions, actived);
+}
+
+
+// 移除选中标签页
+function removeActiveTab() {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+
+    var activeTab = mainTabStrip.getActiveTab();
+    activeTab.hide();
+}
+
+// 获取当前激活选项卡的ID
+function getActiveTabId() {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+
+    var activeTab = mainTabStrip.getActiveTab();
+    if (activeTab) {
+        return activeTab.id;
+    }
+    return '';
+}
+
+// 激活选项卡，并刷新其中的内容，示例：表格控件->杂项->在新标签页中打开（关闭后刷新父选项卡）
+function activeTabAndRefresh(tabId) {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+    var targetTab = mainTabStrip.getTab(tabId);
+    var oldActiveTabId = getActiveTabId();
+
+    if (targetTab) {
+        mainTabStrip.activeTab(targetTab);
+        targetTab.refreshIFrame();
+
+        // 删除之前的激活选项卡
+        mainTabStrip.removeTab(oldActiveTabId);
+    }
+}
+
+// 激活选项卡，并刷新其中的内容，示例：表格控件->杂项->在新标签页中打开（关闭后更新父选项卡中的表格）
+function activeTabAndUpdate(tabId, param1) {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+    var targetTab = mainTabStrip.getTab(tabId);
+    var oldActiveTabId = getActiveTabId();
+
+    if (targetTab) {
+        mainTabStrip.activeTab(targetTab);
+        targetTab.getIFrameWindow().updatePage(param1);
+
+        // 删除之前的激活选项卡
+        mainTabStrip.removeTab(oldActiveTabId);
+    }
+}
+
+// 通知框
+function notify(msg) {
+    F.notify({
+        message: msg,
+        messageIcon: 'information',
+        target: '_top',
+        header: false,
+        displayMilliseconds: 3 * 1000,
+        positionX: 'center',
+        positionY: 'center'
+    });
+}
+
+// 点击菜单样式
+function onMenuStyleCheckChange(event, item, checked) {
+    var menuStyle = item.getAttr('data-tag');
+
+    setCookie('MenuStyle', menuStyle);
+    top.window.location.reload();
+}
+
+// 点击显示模式
+function onMenuDisplayModeCheckChange(event, item, checked) {
+    var displayMode = item.getAttr('data-tag');
+
+    setCookie('DisplayMode', displayMode);
+    top.window.location.reload();
+}
+
+// 点击语言
+function onMenuLangCheckChange(event, item, checked) {
+    var lang = item.getAttr('data-tag');
+
+    setCookie('Language', lang);
+    top.window.location.reload();
+}
+
+// 点击选项卡标签页
+function onMenuMainTabsCheckChange(event, item, checked) {
+    var mainTabs = item.getAttr('data-tag');
+
+    setCookie('MainTabs', mainTabs);
+    top.window.location.reload();
+}
+
+
+
+// 示例数
+function getExamplesCount() {
+    return F(PARAMS.hfExamplesCount).getValue();
+}
+
+var THEMES = ["Default", "Metro_Blue", "Metro_Dark_Blue", "Metro_Gray", "Metro_Green", "Metro_Orange", "Black_Tie", "Blitzer", "Cupertino", "Dark_Hive", "Dot_Luv", "Eggplant", "Excite_Bike", "Flick", "Hot_Sneaks", "Humanity", "Le_Frog", "Mint_Choc", "Overcast", "Pepper_Grinder", "Redmond", "Smoothness", "South_Street", "Start", "Sunny", "Swanky_Purse", "Trontastic", "UI_Darkness", "UI_Lightness", "Vader", "custom_default", "bootstrap_pure", "custom_light_green", "pure_black", "pure_green", "pure_blue", "pure_purple", "pure_orange", "pure_red", "image_black_sky", "image_green_rain", "image_green_drip", "image_green_poppy", "image_green_lotus", "image_blue_sky", "image_blue_star", "image_blue_moon", "image_blue_drip", "image_purple_fog", "image_orange_light", "image_red_dawn"];
+// 转到下一个主题
+function nextThemePlease() {
+    var currentTheme = F.cookie('Theme');
+    var currentThemeIndex = $.inArray(currentTheme, THEMES);
+    if (currentThemeIndex != -1) {
+        currentThemeIndex++;
+        if (currentThemeIndex >= THEMES.length) {
+            currentThemeIndex = 0;
+        }
+        F.cookie('Theme', THEMES[currentThemeIndex], {
+            expires: 100  // 单位：天
+        });
+        window.location.reload();
+    }
+}
+
+function generateBreadcrumbHtml(treeMenu, nodeId) {
+    var result = [];
+    var nodePaths = treeMenu.getNodePath(nodeId).split('/');
+    if (nodePaths && nodePaths.length) {
+        var nodePathLength = nodePaths.length;
+        $.each(nodePaths, function (index, item) {
+            if (item === 'root') {
+                //result.push('<span class="breadcrumb-root">首页</span>');
+            } else {
+                var cls = 'breadcrumb-text';
+                if (index === nodePathLength - 1) {
+                    cls = 'breadcrumb-last';
+                }
+                var itemData = treeMenu.getNodeData(item);
+                result.push('<span class="' + cls + '">' + itemData.text + '</span>');
+            }
+        });
+    }
+    return result.join('<span class="breadcrumb-separator">/</span>');
+}
+
+
+F.ready(function () {
+    var mainTabStrip = F(PARAMS.mainTabStrip);
+    var treeMenu = F(PARAMS.treeMenu);
+    if (!treeMenu) return;
+
+    
+    // 初始化主框架中的树(或者Accordion+Tree)和选项卡互动，以及地址栏的更新
+    // treeMenu： 主框架中的树控件实例，或者内嵌树控件的手风琴控件实例
+    // mainTabStrip： 选项卡实例
+    // options: 参数
+    // options.updateHash： 切换Tab时，是否更新地址栏Hash值（默认值：true）
+    // options.refreshWhenExist： 添加选项卡时，如果选项卡已经存在，是否刷新内部IFrame（默认值：false）
+    // options.refreshWhenTabChange: 切换选项卡时，是否刷新内部IFrame（默认值：false）
+    // options.maxTabCount: 最大允许打开的选项卡数量
+    // options.maxTabMessage: 超过最大允许打开选项卡数量时的提示信息
+    // options.beforeNodeClick: 节点点击事件之前执行（返回false则不执行点击事件）
+    // options.beforeTabAdd: 添加选项卡之前执行（返回false则不添加选项卡）
+    var initOptions = {
+        maxTabCount: 10,
+        maxTabMessage: '请先关闭一些选项卡（最多允许打开 10 个）！',
+        beforeNodeClick: function (event, treeNodeId) {
+            var nodeEl = treeMenu.getNodeEl(treeNodeId);
+            var nodeTag = nodeEl.attr('data-tag');
+            var nodeData = treeMenu.getNodeData(treeNodeId);
+            if (nodeTag === 'pop-window1') {
+                F(PARAMS.windowThemeRoller).show();
+                return false;
+            } else if (nodeTag === 'newtab') {
+                window.open(nodeData.href, '_blank');
+                return false;
+            }
+        },
+        beforeTabAdd: function (event, tabOptions, treeNodeId) {
+            // 手工调用F.addMainTab也会运行到这里，由于不是点击左侧树节点触发的，所以此时treeNodeId为空
+            if (!treeNodeId) {
+                return;
+            }
+            var nodeEl = treeMenu.getNodeEl(treeNodeId);
+            var nodeTag = nodeEl.attr('data-tag');
+            if (nodeTag === 'custom-title') {
+                var parentNode = treeMenu.getParentData(treeNodeId);
+                tabOptions.title = parentNode.text + ' - ' + nodeEl.text();
+            }
+
+            // 单标签页 - 显示当前页面所在的路径
+            if (_mainTabs === 'single') {
+                $('#breadcrumb .breadcrumb-inner').html(generateBreadcrumbHtml(treeMenu, treeNodeId));
+            }
+        }
+    };
+
+    // 是否单标签页
+    if (_mainTabs === 'single') {
+        $('body').addClass('maintabs-single');
+
+        // 1. 单标签页标识符  2. 标签页存在则直接更新（因为只有这一个标签页）
+        $.extend(initOptions, {
+            singleTabId: PARAMS.tabHomepage,
+            refreshWhenExist: true
+        });
+    }
+
+    F.initTreeTabStrip(treeMenu, mainTabStrip, initOptions);
+
+
+    // 基础版不支持智能树控件和移动视图
+    if (F._base) {
+        _menuStyle = 'plaintree';
+    } else {
+        // 页面打开检查是否移动视图
+        checkMobileView();
+
+        // 根据屏幕尺寸检查是否移动视图
+        F.windowResize(function () {
+            checkMobileView();
+        });
+
+        // 如果初始启用移动视图，则检查折叠按钮的状态
+        if (isSmallWindowWidth()) {
+            setFoldButtonStatus(true);
+        }
+
+        // 如果地址哈希值不存在，则添加响应式首页
+        var hashFragment = window.location.hash.substr(1);
+        if (!hashFragment || hashFragment.indexOf(PARAMS.mainUrl) >= 0) {
+            addExampleTabByHref(PARAMS.dashboardUrl);
+        }
+    }
+
+    //addExampleTabByHref("/iframe/grid_iframe.aspx");
+    //addExampleTabByHref("/toolbar/toolbar_multi.aspx");
+    //addExampleTabByHref("/layout/vbox.aspx");
+    //addExampleTabByHref("/button/button.aspx");
+
+    // 下一个主题
+    //:: 页面按键事件
+    $(document).on('keydown', function (event) {
+        //:: Ctrl + Shift + L
+        if (event.ctrlKey && event.shiftKey && event.keyCode === 76) {
+            nextThemePlease();
+        }
+    });
+
+});
+

EProject/FineUIPro.Web/res/js/notify_group.js

@@ -0,0 +1,121 @@
+
+// 通知对话框分组
+(function () {
+
+    // _notifySpace: 消息框之间的间距
+    // _notifies: 存放当前正在显示的对话框列表
+    var _orderNumber = 1, _notifySpace = 5, _notifies = [];
+
+    // 对话框关闭处理函数
+    function onNotifyHide() {
+        // 先清空之前尚未完成的动画
+        clearNotifiesAnimation();
+
+        var notify = this;
+        var notifyHeight = notify.el.outerHeight(true) + _notifySpace;
+        var notifyIndex = $.inArray(notify, _notifies);
+        _notifies.splice(notifyIndex, 1);
+
+        var count = _notifies.length;
+        if (count) {
+            for (var i = notifyIndex; i < count; i++) {
+                var item = _notifies[i];
+                item.top -= notifyHeight;
+                item.el.animate({
+                    'top': item.top
+                });
+            }
+
+            // 按照 notify.top 重新排序
+            _notifies.sort(function (a, b) {
+                return a.top - b.top;
+            });
+        }
+    }
+
+    // 所有对话框下移
+    function moveNotifiesDown(newNotify, fn) {
+        // 先清空之前尚未完成的动画
+        clearNotifiesAnimation();
+
+        var count = _notifies.length, finished = 0;
+        if (!count) {
+            fn.apply(window);
+            return;
+        }
+
+        var notifyHeight = newNotify.el.outerHeight(true) + _notifySpace;
+        for (var i = 0; i < count; i++) {
+            var item = _notifies[i];
+            item.top += notifyHeight;
+            item.el.animate({
+                'top': item.top
+            }, function () {
+                // 动画完成后执行的函数
+                finished++;
+
+                if (finished >= count) {
+                    fn.apply(window);
+                }
+            });
+        }
+    }
+
+    // 停止动画，并回调
+    function clearNotifiesAnimation() {
+        var count = _notifies.length;
+        if (count) {
+            for (var i = 0; i < count; i++) {
+                var item = _notifies[i];
+                var itemEl = item.el;
+                if (itemEl.is(":animated")) {
+                    itemEl.stop(false, true);
+                }
+            }
+        }
+    }
+
+    // 获取对话框元素的top属性
+    function calcNotifyTop() {
+        var top = _notifySpace;
+        if (_notifies.length) {
+            var lastNotify = _notifies[_notifies.length - 1];
+            top += lastNotify.top + lastNotify.el.outerHeight(true);
+        }
+        return top;
+    }
+
+    // 公开方法
+    window.showNotifyGroup = function (options, newestOnTop) {
+        // 创建一个消息对话框实例
+        $.extend(options, {
+            cls: 'notify-group-item', // 自定义样式
+            constrainInitialSize: false, // 不限制初始大小，因为本示例的消息框可能会超出页面边界
+            positionX: 'right',
+            listeners: {
+                hide: onNotifyHide
+            }
+        });
+
+        if (newestOnTop) {
+            // 最新的显示在最上方，需要先隐藏，等 moveNotifiesDown 之后再显示
+            options.hidden = true;
+            options.top = _notifySpace;
+        } else {
+            options.top = calcNotifyTop();
+        }
+
+        var notify = F.notify(options);
+
+        if (newestOnTop) {
+            moveNotifiesDown(notify, function () {
+                notify.show();
+            });
+            _notifies.splice(0, 0, notify);
+        } else {
+            _notifies.push(notify);
+        }
+    }
+
+
+})();