`
pumaboyd
  • 浏览: 248648 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ul,li控件的封装(menu,list列表)

阅读更多

控件本身没有什么技术含量。只是一个简单的封装。
新项目中前端开发人员专门负责编写html代码。整体看过代码,有很多地方前端人员都使用了ul、li的布局。像Menu、图片列表、商户列表也都是ul、li的形式。所以就写这了个通用的控件。
主要的思路

  1. 尽量减少后端开发人员HTML代码的拼接过程,重点关心数据的读取。
  2. 从HtmlGenericControl继承,这样可以利用很多现有的属性,直接通过base(”ul”)、base(”li”)完成tag的定义,摈弃了原来从webcontrol和control中继承的做法
  3. 从HtmlGenericControl继承,如果有特殊需求的ul、li也肯定能满足需求。我的目的是扩展了几个属性,方便使用和构造相应的数据。
  4. 利用HtmlGenericControl,我不用对CSS,title是否为空进行判断,没有相应了属性控件自然就不输出了。这比手动拼接HTML有强势,少些了很多if-else。
  5. 界定原子类型操作,通过构造函数来保证相关属性的联动修改,所以在licontrol中多了几个构造函数和
    public string Value { get; private set; }类型的属性

总结下来,在今后的代码开发中,尝试通过HtmlGenericControl、HtmlAnchor等去处理html结构。

发现几个问题

  1. 从HtmlGenericControl继承,IDE不能自动发现这个控件。不能像其他控件那样拖放。对我们没什么影响,因为我们开发中就不用拖放的这种操作
  2. 为了在WEB上显示,继承HtmlGenericControl你需要在继承的类中也要有两个相应的构造函数,我暂时不明白原因。

生成一个Menu DEMO:
ULControl1.SelectedValue = “webmy”;
ULControl1.SelectedValueCSS = “red”;
ULControl1.LIItem.Add(new LIItem(”商户1″, “345678″));
ULControl1.LIItem.Add(new LIItem(”商户2″, “22232″));
ULControl1.LIItem.Add(new LIItem(”商户3″, “833443″));
ULControl1.LIItem.Add(new LIItem(”商户4″, “44454″, “blue”));
ULControl1.LIItem.Add(new LIItem(”pumaboyd”, “webmy”,”http://www.pumaboyd.com”,”hi”));

下载控件:ULControl

分享到:
评论

相关推荐

    ul li 换色 li 列表布局隔行背景颜色

    ul li 换色 li 列表布局隔行,color from red tabs 背景颜色

    ul的li样式

    首先,`<ul>`元素用来创建一个无序的项目列表,每个列表项则由`<li>`元素定义。默认情况下,浏览器会为`<ul>`添加一个左对齐的项目符号(通常是圆点),而`<li>`则会换行显示。然而,这仅仅是最基本的表现形式,我们...

    jquery实现ul_li菜单展开收起效果

    在网页设计中,导航菜单是不可或缺的部分,而`ul`和`li`元素通常是构建这种菜单的基础。`jQuery`作为一种强大的JavaScript库,提供了简洁的API,使得实现`ul_li`菜单的展开收起效果变得非常简便。这个效果常用于创建...

    设置ul li内容自动上下滚动

    可以设置<li>的内容上下滚动,很好的东西哦

    ul li实现表格样式

    使用ul li 标签实现的表格样式,可代替table标签,避免搜索引擎收录不了表格中的关键字

    jquery 折叠ul li

    ### 使用jQuery实现ul li列表的折叠效果 在前端开发中,为了提高用户体验并优化界面布局,经常需要实现一些动态效果,比如菜单项的展开与折叠。这种效果可以通过jQuery轻松实现。接下来,我们将详细探讨如何利用...

    嵌套ul li 实现简单的二级菜单

    `<li>`则代表列表项,每个菜单项都应包含在一个`<li>`中。对于二级菜单,主菜单项下的子菜单会再嵌套一个`<ul>`,如下所示: ```html <ul class="main-menu"> <li> 主菜单1 <ul class="sub-menu"> <li>子菜单1-...

    ul li表格.htm

    ul li表格.htm ul li表格.htm ul li表格.htm

    JS遍历ul下的li点击弹出li的索引的实现方法

    <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看...

    CSS的ul和li实现横向排列和去掉li的点

    今天做网页是老是不懂怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,做个笔记: 复制代码代码如下: #ul { float:left; } #ul li { float:left; list-style:none; } 顺便拓展一下li的list-style: ...

    DIV CSS布局教程:应用ul、li实现表格形式

    标题中的“DIV CSS布局教程:应用ul、li实现表格形式”指的是使用HTML的无序列表(`<ul>`)和列表项(`<li>`)元素,通过CSS样式来模拟传统HTML表格(`<table>`)的效果。这种方法常用于创建灵活、响应式的布局,...

    jsp ul 下的li 标签循环滚动

    在`jsp`页面中,我们经常会遇到需要实现元素动态效果的需求,例如`ul`(无序列表)下的`li`(列表项)标签进行循环滚动。这种效果可以增强用户界面的交互性和吸引力,常见于新闻滚动、公告栏或者菜单导航等场景。 ...

    ul li 模拟省市区下拉框

    "ul li 模拟省市区下拉框"是一种常见且实用的技术,它利用HTML的`<ul>`(无序列表)和`<li>`(列表项)元素来构建一个可交互的选择器,解决了原生`<select>`标签在样式自定义和美观上的局限性。 1. **使用场景**: ...

    div ul li排列图片的样式

    `div`常作为容器,`ul`和`li`则常用于创建无序列表,这里可能是指将一系列的图片以列表形式展示。 首先,我们创建一个基本的HTML结构: ```html <div class="image-list"> <ul> <li>...

    用“ul li”及css制作韩国风格菜单.rar

    首先,`<ul>`(无序列表)和`<li>`(列表项)是HTML中用于创建列表的标准元素。在构建菜单时,`<ul>`通常作为容器,包裹一系列的`<li>`,每个`<li>`代表菜单中的一个选项。下面是一个基础的HTML结构示例: ```html ...

    jQuery动态删除CSS UL LI中的一个列表项.rar

    本文将详细讲解如何使用jQuery动态删除CSS中的`UL`和`LI`列表项,以及如何实现列表的自动对齐,从而营造出删除列表项的视觉效果。 首先,`UL`和`LI`是HTML中用于创建无序列表的元素。在CSS中,可以通过选择器来定义...

    使用Ul标签控制的菜单(menu)

    NULL 博文链接:https://jhyimu2005.iteye.com/blog/693796

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用.doc

    它使用`<ul>`标签作为容器,每个列表项由`<li>`标签包裹。默认情况下,列表项前会显示一个圆点,但可以通过CSS样式进行自定义。例如: ```html <ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul> ```...

    css中使用ul li ul li ul li ul li 实现四层级联菜单

    对于ul列表,我们使用了`list-style-type:none;`来去掉默认的小圆点。同时,对于第一级菜单项,当鼠标悬停在其上时,我们希望显示下一级菜单,并通过相对定位和`left`、`top`属性来调整显示位置。 对于第三级菜单的...

Global site tag (gtag.js) - Google Analytics