前端之路 » js

延时弹出层控制

admin — Tue, 01 Mar 2011 02:14:05 +0000




	
	延时弹出层控制
        

        


        文字1 这个都是胡乱写的
        文字2 这个都是胡乱写的
        文字3 这个都是胡乱写的
        
            弹出层的内容
            弹出层的内容
            弹出层的内容
            弹出层的内容

直接使用网页进行打印

admin — Tue, 14 Sep 2010 08:03:53 +0000

网页打印内容有很多便利的地方，而且不需要安装其他软件

会打印机页眉与页脚并且在有些在程序中不好去掉.

用a模拟submit按钮事件

admin — Thu, 02 Sep 2010 08:47:53 +0000

优点：样式可控制性强，可以加不同的状态，兼容ie6. 可扩展性好

缺点: 需要增加js，如果禁用ＪＳ可能不能使用. 需要多增加一个a标签。






提交提交

如果直接隐藏在from 中有多个表单无件时无效，求解


.btn_a_submit{ position:absolute; left:-1000px; top:0px;}

js调试函数

admin — Tue, 23 Feb 2010 09:13:34 +0000

参考php的debug函数修改了一下JS版的。 firebug 下使用控制台 ie使用 alert弹出

/**
 * 内部调试
 **/
function debug(v){
    if(window.console && window.console.log){
        window.console.log(v);
    }else{
        alert(v);
    }
}

同事提供的题目(Taobao)

admin — Sat, 10 Oct 2009 08:10:23 +0000

alert(toRGB("#0000FF"));     //返回rgb(0,0,255)
alert(toRGB("#00F"));     //返回rgb(0,0,255)
alert(toRGB("#FF0000"));     //返回rgb(255,0,0)
alert(toRGB("taobao"));     //返回rgb(taobao)
alert(toRGB("#G00"));     //返回rgb(#G00)

function toRGB(color){

    //第有一字符有#号
    if(color.indexOf('#')==0){

        //判断长度
        if(color.length==4){
            //取出字母
            r = color.match(/([\da-z])/ig);
        }else{
            //取出字母
            r = color.match(/([\da-z]{2})/ig);
        }
        //返回
        return 'rgb('+formatHEX(r) +')';
    }else{
        return 'rgb('+color+')';
    }
}
//转化色彩数组转为10进制
function formatHEX(x){

    var html=[];
    for(i in x){
        html[i] = parseInt(x[i], 16);
        if(isNaN(html[i])){
            return '#'+x.join('');
        }
    }
    return html.join(',');
}

编码问题导致Javascript报错.

admin — Thu, 20 Aug 2009 03:31:22 +0000

问题: 报JS标签没有关闭.
原因: JS没有修改过且线上版本也是正常的,但在测试环境下.

解决: 跟踪了很久, 变量, 常量, 数组是正常了. 后来看到页面上JS输出的内容乱码.
这里想到可能是页面编码与 JS编码不同导致的问题.

程序的页面是GB2312的, 但我们写的JS都是UTF8的…

jquery 处理表单元素得到焦点与失去焦点

admin — Fri, 19 Jun 2009 05:35:26 +0000

	/*处理表单元素得到焦点与失去焦点*/
	jQuery('.input_text').focus(function(){
		var i = jQuery(this).attr('init_val');
		var t = jQuery(this).attr('user_val');
		if(i==undefined){
			//记录初始值
			jQuery(this).attr('init_val',jQuery(this).val());
			jQuery(this).val('');
		}else if(i==jQuery(this).val()){
			jQuery(this).val('');
		}else{
			jQuery(this).val(t);
		}
		jQuery(this).css('color','#333');
	}).blur(function(){	

		i = jQuery(this).attr('init_val');	

		if(jQuery(this).val()==''|| jQuery(this).val()==i){
			jQuery(this).css('color','#bbb');
			jQuery(this).val(jQuery(this).attr('init_val'));
		}else{
			jQuery(this).attr('user_val',jQuery(this).val());
			jQuery(this).css('color','#333');
		}

	});

用于解决iframe自适应高度

admin — Thu, 18 Jun 2009 08:43:55 +0000

function reinitIframe(){
	var iframe = document.getElementById("frame_content");
	try{
		var bHeight = iframe.contentWindow.document.body.scrollHeight;
		var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
		var height = Math.max(bHeight, dHeight);
		iframe.height =  height;
	}catch (ex){}
}
window.setInterval("reinitIframe()", 1000);

在新浪站上看到的不错，收藏下.

目前我们自己常用的

调用页面.

被调用页面

        window.onload = function(){
                var height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
                parent.call_frame(height)
            }

今天写的一个练习的js类模式

admin — Wed, 10 Jun 2009 11:36:30 +0000

suspendcode=""
document.write(suspendcode);

var hp = {

lastScrollY : 0, 

byID : function(_id){ return document.getElementById(_id);},

init : function(id){
var st = document.documentElement.scrollTop || document.body.scrollTop;
percent=.1*(st-this.lastScrollY);
if(percent>0){
percent=Math.ceil(percent);
}else{
percent=Math.floor(percent);
}

this.byID(id).style.top=parseInt(this.byID(id).style.top)+percent+"px";
this.lastScrollY=this.lastScrollY+percent;
return id;
},

generate : function(){

},

start : function(id){
window.setInterval("hp.init(’"+id+"’)",1);
} 

}; 

#hp.start(’lovexin1′);

强烈推荐：240多个jQuery插件

admin — Thu, 19 Feb 2009 07:37:58 +0000

概述
jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插件列表的文章，特推荐如下。

文件上传(File upload)
Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

表单验证(Form Validation)
jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

表单－选取框(Form – Select Box stuff)
jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).

表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)
jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.

时间、日期和颜色选取(Time, Date and Color Picker)
jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.

投票插件(Rating Plugins)
jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.

搜索插件(Search Plugins)
jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.

编辑器(Inline Edit & Editors)
jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.

多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)
jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.

图片(Photos/Images/Galleries)
ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.

Google地图（Google Map）
jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.

游戏(Games)
Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).

表格等(Tables, Grids etc.)
UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.

统计图(Charts, Presentation etc.)
jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.

边框、圆角、背景(Border, Corners, Background)
jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.

文字和超链接(Text and Links)
jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin.
LinkLook – a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.

鼠标提示（Tooltips）
jQuery Plugin – Tooltip.
jTip – The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.

菜单和导航(Menus, Navigations)
jQuery Tabs Plugin – awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu – Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.

http://stilbuero.de/jquery/tabs_3/

幻灯、翻转等(Accordions, Slide and Toggle stuff)
jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion – a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo – Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.

拖放插件(Drag and Drop)
UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR – drag, drop resize.
Drag Demos.

XML XSL JSON Feeds
XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier – Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite – multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.

浏览器(Browserstuff)
Wresize – IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber – removes the dotted line onfocus from links.
jQuery Perciformes – the entire suckerfish familly under one roof.
Background Iframe.
QinIE – for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.

对话框、确认窗口(Alert, Prompt, Confirm Windows)
jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.

CSS
jQuery Style Switcher.
JSS – Javascript StyleSheets.
jQuery Rule – creation/manipulation of CSS Rules.
jPrintArea.

DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）
FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata – extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat – periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it – display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy – awesome plugin.
Effect Delay Trick.
jQuick – a quick tag creator for jQuery.
Metaobjects.
elementReady.

英文：http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/