<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title></title>     <script src="../Scripts/jquery-1.8.2.min.js"></script>        <script type="text/javascript">         $(function () {

function Task() {                 this.name = '';                 this.handler = function () {

}             }

$.fn.task = function (tasks) {                 /// <param name="tasks" type="Array" elementType="Task"></param>                 var $panel = $(                         '<div class="task-panel">' +                         '<span class="tiper item"></span>' +                         '<a href="javascript:;" class="icon item">&gt;</a>' +                         '<ul class="list item"></ul>' +                         '<div class="cleaner"></div>' +                         '</div>'),                     myoff = this.offset(),                     handler;

this.after($panel);

$panel.offset({                     top: myoff.top + this.outerHeight(false),                     left: myoff.left                 }).find('span.tiper').hover(function () {                     $(this).hide().next().show().text('>');                 }).end().find('a.icon').click(function () {                     var $me = $(this);

if ($me.text() == '>') {                         $me.text('<').next().show();                     } else {                         $me.text('>').next().hide();                     }                     return false;                 });

for (var i = 0; i < tasks.length; i++) {                     handler = tasks[i].handler;                     $('<li><a href="javascript:;">' + tasks[i].name + '</a></li>').appendTo($panel.find('ul.list')).find('a').click(handler);                 }

$(document).click(function () {                     $('.task-panel').find('a.icon, ul.list').hide().end().find('span.tiper').show();                 });             };

$('#container').task([{                 name: 'first thing',                 handler: function () {                     alert('first');                 }             },             {                 name: 'last thing',                 handler: function () {                     alert('last');                     return false;                 }             }]);         });     </script>     <style type="text/css">         #container {             height: 50px;             width: 200px;             border: 2px solid #808080;         }

/* #region task-panel */         .task-panel {             position: absolute;         }

.task-panel .item {                 float: left;             }

.task-panel .tiper {                 _font-size: 0;                 width: 10px;                 height: 2px;                 border: 1px solid #f00;             }

.task-panel .icon {                 border: 2px solid #0094ff;                 color: #808080;                 font-weight: bold;                 line-height: 12px;                 height: 12px;                 width: 12px;                 text-align: center;                 display: none;             }

.task-panel .list {                 background-color: #e9e9e9;                 padding: 5px;                 border: 2px solid #dbd9d9;                 display: none;             }

.task-panel .list li {                     list-style-type: disc;                     list-style-position: inside;                 }

.task-panel .list a {                     white-space: nowrap;                 }         /* #endregion */     </style> </head> <body>     <div id="container">some content here</div> </body> </html>

仿微软控件的html元素的更多相关文章

  1. WPF如何得到一个在用户控件内部的元素的坐标位置

    例如有这样一个用户控件: <UserControl d:DesignHeight="100" d:DesignWidth="200" ...> &l ...

  2. Wpf使用Winform控件后Wpf元素被Winform控件遮盖问题的解决

    有人会说不建议Wpf中使用Winform控件,有人会说建议使用Winform控件在Wpf下的替代方案,然而在实际工作中由于项目的特殊需求,考虑到时间.成本等因素,往往难免会碰到在WPF中使用Winfr ...

  3. VB6 仿.netWinfrom控件 Anchor属性类

    vb6中控件没有anchor与dock属性,窗体变大后原来要在resize中调整控件的move属性,否则就面目全非了.网上找到一些调整控件大小的代码,发现并不太适合自己,于是按照思路自己做了一个类似a ...

  4. 使用UI Automation实现自动化测试 --微软提供的控件Pattern

    微软提供的控件Pattern System.Windows.Automation 命名空间 System.Windows.Automation.BasePattern 为控件模式类提供基实现 Syst ...

  5. (转)[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

  6. Robotium源码解读-native控件/webview元素的获取和操作

    目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...

  7. WPF中在摄像头视频上叠加控件的解决方案

    一.视频呈现 前段时间,在一个wpf的项目中需要实时显示ip摄像头,对此的解决方案想必大家都应该知道很多.在winform中,我们可以将一个控件(一般用panel或者pictruebox)的句柄丢给摄 ...

  8. WinRT自定义控件第一 - 转盘按钮控件

    之前的文章中,介绍了用WPF做一个转盘按钮控件,后来需要把这个控件移植到WinRT时,遇到了很大的问题,主要原因在于WPF和WinRT还是有很大不同的.这篇文章介绍了这个移植过程,由于2次实现的控件功 ...

  9. dateRangePicker时间范围控件

    Github:https://github.com/dangrossman/bootstrap-daterangepicker/ 使用daterangepicker()为元素创建一个时间范围控件 &l ...

随机推荐

  1. java1234教程系列笔记 S1 Java SE chapter 02 写乘法口诀表

    一.水仙花数 1.方式一:这是我的思路,取各个位数的方式.我个人习惯于使用取模运算. public static List<Integer> dealNarcissiticNumberMe ...

  2. cxxnet在windows下配置遇到的问题

    I compiled the dmlc-core and rabbit. When I compile the new version of CXXNET, there are compile err ...

  3. 使用SQL语句 检测 MSSQL死锁

    select spid, blocked, loginame, last_batch, status, cmd, hostname, program_name from sys.sysprocesse ...

  4. hadoop2升级的那点事情(详解)

    前言 前阵子,公司的hadoop从hadoop1.02升级到hadoop2.4.1,记录下升级的步骤和遇到的问题,和大家分享,希望别人可以少走一些弯路 技术选型 当前使用版本:     apache ...

  5. collectionview使用

    创建UICollectionViewFlowLayout 对象来设置相关的布局,包括itemSize,headerReferenceSize,sectionInset.设置对应的布局大小,相关的和顶部 ...

  6. C#扇形的绘制与Hittest交互、图种制作

    C# 扇区的绘制与交互 哪位大神的杰作,代码里有,我就不废话了.源码下载方式如下. 注:将下面的图下载后,另存为.rar就可以看到图片中隐藏的代码程序了. 图种的制作 图种的目的在于隐藏文件.使得外人 ...

  7. SQL 常用的命令 （转）

    地址:http://www.cnblogs.com/longly/p/6030609.html 设置SQL语句所用的字符编码:set names UTF8; 判断指定的数据库是否存在:DROP DAT ...

  8. 基于hadoop的数据仓库工具：Hive概述

    Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的sql查询功能,可以将sql语句转换为MapReduce任务进行运行.其优点是学习成本低,可以通过类 ...

  9. eclipse项目debug方法

    属性查看代码在哪里存 本地项目启动 1,2步骤需要success

  10. IO操作

    /// <summary> /// 文件读写操作/// </summary> public partial class TestIO : DevComponents.DotNe ...