ZTGT
/
WEBUI


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							@using WMS.BZWeb;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="~/favicon.ico">
    <title>@Common.GetWMSTile()|JS插件展示页面</title>
    <link href="~/Content/pace/pace-theme-minimal.css" rel="stylesheet" />
    <link href="~/Content/font/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap/bootstrap.min.css" rel="stylesheet" />
    @*<link href="~/Content/jquery/plugin/scrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet" />*@
    @*<link href="~/Content/jquery/plugin/jfGrid/jfgrid.css" rel="stylesheet" />*@

    @Html.AppendCssFile(

    "/wwwroot/Content/wms/style/wms-common.css",
    "/wwwroot/Content/wms/plugin/scroll/scroll.css",


    "/wwwroot/Content/wms/plugin/layout/wms-layout.css",
    "/wwwroot/Content/wms/plugin/tree/wms-tree.css",
    "/wwwroot/Content/wms/plugin/select/wms-select.css",
    "/wwwroot/Content/wms/plugin/formselect/wms-formselect.css",
    "/wwwroot/Content/wms/plugin/layerselect/wms-layerselect.css",
    "/wwwroot/Content/wms/plugin/uploader/wms-uploader.css",
    "/wwwroot/Content/wms/style/wms-iframe-index.css",
    "/wwwroot/Content/wms/plugin/grid/jfgrid.css"
    )
    @Html.AppendCssFile(
    "/Areas/DevelopmentManager/Views/PluginDemo/index.css"
    )
    <!--[if lt IE 9]>
      <script src="~/Content/bootstrap/html5shiv.min.js"></script>
      <script src="~/Content/bootstrap/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="lr-layout lr-layout-left-center" id="lr_layout">
        <div class="lr-layout-left">
            <div class="lr-layout-wrap">
                <div class="lr-layout-title">插件列表</div>
                <div id="plugin_list" class="lr-panel-content"></div>
            </div>
        </div>
        <div class="lr-layout-center">
            <div class="lr-layout-wrap">
                <div class="lr-layout-title">
                    演示区域 - <span id="title_info">未选择插件</span>
                </div>
                <div class="showarea-list">
                    <div class="showarea-list-item active" style="padding-top:0px;">
                        <div class="lr-tab-scroll-content">
                            <div class="alert alert-warning" role="alert">
                                <p>1.此页面展示一些敏捷框架所使用的部分前端插件!</p>
                                <p>2.所有插件都是支持主流浏览器的（IE8+、Chrome、Firefox、360浏览器等）!</p>
                                <p>3.选用的都是一些轻量,开源的插件,方便后续的扩展!</p>
                            </div>
                            <div class="lr-portal-panel-title">
                                <i class="fa fa-tags"></i>&nbsp;&nbsp;框架所使用的一些前端组件列表
                            </div>
                            <div class="lr-portal-panel-content" style="padding-top:10px;">
                                <p>1.JS框架：jquery-1.10.2（考虑到兼容低版本浏览器）、Bootstrap.js</p>
                                <p>2.CSS框架：Bootstrap v3.3.4</p>
                                <p>3.在线编辑器：ckeditor、simditor</p>
                                <p>4.上传文件：WebUploader</p>
                                <p>5.数据表格：JFGrid</p>
                                <p>6.对话框：layer.js</p>
                                <p>7.下拉选择框：learunselect</p>
                                <p>8.树结构控件：learuntree</p>
                                <p>9.图表插件：Echarts</p>
                                <p>10.日期控件： My97DatePicker</p>
                            </div>
                        </div>
                    </div>
                    <div id="learun_tree_area" class="showarea-list-item">
                        <ul class="nav nav-tabs lr-nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#tree_base" aria-controls="home" role="tab" data-toggle="tab">基础信息</a></li>
                            <li role="presentation"><a href="#tree_ajax" aria-controls="profile" role="tab" data-toggle="tab">获取后端数据</a></li>
                            <li role="presentation"><a href="#tree_checkbox" aria-controls="settings" role="tab" data-toggle="tab">复选框</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content lr-tab-content">
                            <div role="tabpanel" class="tab-pane active" id="tree_base">
                                <div class="lr-tab-scroll-content">
                                    <div class="alert alert-warning" role="alert">
                                        <p>1.lrtree是一个基于通过jquery的轻量级树形插件!</p>
                                        <p>2.通过jquery选择器就可以动态创建出一个树形数据!</p>
                                        <p>3.支持复选框,ajax后端数据获取,数据懒加载!</p>
                                        <p>4.兼容目前最流行浏览器（IE8+、Chrome、Firefox、360浏览器）</p>
                                    </div>
                                    <div class="lr-portal-panel-title">
                                        <i class="fa fa-tags"></i>&nbsp;&nbsp;事例
                                    </div>
                                    <div class="lr-portal-panel-content">
                                        <div id="tree_show_base" class="lr-portal-panel-content-right"></div>
                                    </div>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="tree_ajax">
                                <div class="lr-tab-scroll-content">
                                    <div class="alert alert-warning" role="alert">
                                        <p>1.可以通过ajax方式获取后台数据!</p>
                                    </div>
                                    <div class="lr-portal-panel-title">
                                        <i class="fa fa-tags"></i>&nbsp;&nbsp;事例
                                    </div>
                                    <div class="lr-portal-panel-content">
                                        <div id="tree_show_ajax" class="lr-portal-panel-content-right"></div>
                                    </div>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="tree_checkbox">
                                <div class="lr-tab-scroll-content">
                                    <div class="alert alert-warning" role="alert">
                                        <p>1.可以给给指定的节点添加勾选框!</p>
                                    </div>
                                    <div class="lr-portal-panel-title">
                                        <i class="fa fa-tags"></i>&nbsp;&nbsp;事例
                                    </div>
                                    <div class="lr-portal-panel-content">
                                        <div id="tree_show_checkbox" class="lr-portal-panel-content-right"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="learun_select_area" class="showarea-list-item" style="padding-top:0px;">
                        <div class="lr-tab-scroll-content">
                            <div class="alert alert-warning" role="alert">
                                <p>1.lrselect是一个基于通过jquery的轻量级下拉框插件!</p>
                                <p>2.支持主流浏览器的（IE8+、Chrome、Firefox、360浏览器等）!</p>
                                <p>3.基本能满足所有需求,支持普通下拉框，树形下拉框，支持模糊查询和数据动态加载!</p>
                            </div>
                            <div class="lr-portal-panel-title">
                                <i class="fa fa-tags"></i>&nbsp;&nbsp;事例
                            </div>
                            <div class="lr-portal-panel-content" style="padding:20px;">
                                <div id="select1"></div>
                                <div id="select2" style="margin-top:10px;"></div>
                                <div id="select3" style="margin-top:10px;"></div>
                                <div id="select4" style="margin-top:10px;"></div>
                                <div id="select5" style="margin-top:10px;"></div>
                                <div id="select6" style="margin-top:10px;"></div>
                                <div id="select7" style="margin-top:10px;"></div>
                            </div>
                        </div>
                    </div>
                    <div id="learun_selectuser_area" class="showarea-list-item" style="padding-top:0px;">
                        <div class="lr-tab-scroll-content">
                            <div class="alert alert-warning" role="alert">
                                <p>1.基于layer弹层和lrselect的人员选择!</p>
                                <p>2.支持主流浏览器的（IE8+、Chrome、Firefox、360浏览器等）!</p>
                                <p>3.基本能满足所有需求!</p>
                            </div>
                            <div class="lr-portal-panel-title">
                                <i class="fa fa-tags"></i>&nbsp;&nbsp;事例
                            </div>
                            <div class="lr-portal-panel-content" style="padding:20px;">
                                <div id="selectuser1"></div>
                                <div id="selectuser2" style="margin-top:10px;"></div>
                            </div>
                        </div>
                    </div>
                    <div id="jfgrid_area" class="showarea-list-item" style="padding-top:0px;">
                        <div class="lr-tab-scroll-content">
                            <div class="alert alert-warning" role="alert">
                                <p>1.jfgrid是一个轻量级的表格插件!</p>
                                <p>2.所有插件都是支持主流浏览器的（IE8+、Chrome、Firefox、360浏览器等）!</p>
                                <p>3.基本能满足所有需求,最主要的原因是免费的!</p>
                                <p>4.前端开发团队对其做了一定的扩展和封装,方便整体框架的使用!</p>
                            </div>
                            <div class="lr-portal-panel-title">
                                <i class="fa fa-tags"></i>&nbsp;&nbsp;事例
                            </div>
                            <div class="lr-portal-panel-content" style="padding:20px;">
                                <div id="learun_jfgrid"></div>
                            </div>
                        </div>
                    </div>
                    <div id="uploader_area" class="showarea-list-item" style="padding-top:0px;">
                        <div class="lr-tab-scroll-content">
                            <div class="alert alert-warning" role="alert">
                                <p>1.WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。</p>
                                <p>2.在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。</p>
                                <p>3.采用大文件分片并发上传，极大的提高了文件上传效率。</p>
                                <p>4.前端开发团队对其做了一定的扩展和封装,方便整体框架的使用!</p>
                            </div>
                            <div class="lr-portal-panel-title">
                                <i class="fa fa-tags"></i>&nbsp;&nbsp;事例
                            </div>
                            <div class="lr-portal-panel-content" style="padding:20px;">
                                <div id="learun_uploader"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="~/Content/pace/pace.min.js"></script>
    <script src="~/Content/jquery/jquery-1.10.2.min.js"></script>
    <script src="~/Content/bootstrap/bootstrap.min.js"></script>
    @*<script src="~/Content/jquery/plugin/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>*@
    @*<script src="~/Content/jquery/plugin/jfGrid/jfgrid.min.js"></script>*@
    <script src="~/Content/jquery/plugin/jqprint/jquery.jqprint-0.3.js"></script>
    @Html.AppendJsFile(
    "/wwwroot/Content/wms/plugin/resize/resize.js",
    "/wwwroot/Content/wms/plugin/mousewheel/mousewheel.js",
    "/wwwroot/Content/wms/plugin/scroll/scroll.js",


    "/wwwroot/Content/wms/plugin/layout/wms-layout.js",
    "/wwwroot/Content/wms/plugin/tree/wms-tree.js",
    "/wwwroot/Content/wms/plugin/select/wms-select.js",
    "/wwwroot/Content/wms/plugin/formselect/wms-formselect.js",
    "/wwwroot/Content/wms/plugin/layerselect/wms-layerselect.js",
    "/wwwroot/Content/wms/plugin/uploader/wms-uploader.js",


    "/wwwroot/Content/wms/plugin/grid/jfgrid.js",
    "/Areas/DevelopmentManager/Views/PluginDemo/listInfo.js",
    "/Areas/DevelopmentManager/Views/PluginDemo/index.js"


    )
    <script>
        $.lrToken = $('@Html.AntiForgeryToken()').val();
        $(function () {
            $('#lr_layout').lrLayout();
            if (!!window.bootstrap) {
                bootstrap(jQuery, top.learun);
            }
        });
    </script>
</body>
</html>