defnav.html 17 KB
<!doctype html>
<html ng-app="app">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Apple devices fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <style type="text/css">html, body { overflow: visible;}</style>
    <link href="__PUBLIC__/static/js/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/static/font/css/font-awesome.min.css" rel="stylesheet" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="__PUBLIC__/static/font/css/font-awesome-ie7.min.css">
    <![endif]-->

    <script type="text/javascript" src="__PUBLIC__/js/rem_new.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/js/jquery.js"></script>
    <!--<script type="text/javascript" src="__PUBLIC__/static/js/jquery-ui/jquery-ui.min.js"></script>-->
    <script type="text/javascript" src="__WEBPUBLIC__/static/js/jquery-ui/jquery-ui.min.js?v=__CSSVERSION__"></script>
    <script type="text/javascript" src="__PUBLIC__/static/js/layer/layer.js"></script>

    <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.min.css" type="text/css" />

    <script src="__PUBLIC__/js/angularjs.js"></script>
    <script src="__PUBLIC__/js/sortable.js"></script>

    <script type="text/javascript" src="__PUBLIC__/js/global.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/ang_upload_img.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/js/model/index.js"></script>

    <link rel="stylesheet" href="__PUBLIC__/pickercolor/css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="__PUBLIC__/pickercolor/css/layout.css" />
    <script type="text/javascript" src="__PUBLIC__/pickercolor/js/colorpicker.js"></script>
    <script type="text/javascript" src="__PUBLIC__/pickercolor/js/eye.js"></script>
    <script type="text/javascript" src="__PUBLIC__/pickercolor/js/utils.js"></script>
    <script type="text/javascript" src="__PUBLIC__/pickercolor/js/layout.js?ver=1.0.2"></script>


    <style>
     	body{font-family: "Microsoft Yahei";}
      .item{width: 100%;min-height:40px;cursor: move;}
      .focus{border: 1px dashed #ff0000;}
      .ui-sortable-placeholder{border: 1px dashed #ff0000;height:40px}
      .clear{clear: both;}
      .color_Selector {
          background: url("/public/colorpicker/img/select2.png") no-repeat center center;
          cursor: pointer;display: inline-block;overflow: hidden;
          height: 28px;width: 28px;position: relative;
      }
      .colorchild_span{display: inline-block; width: 40px;height:40px;}
      label{font-weight: normal;}
      .nav-plans { background: #f9f9f9 none repeat scroll 0 0;border: 1px solid #eee;width: 324px;}
      .nav-plans h3 {
          background-color: #fff; border-bottom: 1px solid #eee; margin: 0;
          font-size: 16px;padding: 10px 5px;text-align: center;
      }
      .nav-plans p{background-color: #fff;
          border-bottom: 1px solid #eee; font-size: 16px; margin: 0;
          height: 35px; line-height: 35px; text-align: center;
      }
      .navitemlist{ min-height: 50px; position: relative}
      .bitemstyle.active::before {
          bottom: -1px; right: -1px;
          color: #fff;
          content:"";
          display: inline-block;
          font-family: FontAwesome;
          font-feature-settings: normal;
          font-kerning: auto;
          font-language-override: normal;
          font-size: inherit;
          font-size-adjust: none;
          font-stretch: normal;
          font-style: normal;
          font-synthesis: weight style;
          font-variant: normal;
          font-weight: normal;
          line-height: 1;
          position: absolute;
          text-rendering: auto;
          transform: translate(0px, 0px);
          z-index: 1;
      }
      .bitemstyle.active::after {
          border-bottom: 20px solid #f60;
          border-left: 22px solid transparent;
          bottom: -1px;
          content: "";
          position: absolute;
          right: -1px;
          z-index: 0;
      }

      .nav-items{height:50px; padding:0;margin:0;}
      .nav-items>li { list-style:none;text-align: center; float: left}
      .nav-items > li a{color: #7f8182;display:block;height: 50px;width:50px;text-align: center; margin: auto}
      .nav-items li a .icon{ width: 30px; height: 30px; margin: auto;font-size: 0;}

      .nav-action{height: 40px; line-height: 40px; padding: 0 10px}

      .nav-edit{ padding:10px; background: #f9f9f9;border-bottom: 1px solid #eee;}
      .form-control {border-radius: 2px;box-shadow: none; font-size: 12px;padding: 4px 6px;color: #333;}
      .line-p{padding:10px;border-bottom: 1px solid #eee;}

      .nav-edit-item{margin:10px;border:1px solid #eee;position: relative;
          background: #f9f9f9; padding-left: 10px; min-height: 130px}
      .nav-edit-item .nav-edit-item-img {
          text-align: center; float: left;
          height: 110px;width: 80px; margin-right: 10px; margin-top: 10px; position: relative;}
      .nav-edit-item .nav-edit-item-img .has-image{width: 80px; height: 80px;}
      .nav-edit-item .nav-edit-item-img .has-image.noimg{text-align: center; line-height:70px;}
      .nav-edit-item .nav-edit-item-img .has-image .foot-choice{
          background: rgba(0, 0, 0, 0.5); position: absolute; width: 100%;
          height: 20px; line-height: 20px;bottom: 0; left: 0;color:#fff;
      }
      .nav-edit-item-info{margin-left: 200px;padding-top: 20px;}
      .nav-edit-item .opts { position: absolute;right: 10px;top: 5px;}
      .nav-edit-item .opts .opts-icon{font-size: 16px; color:#a3a3a3}
      .focus{border: 1px dashed #ff0000;}
      /*--又侧方案--*/
      .rightcontrol{width:700px;height: auto; float: left; margin-left: 10px; margin-top: 10px; border:1px solid #eee }
      .dn{display: none;}
      .dis_vm{width: 0;height: 100%;vertical-align:middle;display: inline-block;*display: inline;*zoom: 1;}
    </style>
</head>
<body ng-controller="ctrl">
    <div id="topdiv">
    <!--左侧模块div-->
    <div style="width:340px;height: 1000px; float: left; margin-left: 10px; margin-top: 10px">
        <div class="nav-plans">
            <div class="navitemlist">
                <div  ng-style="{'background-color': content.bkcolor}">
                    <ul class="nav-items">
                        <li ng-repeat="item in content.data" ng-style="{'width':(100/content.data.length)+'%'}">
                            <a href="javascript:;">
                                <div class="icon">
                                	<img src="{{item.src}}" style="max-width:90%;max-height: 90%;" />
                                	<span class="dis_vm"></span>
                                </div>
                                <span class="ng-binding" ng-bind="item.nav_name" ng-style="{'color':content.fontcolor}"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="nav-action">
                    <span>默认导航</span>
                </div>
            </div>
        </div>
        <div style="height: 10px"></div>
        <a href="/index.php/mobile/template/nav_template" target="_blank">预览导航效果</a>
    </div>
    <!--方案编辑div-->
    <div class="rightcontrol">
        <div class="nav-edit" style="text-align: left">
            <p>方案名称:
                <span ng-bind="content.name"></span>
            </p>
        </div>
        <div class="nav-edit" style="text-align: left">菜单管理</div>
        <div class="nav-edit-conent" style="text-align: left">
            <p class="line-p"> 底色:
                <span onclick="setcolor('','bkcolor',this)" class="color_Selector" style="background-color: {{content.bkcolor}}"></span>
                字体颜色:
                <span onclick="setcolor('','fontcolor',this)" class="color_Selector" style="background-color: {{content.fontcolor}}"></span>
                字体被选中颜色:
                <span onclick="setcolor('','fontcolor_sele',this)" class="color_Selector" style="background-color: {{content.fontcolor_sele}}"></span>

            </p>
            <!--控制循环体-->
            <div ui-sortable="sortableOptions" ng-model="content.data" class="first">
                <div class="nav-edit-item parent" ng-repeat="item in content.data track by $index" ename="{{item.ename}}">
                    <!--默认图片-->
                    <div class="nav-edit-item-img" >
                        <p>默认图标</p>
                        <!--有图片的情况-->
                        <div class="has-image thumbnail" ng-if="item.src" >
                            <img style="width: 100%; height: 100%" ng-src="{{item.src}}" onclick="setuploadimg('data','src',this)">

                            <div class="foot-choice">重新选择</div>
                        </div>
                        <!--无图片的情况-->
                        <div class="has-image noimg thumbnail" ng-if="item.src==''"  onclick="setuploadimg('data','src',this)">
                            <i class="fa fa-plus"></i>添加图片
                        </div>
                    </div>
                    <!--选中图片-->
                    <div class="nav-edit-item-img">
                        <p>选择图标</p>
                        <!--有图片的情况-->
                        <div class="has-image thumbnail" ng-if="item.src_sele" onclick="setuploadimg('data','src_sele',this)">
                            <img style="width: 100%; height: 100%" ng-src="{{item.src_sele}}">
                            <div class="foot-choice" >重新选择</div>
                        </div>
                        <!--无图片的情况-->
                        <div class="has-image noimg thumbnail" ng-if="item.src_sele==''" onclick="setuploadimg('data','src_sele',this)">
                            <i class="fa fa-plus"></i>添加图片
                        </div>
                    </div>
                    <!--内容和链接-->
                    <div class="nav-edit-item-info">
                        <p class="line-p">名称:
                            <input placeholder="名称" class="form-control input-sm " maxlength="3"
                                   ng-model="item.nav_name" style="width:150px">&nbsp;<span style="font-size: 12px; color:grey">*最多3个字</span>
                        </p>
                        <div style="padding:10px;">链接:
                            <div class="btn-group"  onclick="seturl('data','url','urltitle',this)"  onmousemove="setisover(1)" onmouseout="setisover(0)">
                                <button type="button" class="btn btn-sm btn-default text-over" style="width:125px">{{item.urltitle}}</button>
                                <button type="button" class="btn btn-sm btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
                            </div>
                            <div  ng-if="item.urltitle == '自定义'" class="p_inputurl line-p">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input placeholder="http://" class="form-control input-sm " ng-model="item.url" style="width:350px;margin-top: 10px;">
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <!--小图标-->
                    <span class="opts">
                              <span class="opts-icon"  ng-click="deleCItem($index);">
                                  <i class="fa fa-trash-o"></i>
                              </span>
                              <span class="opts-icon ui-sortable-handle">
                                  <i class="fa fa-arrows"></i>
                              </span>
                           </span>
                </div>
            </div>
        </div>
        <p class="line-p" style="text-align: center">
            <a href="javascript:;" ng-click="addStyleNav()" ><i class="fa fa-plus"></i>添加导航</a>
        </p>
        <div style="height:10px"></div>
        <footer class="form-actions text-center">
            <button type="button" class="btn btn-sm btn-primary"
                    ng-disabled="save_btn_status" ng-click="saveNav()">提交修改</button>
        </footer>
        <div style="height:20px"></div>
    </div>
   </div>

   <div style="height: 100px" class="clear"></div>
   <include file="./public/url_sele.html"/>
   <input id="ftupimg" value="" type="hidden"/>
   <input id="ferpid" value="{:getERPId()}" type="hidden"/>
   <!--拾色器-->
   <div id="ffcolorSelector"  style="display: none; width: 10px; height: 10px;"></div>
   <input id="col_controllist" ind="" value="" type="hidden"/>

</body>
<script>
var temdata={$temdata};
/*--angular 控制模块--*/
var app=angular.module("app",["ui.sortable"]);
app.controller('ctrl', ['$scope','$compile','$http','$timeout',function($scope,$compile,$http,$timeout){
    $scope.content=temdata;
    /*-------sortable排序-------*/
    $scope.sortableOptions = {
        // 数据有变化
        update: function (e, ui) {},
        // 完成拖拽动作
        stop: function (e, ui) {

        },
    }

    /*-----------添加导航item------------*/
    $scope.addStyleNav=function () {
        if($scope.content.data.length<5) {
            var ele = {"src": "", "src_sele": "", "nav_name": "", "url": "", "urltitle": "请选择"};
            $scope.content.data.push(ele);
        }else{
            layer.msg("标题只能少于5个",{icon:2,time:2000});
        }
    }

    /*---删除其中一个元素---*/
    $scope.deleCItem=function(ind){
        $scope.content.data.splice(ind,1);
    }
    
    /*--------------保存导航---------------*/
    $scope.saveNav=function () {
        var ii=layer.msg('加载中...', {
            icon: 16,
            shade: [0.5, '#f5f5f5'],
            scrollbar: false,
            offset: '200px',
            time: 0
        });
        /*---post提交数据---*/
        $http({
            method:'post',
            url:'/index.php/manager/template/defnavsave/',
            data: $scope.content
        })
            .success(function(req){
                layer.close(ii);
                if(req.code==1){
                    layer.msg("保存成功",{icon:1,time:2000});

                }else{
                    layer.msg("保存失败"+req.msg,{icon:1,time:2000});
                }
            })
            .error(function(){
                layer.msg("网络繁忙,请重试",{icon:1,time:2000});
            });
    }

    /*-------删除元素-------*/
    $scope.deleCItem=function(n){
        $scope.content.data.splice(n, 1);
    }
}]);


//拾色器start
var col_sele_obj=null;
/*---链接地址,a是content的一级名称,b是二级名称,ob是对象---*/
function setcolor(a,b,ob){

    var obj=$(ob).parent().parent();
    var ind=0;
    url_sele_obj=ob;
    if(a==""){
        $("#controllist").val(b);
    }else{
        $("#controllist").val(a+'-'+b);
        var n=0;
        while(!obj.hasClass('parent')){
            obj=obj.parent();
            n++;
            if(n>=4) break;
        }
        ind=obj.index();
    }
    $("#col_controllist").attr("ind",ind);
    $('#ffcolorSelector').click();
    x=$(ob).offset().left;
    y=$(ob).offset().top+30;
    $(".colorpicker").css("left",(x-326)+'px');
    $(".colorpicker").css("top",y+'px')
}

/*---colorpick---*/
$('#ffcolorSelector').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('#colorSelector div').css('backgroundColor', '#' + hex);

        //通过controller来获取Angular应用
        var appElement = document.querySelector('[ng-controller=ctrl]');
        //获取$scope变量
        var $scope = angular.element(appElement).scope();

        //调用msg变量,并改变msg的值
        var v = $("#controllist").val();
        var ind = parseInt($("#col_controllist").attr('ind'));
        var ary = v.split("-");
        var c = $("#controllist").attr('utitle');

        if (ary[0]== "config") {
            var b = ary[1];
            $scope.config[b] = '#' + hex;
        } else {
            if (ary.length == 1) {
                $scope.content[v] = '#' + hex;
            } else {
                var a = ary[0];
                var b = ary[1];
                /*--修改链接的地址--*/
                $scope.content[a][ind][b] = '#' + hex;
            }
        }
        //同步到Angular控制器中
        $scope.$apply();

    }
});
//拾色器end
$(".itembox").live('click', function(event) {
    event.preventDefault();
});

</script>
</html>