<!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. A 最熟悉的陌生人 (纪念当年就读的梅州市江南高级中学)

    最熟悉的陌生人 作者:张慧桥 “枪与玫瑰” 就象瘟98有时会死机天有时会下雨枪有时会走火美国战机有时会掉下来那样,我上网聊天也只是个偶然. 都是栀子那死丫头惹的祸.让每天都觉得是情人节的我那天我自己都 ...

  2. GDI+ 操作TIFF ccitt t.6 压缩

    Bitmap Bi=new Bitmap("C:\img.tif"); SaveFileDialog sfdlg = new SaveFileDialog(); sfdlg.Fil ...

  3. 山东省选 郁闷的小J

    小J是国家图书馆的一位图书管理员,他的工作是管理一个巨大的书架.虽然他很能吃苦耐劳,但是由于这个书架十分巨大,所以他的工作效率总是很低,以致他面临着被解雇的危险,这也正是他所郁闷的. 具体说来,书架由 ...

  4. http load 的使用以及参数解释

    http load 的使用以及参数解释   1.参数含义 参数     全称      含义 -p        -parallel     并发的用户进程数.-f        -fetches   ...

  5. Install Houdini 12.5 x64 in CentOS 7

    Thanks for Must(QQ ID)'s big help for installing Houdini in CentOS7. - download HOUDINI_FX_V12.5.371 ...

  6. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  7. 磁盘的读写-想起了SGA PGA DBWR LGWR...

    衡量性能的几个指标的计算中我们可以看到一个15k转速的磁盘在随机读写访问的情况下IOPS竟然只有140左右,但在实际应用中我们却能看到很多标有5000IOPS甚至更高的存储系统,有这么大IOPS的存储 ...

  8. servlet filter和springMVC拦截器的区别

    参考 http://blog.csdn.net/ggibenben1314/article/details/45341855

  9. Django 浏览页面点击计数（通用视图）

    通常情况下在Views.py中直接写一个视图函数就可以了,由于每次点出详情时都会经视图函数处理, 所以可以在此视图函数中对浏览次数进行"+1" 操作. 对应的url:url(r'^ ...

  10. PlayerPrefs游戏存档

    本地存储.相当于Flash里面的SharedObject. Android位置:机器自身存储的(非扩展卡)/data/data/appname/shared_prefs/{AppName}.xml,如 ...