提交菜单编辑页面，选择菜单图标功能，样式表还未做微调

Bootstrap.Admin/Bootstrap.Admin.csproj

@@ -225,6 +225,7 @@
     <Content Include="Views\Admin\Menus.cshtml" />
     <Content Include="Views\Shared\Glyphicons.cshtml" />
     <Content Include="Views\Shared\RoleConfig.cshtml" />
+    <Content Include="Views\Shared\IconView.cshtml" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>

Bootstrap.Admin/Content/css/fa.css

@@ -1,16 +1,125 @@
-body {
+.modal-body #fa-top {
-    padding-top: 16px;
+    float: left;
+    margin-top: -15px;
 }
 
+.modal-body #fa-bottom {
+    clear: both;
+    float: right;
+    margin-bottom: -15px;
+}
+
+.form-group .input-group .input-group-btn .btn i {
+    color: #187c9a;
+    padding-right: 6px;
+}
+
+.fb-timeliner {
+    position: fixed;
+    right: 40px;
+    width: 150px;
+}
+
+    .fb-timeliner ul {
+        margin-left: 10px;
+        margin-bottom: 20px;
+        padding-left: 0;
+    }
+
+        .fb-timeliner ul li {
+            margin-bottom: 3px;
+        }
+
+            .fb-timeliner ul li.active a {
+                color: #7a7a7a;
+                border-left: 4px solid #5bc0de;
+                padding-left: 10px;
+            }
+
+            .fb-timeliner ul li a {
+                color: #999797;
+                border-left: 4px solid #d3d7dd;
+                padding-left: 10px;
+                padding-top: 3px;
+                padding-bottom: 3px;
+                display: block;
+            }
+
+                .fb-timeliner ul li a:hover {
+                    color: #999797;
+                    border-left: 4px solid #d9534f;
+                    padding-left: 10px;
+                }
+
+    .fb-timeliner h2 {
+        background: #828283;
+        color: #fff;
+        margin-top: 0;
+        padding: 10px 15px;
+        font-size: 16px;
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        font-weight: 300;
+    }
+
+.recent-highlight {
+    background: #FF6C60 !important;
+}
+
+#pickIcon {
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+.icon-content {
+    position: fixed;
+    top: 15px;
+    left: 15px;
+    bottom: 15px;
+    right: 15px;
+    z-index: 1051;
+    display: none;
+}
+
+    .icon-content .modal-body {
+        position: fixed;
+        left: 18px;
+        right: 16px;
+        top: 62px;
+        bottom: 80px;
+        overflow-y: scroll;
+    }
+
+    .icon-content .modal-footer {
+        position: fixed;
+        left: 16px;
+        right: 16px;
+        bottom: 15px;
+    }
+
+        .icon-content .modal-footer span {
+            vertical-align: middle;
+            font-size: 14px;
+            color: #000;
+        }
+
+        .icon-content .modal-footer i {
+            vertical-align: middle;
+            font-size: 22px;
+            padding: 0 15px;
+            color: #337ab7;
+        }
+
 .fontawesome-icon-list .fa-hover a {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    line-height: 32px;
+    padding-left: 10px;
     display: block;
     color: #222;
-    line-height: 32px;
     height: 32px;
-    padding-left: 10px;
     border-radius: 4px;
 }
 
@@ -40,16 +149,16 @@
 
     .fontawesome-icon-list ul li {
         overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 32px;
+        padding-left: 10px;
         list-style: none;
         float: left;
-        padding-left: 10px;
         padding-right: 15px;
         padding-top: 2px;
         padding-bottom: 4px;
-        text-overflow: ellipsis;
-        line-height: 32px;
         height: 32px;
-        white-space: nowrap;
         vertical-align: middle;
     }
 
@@ -69,9 +178,3 @@
         .fontawesome-icon-list ul li span:nth-child(1) {
             margin-right: 10px;
         }
-
-@media (max-width: 768px) {
-    .col-sm-6 {
-        width: 50%;
-    }
-}

Bootstrap.Admin/Scripts/Menus.js

@@ -83,4 +83,27 @@
             maxlength: 50
         }
     });
+
+    $('.fontawesome-icon-list ul li').addClass('col-md-3 col-sm-4 col-sm-6');
+
+    $('.fontawesome-icon-list .fa-hover a, .fontawesome-icon-list ul li').click(function () {
+        $('.icon-content .modal-footer i').attr('class', $(this).children('i, span:first').attr('class'));
+        return false;
+    });
+
+    $('.form-group .input-group .input-group-btn .btn').click(function () {
+        $('.icon-content').show();
+    });
+
+    $('.icon-content button:not(:last)').click(function () {
+        $('.icon-content').hide();
+    });
+
+    $('.icon-content button:last').click(function () {
+        var icon = $('.icon-content .modal-footer i').attr('class');
+        window.console.log(icon);
+        $('.icon-content').hide();
+        $('.form-group .input-group input.disabled').val(icon);
+        $('.form-group .input-group .input-group-btn .btn i').attr('class', icon);
+    });
 });

Bootstrap.Admin/Views/Admin/Menus.cshtml

@@ -3,6 +3,9 @@
     ViewBag.Title = "菜单管理";
     Layout = "~/Views/Shared/_Default.cshtml";
 }
+@section css {
+    <link href="~/Content/css/fa.css" rel="stylesheet" />
+}
 @section Javascript {
     <script src="~/scripts/Menus.js"></script>
 }
@@ -69,4 +72,5 @@
 }
 @section customModal {
     @Html.Partial("RoleConfig")
+    @Html.Partial("IconView")
 }

Bootstrap.Admin/Views/Shared/IconView.cshtml

@@ -0,0 +1,44 @@
+<div class="modal-content icon-content">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title" id="myIconModalLabel">请选择图标</h4>
+    </div>
+    <div class="modal-body">
+        <i id="fa-top"></i>
+        <div class="col-sm-9">
+            <ul class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li>
+                <li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
+            </ul>
+            <div class="tab-content">
+                <div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div>
+                <div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div>
+            </div>
+        </div>
+        <div class="fb-timeliner">
+            <h2 class="recent-highlight">图标分类</h2>
+            <ul>
+                <li class="active"><a href="#">类型一</a></li>
+                <li><a href="#new">新图标</a></li>
+                <li><a href="#web-application">Web 图标</a></li>
+                <li><a href="#accessibility">accessibility</a></li>
+                <li><a href="#transportation">transportation</a></li>
+                <li><a href="#gender">gender</a></li>
+                <li><a href="#">类型一</a></li>
+                <li><a href="#">类型一</a></li>
+                <li><a href="#">类型一</a></li>
+                <li><a href="#">类型一</a></li>
+                <li><a href="#">类型一</a></li>
+                <li><a href="#medical">医疗图标</a></li>
+                <li><a href="#fa-top">返回顶部</a></li>
+                <li><a href="#fa-bottom">返回底部</a></li>
+            </ul>
+        </div>
+        <i id="fa-bottom"></i>
+    </div>
+    <div class="modal-footer">
+        <span>被选择的图标：</span><i></i>
+        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+        <button type="button" class="btn btn-primary" id="btnSubmitIcon">保存</button>
+    </div>
+</div>