在實現(xiàn)程序的修改模塊時,要在頁面端檢查用戶是否修改過數(shù)據(jù),以便提醒用戶及時保存修改后的數(shù)據(jù)。 實現(xiàn)要求: 判斷用戶是否修改了輸入的內(nèi)容,要能判斷input中的checkbox,text,radio等,不知道會多少個input,也不知道input的ID和name,要在客戶端判斷是否修改,不能產(chǎn)
生提交。還要同時滿足IE和firefox兩種環(huán)境。也要支持master和content頁的使用。 解決方案; 處理思路:在頁面加載時記錄所有的input的值或狀態(tài),如果要求在用戶進行修改操作時立即調(diào)整控件狀態(tài),則在數(shù)據(jù)區(qū)div上的onclick和onkeypress事件里調(diào)用檢查數(shù)據(jù)
是否改變的函數(shù),并設(shè)置相應(yīng)控件的狀態(tài)(用ha_setch())。如果是在提交或用戶手動控制檢查過程時,則在相應(yīng)的操作事件中調(diào)用檢查數(shù)據(jù)是否改變(例在button的onclick
()中使用ha_checkin()控制提交)。 以下是實現(xiàn)代碼 var ha_last=new Array;//定義一個全局的空對象,存放所有的初始值。 function ha_get()//讀取初始值 { var ha_input = document.getElementsByTagName("input"); for (var i=0;i<ha_input.length;i++) { if (ha_input[i].type=="password"){ ha_last.push(ha_input[i].value);}//根本頁面需要設(shè)置type的值和對象屬性 if (ha_input[i].type=="radio") {ha_last.push(ha_input[i].checked);}//要保證檢查的范圍是否準確 } } window.onload=ha_get;//綁定讀取初始值的函數(shù) function ha_checkin()//檢查新的輸入值和初始值是否相等。返回判斷結(jié)果。true為沒有發(fā)生修改,false為有修改。 { var ha_now=new Array; var ha_input = document.getElementsByTagName("input"); for (var i=0;i<ha_input.length;i++) { if (ha_input[i].type=="password"){ ha_now.push(ha_input[i].value);}//根本頁面需要設(shè)置type的值和對象屬性。 if (ha_input[i].type=="radio") {ha_now.push(ha_input[i].checked);}//也要保證和ha_get()中檢查的標簽相一致 } if (ha_now.toString()==ha_last.toString())//沒修改 {return true;} else//有修改 {return false;} } function ha_setch(){//設(shè)置相應(yīng)的控件狀態(tài) if (ha_checkin())//沒有變化 //改變控件的顯示和功能狀態(tài) else//有變化 //改變控件的顯示和功能狀態(tài) }
做了適當?shù)男薷摹W詈笤赽utton里面onclick直接調(diào)用
var ha_last=new Array;//定義一個全局的空對象,存放所有的初始值。 function ha_get()//讀取初始值 { var ha_input = document.getElementsByTagName("input"); ha_last.push($("#select").val());//采用jquery獲取select 選擇的值 for (var i=0;i<ha_input.length;i++) { if (ha_input[i].type=="text"){ ha_last.push(ha_input[i].value);}//根本頁面需要設(shè)置type的值和對象屬性 } } window.onload=ha_get;//綁定讀取初始值的函數(shù) function ha_checkin(action)//檢查新的輸入值和初始值是否相等。返回判斷結(jié)果。true為沒有發(fā)生修改,false為有修改。 { if(action=="update"){ var ha_now=new Array; var ha_input = document.getElementsByTagName("input"); ha_now.push($("#select").val()); for (var i=0;i<ha_input.length;i++) { if (ha_input[i].type=="text"){ ha_now.push(ha_input[i].value);}//根本頁面需要設(shè)置type的值和對象屬性。 } if (ha_now.toString()==ha_last.toString())//沒修改 { alert("沒有修改"); return false; } else//有修改 { // return true; } } }
來自:http://www.javaeye.com/topic/304818
jQuery 是我最喜歡的一個Javascript框架,下表中包含了240+可以為jQuery愛好者們使用的插件。我斷定一定還有下表沒有包括的,如果你還知道其他的好東西,歡迎與大家分享。
Ajax File Upload jQUploader Multiple File Upload plugin jQuery File Style Styling an input type file Progress Bar Plugin
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
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)
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
jQuery UI Datepicker jQuery date picker plugin jQuery Time Picker Time Picker ClickPick TimePicker Farbtastic jQuery Color Picker Plugin Color Picker by intelliance.fr
jQuery Star Rating Plugin jQuery Star Rater Content rater with asp.net, ajax and jQuery Half-Star Rating Plugin
Autocomplete Box 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
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
jMedia - accessible multi-media embedding JBEdit - Ajax online Video Editor jQuery MP3 Plugin jQuery Media Plugin jQuery Flash Plugin Embed QuickTime SVG Integration jQuery Multimedia Portfolio jQuery YouTube Plugin
ThickBox jQuery lightBox plugin jQuery FancyBox jQuery Multimedia Portfolio 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
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
Tetris with jQuery jQuery Chess Mad Libs Word Game jQuery Puzzle jQuery Solar System (not a game but awesome jQuery Stuff) jQuery Memory
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
Flot jQuery Wizard Plugin jQuery Chart Plugin Bar Chart Accessible Charts using Canvas and jQuery
jQuery Corner jQuery Curvy Corner Nifty jQuery Corner Transparent Corners jQuery Corner Gallery Gradient Plugin
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 Chili jQuery code highlighter plugin jScroller
jQuery Plugin - Tooltip jTip - The jQuery Tool Tip clueTip BetterTip Flash Tooltips using jQuery ToolTip
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
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 CodaSlider
UI/Draggables EasyDrag jQuery Plugin jQuery Portlets jqDnR - drag, drop resize Drag Demos
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
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
jQuery Impromptu jQuery Confirm Plugin jqModal SimpleModal
jQuery Style Switcher JSS - Javascript StyleSheets jQuery Rule - creation/manipulation of CSS Rules jPrintArea
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