<!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. js实现光标位置置后

    //定位div(contenteditable = "true"),上传图片后,光标移到输入框后面 function po_Last_Div(obj) { if (window.g ...

  2. 利用SPM工具运行自己创建的小组件（使用common-model向后台接口请求数据）

    步骤如下: 1.安装依赖:spm install -e 2.编译:spm build (编译好的东西会放在trunk-dist里面) 3.发布:spm app -d (会出来一个export端口,一般 ...

  3. web编程

    展示层 html/css/javascript/jquery/jquery easyUI/ajax bootstrap web层 varnish/haproxy/squid----lvs/keepal ...

  4. os and shutil

    # os 模块 os.sep 可以取代操作系统特定的路径分隔符.windows下为 '\\'os.name 字符串指示你正在使用的平台.比如对于Windows,它是'nt',而对于Linux/Unix ...

  5. PHP 模拟POST请求

    /** * 模拟post进行url请求 * @param string $url * @param array $post */ function request_post($url, $post = ...

  6. flex 布局 初次接触这个好使又不是特别好用的布局方法

    刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而, ...

  7. 通过Daffodil for VS使VS2010的IDE可以用VC6 VC7.1 VC9等编译器进行项目编译

    本文内容中的部分资料和知识来源于网络,具体引用出处不明. VS的IDE从VC6到VS2010的变化可谓是天翻地覆,最新的VS2010有一个特性就是支持多显示器开发,这无疑为我们的开发带来很大的便利. ...

  8. Java单例模式实现（线程安全）

    package com.javaee.corejava; /** * 线程安全的单例模式 * @author miaoyf * */ public class Singleton { /** * 私有 ...

  9. ［转］细说Redis监控和告警

    原文  https://zhuoroger.github.io/2016/08/20/redis-monitor-and-alarm/? 对于任何应用服务和组件,都需要一套完善可靠谱监控方案. 尤其r ...

  10. mysql 查询数据时按照A-Z顺序排序返回结果集

    mysql 查询数据时按照A-Z顺序排序返回结果集 $sql = "SELECT * , ELT( INTERVAL( CONV( HEX( left( name, 1 ) ) , 16, ...