DNN开发的魅力在于一个模块完成了,可以在很多页面来使用,正如一个类设计好了,可以有构造很多的对象,无非就是在每个对象里塞满东西!
我将这个模块比如为一个图书信息。这个网站上很多网页都涉及到一个图书列表的显示:最热销的图书/最新图书/最XX的图书等等,他们其实是一个模块定义的不同表现形式而已。由于美化界面的需要,这些列表可能有不同的外观。我们想到的第一个就是CSS。的确CSS帮助我们解决了很多的问题。但是今天还是碰到了一个问题,花了1小时解决了它。:)
今天的问题是:如何在DataList中使用CSS Lists Properties特性,并且能够在模块的设置中用户定制CSS?
(1)在DataList中设置了CssClass属性为MyList。同时在Portal目录下Default.css中定义:
{}{
list-style-image:url("http://localhost/MyDNN//images/rt.gif");
/**//*list-style-type:circle;*/
}
运行没有反应!
仔细看了服务端生成的HTML源文件,发现MyList的确被赋给了一个Table。DataList没有服务端解析成一个List的HTML“对象”,而list-style属性只对<li>标签标明的List的HTML“对象”有效。
(2)在DataList的ItemTemplate中加入<li>标签。发现有效:
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate>
<li class='MyList'>
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Title") %>'></asp:Label>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:DataList>
运行一次,搞定了,那个绿色的图标“rt.gif”出现在每个列表项前了!
(3)对于这个<li>不是run at server,我如何换掉他的外衣??
我试了一下<li class='<%MyList%>'>并且在.ascx.cs文件中定义一个public string MyList="MyList";
发现编译错误,几乎我放弃了。可是我看到了可爱的‘#’!我拍了脑门,这里是循环的哟,要加#!!!最后的代码如下:
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate>
<li class='<%#MyList%>'>
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Title") %>'></asp:Label>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:DataList>
对应的.cs文件部分片段如下:
DataList1.DataBind();
if (((string)Settings["BookListCSS"] != null) && ((string)Settings["BookListCSS"] != ""))
{
this.MyList= (string)Settings["BookListCSS"];
}
在Settings.ascx中加入一个设置的输入框,在保存事件中加入
这样就能够通过设置来制定DataList中列表的样式了。