dom 按着shift多选

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
body { margin: 0; padding: 0; }
ul { padding: 0; margin: 0; }
li { list-style: none; }
a { text-decoration: none; color: #000; display: block; }
#div1 { width: 250px; height: 20px; border: 1px solid #fe6601; padding: 5px; line-height:20px; margin: 20px auto 0 auto;}
#ul1 { margin: 0 auto; width: 260px; line-height: 20px; border: 1px solid #fe6601; display: none;}
#ul1 li a { padding: 5px; }
#ul1 li a:hover { background: #fe6601; color: #fff; }
</style>
<script type="text/javascript">
window.onload = function ()
{
    var odiv = document.getElementById(‘div1‘);
    var oul = document.getElementById(‘ul1‘);
    var arr = [];

    odiv.onclick = function (ev)
    {
        var ev = ev || event;
        ev.cancelBubble = true;
        oul.style.display = ‘block‘;
    }

    for( var i = 0; i < oul.children.length; i++)
    {
        oul.children[i].onclick = function (ev)
        {
            var ev = ev || event;
            if(ev.shiftKey)
            {
                ev.cancelBubble = ‘true‘;
            }

            for(var i = 0; i < arr.length; i++)
            {
                if(this.children[0].innerHTML == arr[i])
                {
                    arr.splice(i,1);
                    odiv.innerHTML = arr.join(‘,‘);
                    bgcolor();
                    return;
                }
            }
            arr.push ( this.children[0].innerHTML);
            odiv.innerHTML = arr.join(‘,‘);
            bgcolor();

            function bgcolor ()
            {
                for(var i = 0; i < oul.children.length; i++)
                {
                    oul.children[i].children[0].style.background = ‘‘;
                    oul.children[i].children[0].style.color = ‘‘;
                }

                var arr1 = odiv.innerHTML.split(‘,‘);
                for(var i = 0; i < arr1.length; i++)
                {
                    for(var j = 0; j < oul.children.length ; j++)
                    {
                        if(oul.children[j].children[0].innerHTML == arr1[i])
                        {
                            oul.children[j].children[0].style.background = ‘#fe6601‘;
                            oul.children[j].children[0].style.color = ‘#fff‘;
                        }
                    }
                }
            }
        }
    }

    document.onclick = function ()
    {
        oul.style.display = ‘none‘;
        arr = [];
    }
};
</script>
</head>

<body>
    <div id="div1">按住shift多</div>
    <ul id="ul1">
        <li><a href="javascript:;">宋体</a></li>
        <li><a href="javascript:;">黑体</a></li>
        <li><a href="javascript:;">楷体</a></li>
        <li><a href="javascript:;">微软雅黑</a></li>
        <li><a href="javascript:;">新宋体</a></li>
        <li><a href="javascript:;">仿宋</a></li>
    </ul>
</body>
</html>
时间: 2024-11-09 02:11:25

dom 按着shift多选的相关文章

DBGrid中Shift多选

[dgTitles, dgIndicator, dgColumnResize, dgColLines, dgRowLines, dgTabs, dgRowSelect, dgConfirmDelete, dgCancelOnExit, dgMultiSelect] 相关代码 procedure TFamEditPeople.DBGrid1KeyDown(Sender: TObject; var Key: Word; Shift: TShiftState); begin FKeyShift :=

DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴沙漠化一个例子: <script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aCh

easyui datagrid shift 多选

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>IndexV6</title> <link href="/Plugs/jquery-easyui-1.4.3/them

DOM操作案例之--全选与反选

全选与反选在表单类的项目中还是很常见的,电商项目中的购物车一定少不了这个功能. 下面我只就用一个简单的案例做个演示吧. <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>商品</th> <th>

浅谈Notepad++选中行操作+快捷键+使用技巧【超详解】

Notepad++选中行操作 快捷键 使用技巧 用Notepad++写代码,要是有一些重复的代码想copy一下,还真不容易,又得动用鼠标,巨烦人.... 有木有简单的方法呢,确实还是有的不过也不算太好用. 主要是应用键盘上的 Home 键 和 End 键. 鼠标光标停留在一行的某处,按 Home 键光标会跳到行首,按End键光标会跳到行尾. 鼠标光标停留在行尾,按 Shift + Home 选中一行. 鼠标光标停留在行首,按 Shift + End 选中一行. 鼠标光标停留在类中某处,按 Shi

QTableWidget详解(样式、右键菜单、表头塌陷、多选等)

在Qt的开发过程中,时常会用到表单(QTableWidget)这个控件,网上的资料不少,但是都是最基本的,有一些比较经常遇到的问题也说得不太清楚.所以,今天就在这里总结一下! 以下为个人模拟Windows资源管理器的一个表单 一.设置表单样式 table_widget->setColumnCount(4);//设置列数 table_widget->horizontalHeader()->setDefaultSectionSize(150); table_widget->horizo

QTableWidget具体解释(样式、右键菜单、表头塌陷、多选等)

在Qt的开发过程中,时常会用到表单(QTableWidget)这个控件.网上的资料不少.可是都是最主要的.有一些比較常常遇到的问题也说得不太清楚.所以,今天就在这里总结一下. 下面为个人模拟Windows资源管理器的一个表单 一.设置表单样式 table_widget->setColumnCount(4);//设置列数 table_widget->horizontalHeader()->setDefaultSectionSize(150); table_widget->horizo

DOM知识

开场白: 到底啥叫DOM呢?为啥DOM会被这么多人赋予javascript核心知识点的至高荣誉呢?DOM到底难么?小卖部安全套为何屡遭黑手?女生宿舍内裤为何频频失窃?连环强奸母 猪案,究竟是何人所为?老尼姑...咳咳,串了,现在来看看DOM到底是什么鬼! 答:“DOM不是鬼!!!他是javascript的 Document Object Model(文档对象模型)”  BUT!!我们更习惯的是称其为“DOM节点” 开始——最常规的认识: 首先,简单介绍一件事情: javascript是基于对象的

jQuery 获取多选框值,以及多选框中文的函数实践 by FungLeo

jQuery 获取多选框值,以及多选框中文的函数实践 by FungLeo 前言 本方法是我刚在项目中用的方法.可能有更加好的方法.但我不清楚. 搜索了几个方法,好像都有错误,不知道是别人的错误,还是我的错误.因此,我自己构造了以下方法,便于我在实践中使用. 分享出来,有谬误请大家指出. DOM结构 我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述. <label class="input_checkbox"> <input type="c