jQuery技术

JavaScript小技巧 tips(2)

字号+ 作者:H5之家 来源:H5之家 2017-09-12 09:41 我要评论( )

8完全禁止使用后退键 下面的技巧放在页面中,则可以防止用户点后退键,这在一些情况下是需要的。代码如下: script type=text/javascript window.history.forward(); function noBack() { window.history.forward()

8 完全禁止使用后退键
下面的技巧放在页面中,则可以防止用户点后退键,这在一些情况下是需要的。代码如下:
<script type="text/javascript"> 
    window.history.forward(); 
    function noBack() { window.history.forward(); } 
</script> 
</head> 
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload=""> 

9 删除用户多选框中选择的项目
下面提供的技巧,是当用户在下拉框多选项目的时候,当点删除的时候,可以一次删除它们。代码如下:
function selectBoxRemove(sourceID) { 
    //获得listbox的id 
    var src = document.getElementById(sourceID); 
    //循环listbox 
    for(var count= src.options.length-1; count >= 0; count--) { 
         //如果找到要删除的选项,则删除 
        if(src.options[count].selected == true) { 
                try { 
                         src.remove(count, null);                            
                 } catch(error) {                            
                         src.remove(count); 
                } 
        } 
    } 
}

10 Listbox中的全选和非全选
如果对于指定的listbox,下面的方法可以根据用户的需要,传入true或false,分别代表是全选 listbox 中的所有项目还是
非全选所有项目。代码如下:
function listboxSelectDeselect(listID, isSelect) { 
    var listbox = document.getElementById(listID); 
    for(var count=0; count < listbox.options.length; count++) { 
            listbox.options[count].selected = isSelect; 
    } 
}

11 在Listbox中项目的上下移动
下面的代码,给出了在一个listbox中如何上下移动项目。
function listbox_move(listID, direction) {   
    var listbox = document.getElementById(listID); 
    var selIndex = listbox.selectedIndex;   
    if(-1 == selIndex) { 
        alert("Please select an option to move."); 
        return; 
    }    
    var increment = -1; 
    if(direction == 'up') 
        increment = -1; 
    else 
        increment = 1;   
    if((selIndex + increment) < 0 || 
        (selIndex + increment) > (listbox.options.length-1)) { 
        return; 
    }    
    var selValue = listbox.options[selIndex].value; 
    var selText = listbox.options[selIndex].text; 
    listbox.options[selIndex].value = listbox.options[selIndex + increment].value 
    listbox.options[selIndex].text = listbox.options[selIndex + increment].text    
    listbox.options[selIndex + increment].value = selValue; 
    listbox.options[selIndex + increment].text = selText;    
    listbox.selectedIndex = selIndex + increment; 

//.. 
//..   
listbox_move('countryList', 'up'); //move up the selected option 
listbox_move('countryList', 'down'); //move down the selected option

12 在两个不同的Listbox中移动项目
如果在两个不同的Listbox中,经常需要在左边的一个Listbox中移动项目到另外一个Listbox中去。下面是相关代码:
function listbox_moveacross(sourceID, destID) { 
    var src = document.getElementById(sourceID); 
    var dest = document.getElementById(destID);    
    for(var count=0; count < src.options.length; count++) {    
        if(src.options[count].selected == true) { 
                var option = src.options[count];    
                var newOption = document.createElement("option"); 
                newOption.value = option.value; 
                newOption.text = option.text; 
                newOption.selected = true; 
                try { 
                         dest.add(newOption, null); //Standard 
                         src.remove(count, null); 
                 }catch(error) { 
                         dest.add(newOption); // IE only 
                         src.remove(count); 
                 } 
                count--; 
        } 
    } 

//.. 
//..   
listbox_moveacross('countryList', 'selectedCountryList'); 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 15个强大的jQuery开发技巧和心得

    15个强大的jQuery开发技巧和心得

    2017-09-08 15:00

  • 将jQuery用得更高效的22条技巧

    将jQuery用得更高效的22条技巧

    2017-09-08 15:00

  • 9.1 技巧:搭建jQuery Mobile基础页面

    9.1 技巧:搭建jQuery Mobile基础页面

    2017-09-06 14:50

  • 黑马程序员php培训:javascript+jquery九天课程第九天(8)

    黑马程序员php培训:javascript+jquery九天课程第九天(8)

    2017-09-04 09:04

网友点评