controlhtm.html 8.31 KB
<p>导航设置</p>
<ul class="basics_ul">
    <li>
        <label class="col-sm-3">显示风格</label>
        <div class="col-sm-8">
            <label>
                <input type="radio" ng-model="content.style" value="1" name="character"/><span>导航</span>
            </label>
            <label>
                <input type="radio" ng-model="content.style" value="2" name="character"/><span>分组</span>
            </label>
        </div>
        <div class="clear"></div>
    </li>
    <li ng-if="content.style == 1">
        <label class="col-sm-3">显示图标</label>
        <div class="col-sm-8">
            <div>
                <label>
                    <input type="radio" ng-model="content.seticon" value="1" name="tit"/><span>图标居上</span>
                </label>
                <label>
                    <input type="radio" ng-model="content.seticon" value="2" name="tit"/><span>图标居左</span>
                </label>
                <label>
                    <input type="radio" ng-model="content.seticon" value="3" name="tit"/><span>不显示图标</span>
                </label>
            </div>

        </div>
        <div class="clear"></div>
    </li>
    <li>
        <label class="col-sm-3">图标大小</label>
        <div class="col-sm-8">
            <div class="container">
                <div class="sliderExample" style="width: 100%">
                    <div ui-slider="{range: 'max'}" ng-model="content.sliderExample" data-min="30" data-max="80"></div>
                    <input readonly="readonly" type="text" ng-model="content.sliderExample"
                           style="border: 0;background-color: #fff;"/><label>像素</label>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </li>
</ul>
<a class="btn addNav" onclick="addnav()"><i class="fa fa-plus"></i>添加导航</a>
<ul class="setNav" ui-sortable="sortableOptions" ng-model="content.data">
    <li ng-repeat="nav in content.data track by $index" class='parent'>
        <div class="col-sm-3 tac height100">
            <div class="topbg" onclick="setuploadimg('data','navicon',this)">
                <a ng-if="nav.navicon==''"><i class="fa fa-plus"></i>添加图片</a>
                <img ng-if="nav.navicon" src="{{nav.navicon}}"/>
                <span class="dis_vm"></span>
                <!--<span ng-if="nav.navicon" class="dis_vm"></span>-->
                <div ng-if="nav.navicon" class="tit ">重新选择</div>
            </div>
            <span class="dis_vm"></span>
        </div>
        <div class="col-sm-9 height100">
            <ul class="basics_ul">
                <li >
                    <label class="col-sm-3">文字</label>
                    <div class="col-sm-9">
                        <input id="ftitle" maxlength="6" ng-model="nav.title" type="text"/>
                        <span id="ftitle_err" style="color: red"></span>
                        <span onclick="setcolor('data','txtcolor',this)" class="color_Selector"
                              ng-style="{'background-color': nav.txtcolor}"></span>
                    </div>
                    <div class="clear"></div>
                </li>


                <li ng-if="is_mini==0">
                    <label class="col-sm-3">链接</label>
                    <div class="col-sm-9">
                        <div class="btn-group">
                            <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 cut">{{nav.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="nav.urltitle=='自定义'">
                                <div class="p_inputurl line-p">
                                    <input placeholder="http://" class="form-control input-sm " ng-model="nav.url"
                                           style="width:200px;margin-top: 10px;float:left;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </li>




				<li ng-if="is_mini==1">
                    <label class="col-sm-3">链接</label>
                    <div class="col-sm-9">
                        <div class="btn-group">
                            <div class="btn-group" onclick="wxappseturl('data','wxapp_url','wxapp_url_title',this)"
                                 onmousemove="setisover(1)" onmouseout="setisover(0)">
                               <button type="button" class="btn btn-sm btn-default text-over cut">{{nav.wxapp_url_title}}
                                </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>
                    </div>
                    <div class="clear"></div>
                </li>

				
				
                <li>
                    <label class="col-sm-3">背景颜色</label>
                    <div class="col-sm-9">
                        <span onclick="setcolor('data','bgcolor',this)" class="color_Selector"
                              ng-style="{'background-color': nav.bgcolor}"></span>
                        <input type="button" value="重置" class="btn addNav" onclick="nav_reset(this)"/>
                    </div>
                    <div class="clear"></div>
                </li>

            </ul>
            <i class="del-img fa fa-trash-o" ng-value="$index" onclick="delnav(this)"></i>
        </div>
        <div class="clear"></div>
    </li>
</ul>
<script type="text/javascript">
    app.controller('ctrl', function ($scope, $log, colorpicker) {
        function refreshSwatch(ev, ui) {
            var red = $scope.colorpicker.red,
                green = $scope.colorpicker.green,
                blue = $scope.colorpicker.blue;
            colorpicker.refreshSwatch(red, green, blue);
        }
    });
    function nav_reset(a) {
        var b = $(a).parent().parent().parent().parent().parent().index();
        //通过controller来获取Angular应用
        var appElement = document.querySelector('[ng-controller=ctrl]');
        //获取$scope变量
        var $scope = angular.element(appElement).scope();
        $scope.content.data[b].bgcolor = "#fff";
        $scope.content.data[b].txtcolor = "#000";
        //如果想同步到Angular控制器中,则需要调用$apply()方法即可
        $scope.$apply();
    }
    function addnav() {
        //通过controller来获取Angular应用
        var appElement = document.querySelector('[ng-controller=ctrl]');
        //获取$scope变量
        var $scope = angular.element(appElement).scope();
        var count = $scope.content.data.length;

        if (count > 4) {
            alert("导航最大只能是5个!")
            return false;
        }
        $scope.content.data.push({
            title: "导航",
            bgcolor: "#fff",
            txtcolor: "#000",
            urltitle: "请选择",
            navicon: "/public/static/images/model/tag-icon.png",
            urltitle: "请选择",
            wxapp_url:"",
            wxapp_url_title:"请选择"
        });
        //如果想同步到Angular控制器中,则需要调用$apply()方法即可
        $scope.$apply();

    }
    function delnav(a, e) {
        $(a).parent().index();
        var a = $(a).val();
        //通过controller来获取Angular应用
        var appElement = document.querySelector('[ng-controller=ctrl]');
        //获取$scope变量
        var $scope = angular.element(appElement).scope();
        $scope.content.data.splice(a, 1);
        //如果想同步到Angular控制器中,则需要调用$apply()方法即可
        $scope.$apply();
        e.stopPropagation();
    }

    $(".btn-group").hover(function () {
        isover=1;
    },function () {
        isover=0;
    })
</script>