<!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. int.Parse()、int.TryParse()和Convert.ToInt32()的区别

    1:int.Parse(一个参数)        此参数必须满足: 1 只能是字符串: 2 只能是 “整型” 字符串,即各种整型ToString()之后的形式,也不能为浮点型. 2:int.TryPa ...

  2. jQuery获取多种input值的方法

    1 if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 name即控件name属性,va ...

  3. mysql总结

    //查询日期之前的差距     select user_name ,    from_unixtime(user_lastlogin_time),now() ,        year(now())- ...

  4. LeetCode---Binary Search

    475. Heaters 思路:每趟循环查找离房子最近的热水器,计算距离,最后取最大距离 public int findRadius(int[] houses, int[] heaters) { Ar ...

  5. 四种方式实现SQLServer 分页查询

    SQLServer 的数据分页: 假设现在有这样的一张表:CREATE TABLE test( id int primary key not null identity, names varchar( ...

  6. 有wsdl地址生成客户端调用

    新建Java Project 1.项目名称:HelloWorldClient 2.建好的项目 3.生成客户端 选择HelloWorldClient 填写wsdl地址(参考:myeclipse构建web ...

  7. 项目管理-Kick OFF 简称KO

    KO的内容包括以下几个过程: 1.项目背景 我们项目在哪里?说过去,做项目之前的“悲惨境地”,明确问题根源在哪里,明白为什么要做这个项目. 2.项目意义.目的与目标 我们项目去哪里?说将来,项目完成之 ...

  8. 北京动软VAR团队的HoloLens开发教程最新搜罗整理

    日前,微软为Windows开发者带来Win10版HoloLens全息眼镜模拟器SDK开发套件工具,借助最新发布的VS2015 Update2和Win10 SDK工具,直接在PC平台上开发和调试原生Wi ...

  9. MyBatis入门学习教程-解决字段名与实体类属性名不相同的冲突

    在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况下的如何解决字段名与实体类属性名不相同的冲突. 一.准备演示需要使用的表和数据 CREATE TAB ...

  10. Arrays和Collection之间的转换

    1.将数组转换成固定大小的列表: public static <T> List<T> asList(T... a)参数 T... a:数组元素 返回值 List<T> ...