@{ ViewBag.Title = "选择图标"; Layout = "~/Views/Shared/_Layout.cshtml"; }
<style>
    body {
        background-color: white;
    }

    #div-icon {
        border: 1px solid #e5e6e7;
        width: 100%;
        padding: 5px;
        height:300px;
        overflow-y:scroll;
        border-bottom:1px dashed #e5e6e7;
    }

        #div-icon span {
            border-color: #1ab394;
            background-color: #1ab394;
            color: #ffffff;
            display: inline-block;
            line-height: 1.5;
            margin-bottom: 5px;
            margin-right: 5px;
            padding: 2px 5px;
        }

            #div-icon span:hover {
                background-color: #f8ac59;
            }

        #div-icon .span-active {
            background-color: #f8ac59;
        }
</style>
<div class="wrapper-content" style="padding:5px 5px 0px;">
    <div id="div-icon">
        @{ string[] icons = ViewData["icon"] as string[];
           for (int i = 0; i < icons.Length; i++)
         { <span><i class="@icons[i]"></i></span>
         } }
    </div>
    <div class="hr-line-dashed">
        <div class="form-group">
            <div class="col-sm-2 col-sm-offset-2">
                <button class="btn btn-primary" id="saveIcon" type="submit"><i class="fa fa-check"></i> <span>确定保存</span></button>
                <button class="btn btn-warning" id="btn-dig-close" type="button"><i class="im-undo2"></i> 取消返回</button>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript">
        $(function () {
            //获取传递过来的值
            var dialog = top.dialog.get(window);
            var data = dialog.data;
            //选中原有图标
            if (data != '') {
                 $('#div-icon span i[class="' + data + '"]').parent().attr('class', 'span-active');
            }
            $("#saveIcon").click(function () {
                var newicon = $('#div-icon span[class="span-active"]').find('i').attr('class');
                dialog.close(newicon);
                dialog.remove();
            });
        });
        $('#div-icon span').click(function () {
            $(this).addClass('span-active').siblings().removeClass('span-active');
        });
    </script>
}