<!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. Python单元测试和Mock测试

    单元测试 测试可以保证你的代码在一系列给定条件下正常工作 测试允许人们确保对代码的改动不会破坏现有的功能 测试迫使人们在不寻常条件的情况下思考代码,这可能会揭示出逻辑错误 良好的测试要求模块化,解耦代 ...

  2. shiro 自动登录

    1.出现的错误:did not match the expected credentials---密码不匹配,后来自己写密码验证,其实作用不大: 配置 <!-- Shiro权限过滤过滤器定义 - ...

  3. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  4. 结构体struct 与 联合union

    1.C语言中的结构体 1.1 定义 结构体是由一系列相同或不同类型的变量组成的集合. struct 结构体名{               //struct为关键字,“结构体名”为用户定义的类型标识. ...

  5. linux新增用户并增加sudo权限

    创建用户.设置密码: useradd testuser 创建用户testuserpasswd testuser 给已创建的用户testuser设置密码 增加sudo权限: #vi /etc/sudoe ...

  6. ajax的两种方式

    get:var ajax=new XMLHttpRequest();ajax.open('get','__URL__/check_all?val='+check);ajax.send();ajax.o ...

  7. redis基础学习(不定期更新)

    redis简介 redis是Remote Dictionary Server(远程数据服务)的缩写 数据模型是key-value,是用C编写的 数据类型有string list hash set so ...

  8. 【摘】Mysql备份还原数据库之mysqldump实例及参数详细说明

    原文http://www.cnblogs.com/xuejie/archive/2013/01/11/2856911.html   我们在运营项目的过程中肯定会遇到备份数据库,还原数据库的情况,我们一 ...

  9. block使用小结、在arc中使用block、如何防止循环引用

    引言 使用block已经有一段时间了,感觉自己了解的还行,但是几天前看到CocoaChina上一个关于block的小测试主题: [小测试]你真的知道blocks在Objective-C中是怎么工作的吗 ...

  10. oracle免客户端安装 plsql连接

    开发的过程中,往往没有必要在自己的电脑上安装oracle,也实在太大了. 这里介绍一种使用plsql连接oracle的方法,类似于navicat之连接mysql. 先下载plsql,进行安装,这里提供 ...