基于BootStrap Metronic开发框架经验小结【四】Boot(2)

BootstrapIconInfo info = new BootstrapIconInfo() { DisplayName = item, ClassName = prefix + item, CreateTime = DateTime.Now, SourceType = sourceType, }; BLLFactory<BootstrapIcon>.Instance.Insert(info);

最后记录存储在数据库里面，效果如下所示，里面已经记录我们所需的图标信息了，这样在实际使用的时候，就可以利用各个字段的信息，显示出好看的界面了。

3、Bootstrap的图标显示和选择

我们通过文件读取并以正则表达式提取出内容，然后保存到数据库后，这些图标信息就可以为我们使用了，可以在页面里面分类显示出来，每类的图标进行分页处理，方便查询，如下所示。

这部分的显示页面代码和常规的数据显示差不多的，只是不需要表头信息而已，我们来看看页面代码如下所示。

<div> <div> <div> <i></i> 图标信息 </div> </div> <div> <div> <span>每页显示</span> <select onchange="ChangeRows()"> <option>50</option> <option selected>100</option> <option>200</option> <option>1000</option> </select> <span>条记录</span>&nbsp;&nbsp; <span>共有记录：</span><span>0</span>条，总页数：<span>0</span>页。 </div> <hr /> <div> <div></div> <div> <ul></ul> </div> </div> </div> </div>

其中主要的图标显示内容在上面这部分的HTML里面。

<div></div>

动态获取并生成HTML代码显示在界面上的处理脚本如下所示。

$.getJSON(iconUrl + "&" + condition, function (data) { $("#icon_body").html(""); $.each(data.rows, function (i, item) { var tr = "<a href=https://www.jb51.net/article/\"javascript:;\" onclick=https://www.jb51.net/article/\"GetIcon('" + item.ClassName + "')\" class=https://www.jb51.net/article/\"icon-btn\" title=https://www.jb51.net/article/\"" + item.DisplayName + "https://www.jb51.net/article/\">"; tr += " <i class=https://www.jb51.net/article/\"" + item.ClassName + " \" style=https://www.jb51.net/article/\"font-size: 2.2em\"></i>";// //tr += "<div>" + item.DisplayName + "</div>"; tr += "</a>"; $("#icon_body").append(tr); });

用户选择对应的图标后，我们可以通过脚本设置Span的样式就可以显示出来我们选中的图标了，如下所示。

$("#i_WebIcon").attr("class", classname);

当然我们选择图标的时候，提供一个弹出的对话框显示分类不同的图标，让用户选择后返回即可。

这样我们就完成了，从图标文件里面提取不同类型的图表，然后存储在数据库里面，并在页面里面显示出来，可供我们动态选择和设置了。

以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用 的相关知识，希望对大家有所帮助，如果大家想了解更多资讯，敬请关注脚本之家网站！

您可能感兴趣的文章: