Question

我正在ASP.net中做一个项目，但我有一个我需要的特定设计。不幸的是，此设计仅适用于<ul>和<li>。 CSS代码如下：

.nav-tabs.nav-stacked.nav-coupon-category {
  margin-bottom: 30px;
  -webkit-box-shadow: 0 3px 1px rgba(0,0,0,0.15);
  box-shadow: 0 3px 1px rgba(0,0,0,0.15);
}
.nav-tabs.nav-stacked.nav-coupon-category > li > a {
  text-transform: uppercase;
  font-size: 13px;
  z-index: 1;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #fff;
  border-left: none;
  border-right: none;
  border: none;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -ms-transition: 0.2s;
  transition: 0.2s;
  height: 40px;
  line-height: 40px;
  padding: 0px 0px 0px 55px;
  position: relative;
  margin: 0;
  color: #666;
}
.nav-tabs.nav-stacked.nav-coupon-category > li > a .fa {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  font-size: 18px;
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  background: #fbfbfb;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 40px;
  border-right: 1px solid #ededed;
}

并且index.aspx部分如下所示：

<asp:ListBox CssClass="nav nav-tabs nav-stacked nav-coupon-category" ID="Step1CatList" runat="server" onselectedindexchanged="ListCat_SelectedIndexChanged">
                                            <asp:ListItem Selected="True" Text="Second Hand" Value="Items"></asp:ListItem>
                                            <asp:ListItem Text="Cars" Value="Cars"></asp:ListItem>
                                            <asp:ListItem Text="Rea Estate" Value="RealEstate"></asp:ListItem>
                                               </asp:ListBox>

正如您所看到的，我尝试使用CssClass，但它无效。如果有人知道解决这个问题，我会很高兴。

Answer 1

我目前也有此需求。由于列表框是一个选择，它在ipad上看起来并不正确。请记住，我通常不会创建服务器控件，但我知道它们可以提供帮助，因此这很快，很脏并且未完成，主要是由于不熟悉。另请注意，我目前正在从客户端（jquery）使用它，并没有真正测试回发功能。但是，这应该会给你一个想法。

public class ItemEventArgs : EventArgs
{
    #region Properties

    public int Index { get; set; }

    public string Text { get; set; }

    public string Value { get; set; }

    #endregion Properties
}

public class UnorderedItem
{
    #region Constructors

    public UnorderedItem(string text, string value)
    {
        Text = text;
        Value = value;
    }

    #endregion Constructors

    #region Properties

    public string Text { get; set; }

    public string Value { get; set; }

    #endregion Properties
}

[DefaultProperty("Text")]
[ToolboxData("<{0}:UnorderedList runat=server></{0}:UnorderedList>")]
public class UnorderedList : WebControl, IPostBackEventHandler//, IScriptControl
{
    #region Fields

    private ScriptManager scriptManager;

    #endregion Fields

    #region Constructors

    public UnorderedList()
    {
        Items = new List<UnorderedItem>();
    }

    #endregion Constructors

    #region Events

    public event EventHandler<ItemEventArgs> ItemClick;

    #endregion Events

    #region Properties

    [Bindable(true)]
    [Category("Appearance")]
    [Localizable(true)]
    [DefaultValue("")]
    public string ItemAltCssClass { get; set; }

    [Bindable(true)]
    [Category("Appearance")]
    [Localizable(true)]
    [DefaultValue("")]
    public string ItemCssClass { get; set; }

    [Bindable(true)]
    [Category("Appearance")]
    public List<UnorderedItem> Items { get; set; }

    [Bindable(true)]
    [DefaultValue("")]
    [Category("Client Events")]
    [Localizable(true)]
    public string OnClientItemClick { get; set; }

    [Bindable(true)]
    [Category("Appearance")]
    [Localizable(true)]
    [DefaultValue("")]
    public int SelectedIndex { get; set; }

    [Bindable(true)]
    [Category("Appearance")]
    [Localizable(true)]
    [DefaultValue("")]
    public string SelectedItemCssClass { get; set; }

    [Bindable(true)]
    [Category("Appearance")]
    [Localizable(true)]
    [DefaultValue("")]
    public string SelectedValue { get; set; }

    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("")]
    [Localizable(true)]
    public string Text { get; set; }

    #endregion Properties

    #region Methods

    public void ClearSelection()
    {
        Text = null;
        SelectedValue = null;
        SelectedIndex = -1;
    }

    //public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
    //{
    //    return new ScriptReference[] { };
    //}

    //public IEnumerable<ScriptReference> GetScriptReferences()
    //{
    //    return new ScriptDescriptor[] { };
    //}

    public void RaisePostBackEvent(string eventArgument)
    {
        ItemEventArgs args = new ItemEventArgs();
        args.Index = Convert.ToInt32(eventArgument);

        UnorderedItem item = Items[args.Index];
        args.Text = item.Text;
        args.Value = item.Value;

        SelectedValue = args.Value;
        SelectedIndex = args.Index;
        Text = args.Text;

        if (ItemClick != null)
        {
            ItemClick(this, args);
        }
    }

    protected virtual void OnItemClick(ItemEventArgs e)
    {
        EventHandler<ItemEventArgs> handler = ItemClick;
        if (handler != null)
        {
            handler(this, e);
        }
    }

    protected override void OnPreRender(EventArgs e)
    {
        //if (!DesignMode)
        //{
        //    scriptManager = ScriptManager.GetCurrent(Page);

        //    if (scriptManager == null)
        //    {
        //        throw new HttpException("A scriptmanager control must exist on the current page.");
        //    }

        //    scriptManager.RegisterScriptControl(this);
        //}
        base.OnPreRender(e);
    }

    protected override void Render(HtmlTextWriter writer)
    {
        //if (!this.DesignMode)
        //{
        //    scriptManager.RegisterScriptDescriptors(this);
        //}

        var itemCssClass = false;
        var itemAltCssClass = false;

        if (!string.IsNullOrEmpty(ItemCssClass))
        {
            itemCssClass = true;
        }

        if (!string.IsNullOrEmpty(ItemAltCssClass))
        {
            itemAltCssClass = true;
        }

        writer.WriteBeginTag("ul");
        if (!string.IsNullOrEmpty(CssClass))
        {
            writer.WriteAttribute("class", CssClass);
        }

        if (!string.IsNullOrEmpty(AccessKey))
        {
            writer.WriteAttribute("AccessKey", AccessKey);
        }

        if (Style != null && !string.IsNullOrEmpty(Style.Value))
        {
            writer.WriteAttribute("style", Style.Value);
        }

        writer.WriteAttribute("value", string.IsNullOrEmpty(SelectedValue) ? Items[0].Value : SelectedValue);
        writer.WriteAttribute("index", SelectedIndex.ToString());

        writer.WriteAttribute("id", this.ClientID);
        writer.Write(HtmlTextWriter.TagRightChar);

        var itemClass = string.Empty;
        var prefix = string.Concat(ClientID, "_Item");
        UnorderedItem item;
        for (var i = 0; i < Items.Count; i++)
        {
            itemClass = string.Empty;
            item = Items[i];

            writer.WriteBeginTag("li");
            writer.WriteAttribute("index", i.ToString());
            writer.WriteAttribute("value", item.Value);
            writer.WriteAttribute("onclick", String.Format("{0}{1}{2}{3}{4}{5}{6}{7}{8}", "SetSelectedValue(this, '", item.Text, "','", item.Value, "',", i, ");", OnClientItemClick ?? string.Empty, Page.ClientScript.GetPostBackEventReference(this, i.ToString())));

            if (i % 2 == 0)
            {
                if (itemCssClass)
                {
                    itemClass = ItemCssClass;
                }
            }
            else
            {
                if (itemAltCssClass)
                {
                    itemClass = ItemAltCssClass;
                }
            }

            if (SelectedIndex == i)
            {
                itemClass = String.Format("{0}{1}{2}", itemClass, " ", SelectedItemCssClass).Trim();
            }

            if (itemClass != string.Empty)
            {
                writer.WriteAttribute("class", ItemCssClass);
            }
            writer.Write(HtmlTextWriter.TagRightChar);
            writer.Write(item.Text);
            writer.WriteEndTag("li");
        }
        writer.WriteEndTag("ul");
        //base.Render(writer);
    }

    protected override void RenderContents(HtmlTextWriter writer)
    {
        base.RenderContents(writer);
    }

    #endregion Methods
}

用法：

<ww:UnorderedList  runat="server" ID="lstResourceIds"   CssClass="lstResourceIds" style="Height:535px;width:250px;" ItemCssClass="lstResourceIdsItem" ItemAltCssClass="lstResourceIdsAltItem" AccessKey="L" meta:resourcekey="lstResourceIds" OnClientItemClick="return false;" />

设计ASP：ListBox为UL

1 个答案: