系統(tǒng)平臺前端設計編碼規(guī)范_第1頁
系統(tǒng)平臺前端設計編碼規(guī)范_第2頁
系統(tǒng)平臺前端設計編碼規(guī)范_第3頁
系統(tǒng)平臺前端設計編碼規(guī)范_第4頁
系統(tǒng)平臺前端設計編碼規(guī)范_第5頁
已閱讀5頁，還剩34頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

系統(tǒng)平臺前端設計編碼規(guī)范HTML,CSS,JavaScript對系統(tǒng)平臺中涉及到前端設計及編碼部分的約定和建議weiran2010-2-5

目錄1. 概述 61.1. 目的 61.2. 范圍 61.3. 適用角色 61.4. 強制性 61.5. 文檔樣式說明 62. HTML設計編碼規(guī)范 62.1. XHTML介紹 62.2. XHTML必須遵循的規(guī)則 7XHTMLDTD定義了強制使用的HTML元素 7XHTML元素必須被正確的嵌套 7XHTML元素必須被關閉 7標簽中的id名稱在同一個文檔內必須唯一 8標簽名必須用小寫字母 8XHTML文檔必須擁有一個根元素 8屬性名稱必須小寫 8屬性值必須加引號 8屬性不能簡寫 9用Id屬性代替name屬性 92.3. 常用HTML標簽編碼規(guī)則 9表格table 9表單form 10標記label 10文本框、文本域inputtexttextarea 11單選、復選框inputradiocheckbox 11下拉框select 112.4. HTML標簽推薦使用表 113. CSS設計編碼規(guī)范 113.1. CSS介紹 113.2. CSS必須遵循的規(guī)則 12CSS樣式應用 12CSS命名規(guī)則 12CSS目錄文件規(guī)則 12CSS注釋 133.3. 推薦CSS編碼規(guī)則 134. JavaScript設計編碼規(guī)范 144.1. JavaScript的實現(xiàn)組成 144.2. JavaScript必須遵循的規(guī)則 14JavaScript編碼注意 14JavaScript兼容性 15JavaScript與HTML代碼分離 15JavaScript目錄文件規(guī)則 164.3. 推薦的JavaScript插件 16在線HTML編輯器 16樹形結構 16日期選擇 16表單驗證 17cookie操作 19地圖導航 20彈出窗口 21整體界面 214.4. 推薦的JavaScript公共函數(shù) 21日期格式化 21金額格式化 21金額大小寫 21數(shù)字計算 21

【內部資料注意保密】版本：v1.0武漢市精建工程科技有限公司信息部二〇一〇年二月

系統(tǒng)平臺前端設計編碼規(guī)范概述目的為了使前端設計及編碼標準化和模塊化，從而提高工作效率和資源利用率，增加代碼的可閱讀性、重用性和繼承性而編寫。范圍適用于本部門所有研發(fā)項目的前臺設計規(guī)范和指導，重點傾向于標準和表現(xiàn)。適用角色頁面前臺工程師/網頁設計師強制性前臺工程師在前臺界面設計中推薦按照此規(guī)范實施。前臺涉及技術主要分為html、CSS和JavaScript。文檔樣式說明斜體+粗體字：表示需要重點關注的內容。必須：表示在設計編碼時一定要進行的事項。禁止：表示在設計編碼時一定不能進行的事項。建議：表示在設計編碼時可以進行的事項，但根據實際情況可以進行調整。開發(fā)人員：默認為jsp開發(fā)人員，非專注前端的前端開發(fā)人員。公司系統(tǒng)平臺前端常用規(guī)范結構作為內部管理的BS系統(tǒng)，常見瀏覽界面如下：作為jsp開發(fā)人員，僅需關心右側紅框中的界面內容，以上界面為標準瀏覽頁面，主要分為：題頭區(qū)域；即上圖部分，該部分為裝飾器自動裝飾，無需開發(fā)人員關注。搜索區(qū)域；即上圖部分；需標識為【查詢條件】；查詢條件及輸入框需保證在一行，否則需另起一行；為保證以上效果在不同分辨率下都能正常顯示，需使用span標簽包裹查詢語句，代碼如下：<td><span><labelfor="cxtj"}>查詢條件1</label><inputtype='text'name="cxtj"id="cxtj"></span></td>注：以上代碼僅展示span標簽包裹代碼，確保其不會換行的css代碼如下，且應寫入公共css文件中，與開發(fā)人員無關：span{display:inline-block}操作按鈕區(qū)域；按鈕可能涉及到大量js代碼，可抽為一個jsp頁面，再include。<%@includefile="btnoper.jsp"%>分頁區(qū)域；ex控件自帶內容區(qū)域（以table為主）。文本默認靠左，為統(tǒng)一，可設置td的class為text；數(shù)字、日期靠右，可設置td的class為num和date；金額格式化，逢3位逗號，建議默認保留兩位小數(shù)，，可設置td的class為sum。常見編輯頁面如下：可根據編輯內容情況，將其分解，例如：基本信息和施工計量信息，以便用戶方便的填寫。對于必填項，必須使用紅色星號標識。對于自動生成或單位，需進行文本框后標識，例如，增加頁面，下拉框默認值為—請選擇—。readonly全部用css設置無邊框。文本框長度設置默認2個。JavaScript設計編碼規(guī)范JavaScript的實現(xiàn)組成ECMAScript(核心)描述了該語言的語法和基本對象。DOM(文檔對象模型)描述了處理網頁內容的方法和接口，比如大家常用到的getElementById，getElementsByTagName。BOM(瀏覽器對象模型)BOM描述了與瀏覽器進行交互的方法和接口，比如常用的document，frames，history。JavaScript必須遵循的規(guī)則JavaScript編碼注意變量、函數(shù)名、運算符以及其他一切東西都是區(qū)分大小寫的。比如：變量test與變量TEST是不同的。變量是弱類型的，定義變量時只用var運算符，可以將它初始化為任意值。每行結尾的分行可有可無，但良好的習慣是加上分號。變量名定義：第一個字符必須是字母,下劃線(_)或者美元符號($)，余下的字符可以是下劃線，美元符號或任何字母或數(shù)字字符。JavaScript兼容性通常所說的兼容性，就是所編寫的JavaScript代碼必須在IE6+，F(xiàn)irefox等主流瀏覽器上能正常運行。為保證其兼容性，盡可能的使用JavaScript類庫——jQuery，為保證其穩(wěn)定性，應使用jQuery1.2.6版本；在jQuery無法實現(xiàn)的情況下，使用JavaScript原生代碼；在特殊情況下，例如需要用到JavaScript插件，但需要其他類庫支持時，再引入其他JavaScript類庫。JavaScript與HTML代碼分離即不要把任何JavaScript代碼寫入HTML頁面中。采取以下步驟：把通用的JavaScript函數(shù)定義在一個分離的.js文件中，讓所需的HTML頁面去連接它。必須刪除所有的事件處理句柄（注：即行內的那些諸如onclick）并歸入同一.js文件中去。對頁面中需要非通用JavaScript函數(shù)實現(xiàn)的，在頁面中加入JavaScript代碼。例如，未分離代碼：<bodyonload=”init()”>分離后的代碼：<scriptlanguage="JavaScript">$(function(){init();});</script><body>JavaScript目錄文件規(guī)則總目錄名稱為js，與app應用程序目錄平級，js目錄下放置系統(tǒng)通用js庫類和插件；對于需要相應的圖片和樣式表支持的js插件，創(chuàng)建該插件名稱的目錄文件夾；images和css目錄下創(chuàng)建不同js插件名稱的目錄，用來放置該插件對應的圖片和樣式表。如下圖所示：常用jQuery函數(shù)jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開發(fā)的庫。而JavaScript開發(fā)基本可以分為：查找DOM元素進行取值和賦值的操作、在特定DOM節(jié)點位置進行內容的取值和賦值操作（innerHTML）；針對元素進行事件監(jiān)聽；通過操作DOM節(jié)點結合改變元素的CSS樣式，達到絢麗的動畫效果；對DOM元素進行AJAX操作。DOM相關基本選擇器選擇器描述返回示例#id根據給定的ID匹配一個元素單個元素$("#test")選取id為test的元素..class根據給定的類名匹配元素集合元素$(".test")選取所有class為test的元素element根據給定的元素名匹配元素集合元素$("p")選取所有的<p>元素*匹配所有元素集合元素$("*")選取所有的元素selector1，selector2，……，selectorN將每一個選擇器匹配到的元素合并后一起返回集合元素$("div,span,p.myClass")選取所有<div>，<span>和擁有class為myClass的<p>標簽的一組元素層次選擇器選擇器描述返回示例$("ancestordescendant")選取ancestor元素里的所有descendant(后代)元素集合元素$("divspan")選取<div>里的所有的<span>元素$("parent>child")選取parent元素下的child(子)元素，跟$("ancestordescendant")有區(qū)別，$("ancestordescendant")是選擇的是后代元素集合元素$("div>span")選取<div>元素下元素名是<span>的子元素$('prev+next')選取緊接在prev元素后的next元素集合元素$('.one+div')是選取class為one的下一個<div>元素$('prev~siblings')選取prev元素之后的所有siblings元素集合元素$('#two~div')是選取id為two的元素后面的所有<div>兄弟元素基本過濾選擇器選擇器描述返回示例:first選取第一個元素單個元素$("div:first")選取所有<div>元素中第一個<div>元素:last選取最后一個元素單個元素$("div:last")選取所有<div>元素中最后一個<div>元素:not(selector)去除所有與給定選擇器匹配的元素集合元素$("input:not(.myClass)")選取class不是myClass的<input>元素:even選取索引是偶數(shù)的所有元素，索引從0開始集合元素$("input:even")選取索引是偶數(shù)的<input>元素:odd選取索引是奇數(shù)的所有元素，索引從0開始集合元素$("input:odd")選取索引是奇數(shù)的<input>元素.:eq(index)選取索引等于index的元素(index從0開始）單個元素$("input:eq(1)")選取索引等于1的<input>元素:gt(index)選取索引大于index的元素(index從0開始）集合元素$("input:gt(1)")選取索引大于1的<input>元素(注：大于1，而不包括1):lt(index)選取索引小于index的元素(index從0開始）集合元素$("input:lt(1)")選取索引小于1的<input>元素(注：小于1，而不包括1):header選取所有的標題元素：比如h1，h2，h3等等集合元素$(":header")選取網頁中所有的<h1>，<h2>，<h3>……:animated選取當前正在執(zhí)行動畫的所有元素集合元素$("div:animated")選取正在執(zhí)行動畫的<div>元素屬性過濾選擇器選擇器描述返回示例[attribute]選取擁有此屬性的元素集合元素$("div[id]")選取擁有屬性id的元素[attribute=value]選取屬性的值為value的元素集合元素$("div[title=test]")選取屬性title為“test”的<div>元素[attribute!=value]選取屬性的值不等于value的元素集合元素$("div[title!=test]")選取屬性title不等于“test”的<div>元素(注：沒有屬性title的<div>也會被選取)[attribute^=value]選取屬性的值以value開始的元素集合元素$("div[title^=test]")選取屬性title以“test”開始的<div>元素[attribute$=value]選取屬性的值以value結束的元素集合元素$("div[title$=test]")選取屬性title以“test”結束的<div>元素[attribute*=value]選取屬性的值含有value的元素集合元素$("div[title*=test]")選取屬性title含有“test”的<div>元素[selector1][selector2][selectorN]用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件。每選擇一次，縮小一次范圍。集合元素$("div[id][title$='test']")選取擁有屬性id，并且屬性title以“test”結束的<div>元素表單對象屬性過濾選擇器描述返回示例:enabled選取所有可用元素集合元素$("#form1:enabled");選取id為“form1”:disabled選取所有不可用元素集合元素$("#form2:disabled")選取id為“form2”:checked選取所有被選中的元素(單選框，復選框)集合元素$("input:checked");選取所有被選中的<input>元素:selected選取所有被選中的選項元素(下拉列表)集合元素$("select:selected");選取所有被選中的選項元素在jQuery中，提供了attr()方法來獲取和設置元素屬性，用removeAttr()方法來刪除元素屬性。獲取屬性和設置屬性例如要獲取<p>元素的屬性title，那么只需要給attr()方法傳遞一個參數(shù)——你要獲取的屬性名稱即可：jQuery代碼：var$para=$("p"); //獲取<p>節(jié)點varp_txt=$para.attr("title"); //獲取<p>元素節(jié)點屬性title如果想設置<p>元素的屬性title的值，也可以使用同一個方法，不同的是，需要傳遞兩個參數(shù)——屬性名稱和對應的值：jQuery代碼：$("p").attr("title","yourtitle");//設置單個的屬性值如果需要一次性為同一個元素設置多個屬性，可以使用下面的代碼來實現(xiàn)：$("p").attr({"title":"yourtitle","name":"test"});//將一個“名/值”形式的對象設置為匹配元素的屬性。注：jQuery中的很多方法都是同一函數(shù)實現(xiàn)獲取(getter)和設置(setter)，比如上面的attr()方法，它既能設置元素的屬性的值，也能獲取元素的屬性的值。另外，類似的方法還有html()、text()、height()、width()、val()和css()等方法。刪除屬性在某些情況下，需要刪除文檔中某個元素的特定屬性，那么可以使用removeAttr()方法來完成這一任務。例子中，如果需要刪除<p>元素的title屬性，可以使用下面的代碼實現(xiàn)：$("p").removeAttr("title");//刪除<p>元素的屬性title運行代碼后，<p>元素的title屬性被刪除。此時，<p>元素的HTML結構由：<ptitle="選擇你最喜歡的水果.">你最喜歡的水果是?</p>變?yōu)椋?lt;p>你最喜歡的水果是?</p>html()此方法類似JavaScript中的innerHTML屬性，它可以用來讀取或設置某個元素里的HTML內容。為了能更加清楚的展示例子的效果，我們把<p>元素的HTML代碼改成：<ptitle="選擇你最喜歡的水果."><strong>你最喜歡的水果是?</strong></p>然后用html()方法對<p>元素進行操作：varp_html=$("p").html(); //獲取<p>元素的HTML代碼alert(p_html); //打印出<p>元素的HTML代碼運行代碼后，如圖3-26所示：圖3-26獲取<p>元素的HTML代碼如果需要設置某元素的HTML代碼，那么也可以使用這個方法，不過需要為它傳遞一個參數(shù)。比如，要設置<p>元素的HTML代碼，可以使用如下代碼來完成：$("p").html("<strong>你最喜歡的水果是?</strong>");//設置<p>元素的HTML代碼 注：html()方法可以用于XHTML文檔，但不能用于XML文檔。text()此方法類似JavaScript中的innerText屬性，它可以用來讀取或設置某個元素里的文本內容。繼續(xù)使用剛才的HTML代碼：<ptitle="選擇你最喜歡的水果."><strong>你最喜歡的水果是?</strong></p>用text()方法對<p>元素進行操作：varp_text=$("p").text(); //獲取<p>元素的文本內容alert(p_text); //打印出<p>元素的文本內容運行代碼后，如圖3-27所示：圖3-27獲取<p>元素的文本內容同html()方法一樣，如果需要為某元素設置文本內容，那么也要傳遞一個參數(shù)。給<p>元素設置文本內容：$("p").text("你最喜歡的水果是?"); //設置<p>元素的文本內容注：(1)JavaScript中的innerText屬性并不能在Firefox下運行，而jQuery的text()方法支持所有瀏覽器。(2)text()方法對HTML和XML文檔都有效。val()此方法類似JavaScript中的value屬性，它可以用來設置和獲取元素的值。不管元素是文本框，下拉列表還是單選框，它都可以返回元素的值。如果元素為多選，則返回一個包含所有選擇的值的數(shù)組。事件監(jiān)聽執(zhí)行時機$(document).ready()和window.onload有類似的功能在DOM加載完成時運行的代碼，可以這樣寫：jQuery代碼:$(document).ready(function(){

//在這里寫你的代碼...

});在文檔裝載完成后，如果打算為元素綁定事件來完成某些事情，則可以使用bind()方法來對匹配元素進行特定事件的綁定，bind()方法的調用格式為：bind(type[,data],fn);它有三個參數(shù)，第一個參數(shù)是事件類型，類型有：“blur”、“focus”、“l(fā)oad”、“resize”、“scroll”、“unload”、“click”、“dblclick”、“mousedown”、“mouseup”、“mousemove”、“mouseover”、“mouseout”、“mouseenter”、“mouseleave”、“change”、“select”、“submit”、“keydown”、“keypress”、“keyup”和“error”等，當然也可以是自定義名稱。第二個參數(shù)是可選，作為event.data屬性值傳遞給事件對象的額外數(shù)據對象。第三個參數(shù)是綁定的處理函數(shù)。注：可以發(fā)現(xiàn)，jQuery中的事件綁定類型比普通的JavaScript事件綁定類型少了“on”。例如：鼠標單擊事件jQuery對應的是“click”，而JavaScript中是onclick()函數(shù)。簡寫綁定事件像click、mouseover和mouseout這類事件，在程序中經常會使用到，jQuery為此也提供了一套簡寫的方法。簡寫方法和bind()的使用類似，實現(xiàn)的效果也相同，唯一的區(qū)別是能夠減少代碼量。例如，把上面的例子改成使用簡寫綁定事件的方式，代碼如下：$(function(){$("#f_id").click(function(){$(this).hide();varte=$(“[name=’test’]:check”).val();});$("#panelh5.head").mouseover(function(){ $(this).next("div.content").show(); }); $("#panelh5.head").mouseout(function(){ $(this).next("div.content").hide(); })});注：使用簡寫事件要注意，jQuery只對常用的事件進行了簡化，有些事件并未做處理。讀者會發(fā)現(xiàn)有的事件用bind()可以綁定事件，而用簡寫方式就不可以。例如mouseenter和mouseleave。合成事件jQuery有兩個合成事件——hover()和toggle()，它們類似前面說過的ready()方法，都屬于jQuery自定義的方法。hover()方法hover()方法的語法結構為：hover(over,out);它用于模仿鼠標懸停事件，當鼠標移動到元素上時，會觸發(fā)指定的第一個函數(shù)(over)；當鼠標移出這個元素時，會觸發(fā)指定的第二個函數(shù)(out)。將上面的例子改成用hover()方法，jQuery代碼為：$(function(){$("#panelh5.head").hover(function(){ $(this).next("div.content").show(); },function(){ $(this).next("div.content").hide(); })});代碼運行后的效果跟下面代碼的效果是一樣的。當鼠標滑過新聞標題后，它下面的新聞內容將被顯示；當鼠標滑出新聞標題后，相應的新聞內容則被隱藏。$(function(){$("#panelh5.head").mouseover(function(){ $(this).next("div.content").show(); }); $("#panelh5.head").mouseout(function(){ $(this).next("div.content").hide(); })});toggle()方法toggle()方法的語法結構為：toggle(fn1,fn2,fnN);它用于模仿鼠標連續(xù)點擊事件，當?shù)谝淮吸c擊元素，則觸發(fā)指定的第一個函數(shù)(fn1)，當再次點擊同一元素時，則觸發(fā)指定的第二個函數(shù)(fn2)，如果有更多函數(shù)，則依次觸發(fā)，直到最后一個。隨后的每次點擊都重復對這幾個函數(shù)的輪番調用。$(新聞標題).toggle(function(){//新聞內容顯示},function(){//新聞內容隱藏});動畫show()和hide()show()和hide()是jQuery中最基本的動畫。在HTML文檔里，為一個元素調用hide()方法，會將該元素的display樣式改為“none”。比如，使用如下代碼隱藏element元素：$(“element”).hide();//通過.hide(),隱藏元素這段代碼的功能跟用css()方法設置display屬性效果相同：element.css(“display”,”none”);//通過.css(),隱藏元素當把元素隱藏后，可以使用show()方法將元素的display樣式設置為先前的顯示狀態(tài)（“block”或“inline”）：jQuery代碼：$(“element”).show();fadeIn()和fadeOut()同show()方法不一樣的是，fadeIn()和fadeOut()方法只改變元素的不透明度。fadeOut()方法會在指定的一段時間內降低元素的不透明度，直到元素完全消失(“display:none”)。fadeIn()方法則相反。在上個例子中，如果只想改變“新聞內容”的不透明度，而不想改變高度和寬度，就可以使用fadeOut()：如下jQuery代碼所示：$("#panelh5.head").toggle(function(){ $(this).next("div.content").fadeOut(); },function(){ $(this).next("div.content").fadeIn(); })slideUp()和slideDown()slideUp()方法和slideDown()方法只會改變元素的高度。如果一個元素的display樣式為“none”，當調用slideDown()方法時，這個元素將由上至下延伸顯示。slideUp()方法正好相反，元素將由下到上縮短隱藏。使用slideUp()方法和slideDown()方法再次對“新聞內容”的顯示和隱藏方式進行改變，代碼如下：$("#panelh5.head").toggle(function(){ $(this).next("div.content").slideUp(); },function(){ $(this).next("div.content").slideDown(); });AJAX$.ajax()方法$.ajax()方法是jQuery最底層的Ajax實現(xiàn)。它的結構為：$.ajax(options)$.ajax({

type:"POST",

url:"some.php",

data:"name=John&location=Boston",

success:function(msg){

alert("DataSaved:"+msg);

}

});它只有1個參數(shù)，但在這個對象里包含了$.ajax()方法所需請求設置以及回調函數(shù)等信息，它的參數(shù)以key/value的形式存在，所有參數(shù)都是可選的，常用參數(shù)如表6-3所示：表6-3$.ajax()方法常用參數(shù)參數(shù)名稱類型說明urlString(默認為當前頁地址)發(fā)送請求的地址。typeString請求方式(POST或GET)，默認為GET。注意：其它HTTP請求方法，如PUT和DELETE也可以使用，但僅部分瀏覽器支持。timeoutNumber設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()的全局設置。dataObject或String發(fā)送到服務器的數(shù)據。如果已經不是字符串，將自動轉換為字符串格式。GET請求中將附加在URL后。防止這種自動轉換，可以查看processData選項。對象必須為Key/Value格式，如：{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數(shù)組，jQuery將自動為不同值對應同一個名稱。如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。dataTypeString預期服務器返回的數(shù)據類型。如果不指定，jQuery將自動根據HTTP包MIME信息返回responseXML或responseText，并作為回調函數(shù)參數(shù)傳遞。可用的類型是：xml：返回XML文檔，可用jQuery處理。html：返回純文本HTML信息；包含的script標簽會在插入dom時執(zhí)行。script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數(shù)。注意：在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。json：返回JSON數(shù)據。jsonp：JSONP格式。使用SONP形式調用函數(shù)時，如myurl?callback=?，jQuery將自動替換后一個“?”為正確的函數(shù)名，以執(zhí)行回調函數(shù)。text：返回純文本字符串。beforeSendFunction發(fā)送請求前可修改XMLHttpRequest對象的函數(shù)，如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請求。XMLHttpRequest對象是唯一的參數(shù)。function(XMLHttpRequest){this;//調用本次Ajax請求時傳遞的options參數(shù)}completeFunction請求完成后回調函數(shù)(請求成功或失敗時均調用)。參數(shù)：XMLHttpRequest對象和一個描述成功請求類型的字符串。function(XMLHttpRequest,textStatus){this;//調用本次Ajax請求時傳遞的options參數(shù)}successFunction請求成功后回調函數(shù)。它有2個參數(shù)：(1)由服務器返回，并根據dataType參數(shù)進行處理后的數(shù)據；(2)描述狀態(tài)的字符串。function(data,textStatus){//data可能是xmlDoc,jsonObj,html,text,等等...this;//調用本次Ajax請求時傳遞的options參數(shù)}errorFunction請求失敗時被調用的函數(shù)。這個函數(shù)有3個參數(shù)：XMLHttpRequest對象、錯誤信息、（可選）捕獲的錯誤對象。Ajax事件。function(XMLHttpRequest,textStatus,errorThrown){//通常情況下textStatus和errorThown只有其中一個包含信息this;//調用本次Ajax請求時傳遞的options參數(shù)}globalBoolean默認為true。是否觸發(fā)全局Ajax事件。設置為false將不會觸發(fā)全局Ajax事件，如AjaxStart或AjaxStop可用于控制各種Ajax事件。推薦的JavaScript插件HTML編輯器推薦使用ewebeditor羅立學樹形結構普通樹形結構推薦使用dtree表格樹推薦使用TableTree4J日期選擇建議使用my97。1.簡介目前的版本是:4.7Beta4發(fā)布于2010-01-132.注意事項My97DatePicker目錄是一個整體,不可破壞里面的目錄結構,也不可對里面的文件改名,可以改目錄名My97DatePicker.htm是必須文件,不可刪除各目錄及文件的用途:WdatePicker.js配置文件,在調用的地方僅需使用該文件,可多個共存,以xx_WdatePicker.js方式命名config.js語言和皮膚配置文件,無需引入calendar.js日期庫主文件,無需引入My97DatePicker.htm臨時頁面文件,不可刪除目錄lang存放語言文件,你可以根據需要清理或添加語言文件目錄skin存放皮膚的相關文件,你可以根據需要清理或添加皮膚文件包當WdatePicker.js里的屬性:$wdate=true時,在input里加上class="Wdate"就會在選擇框右邊出現(xiàn)日期圖標,如果您不喜歡這個樣式,可以把class="Wdate"去掉,另外也可以通過修改skin目錄下的WdatePicker.css文件來修改樣式3.支持的瀏覽器IE6.0+,Firefox2.0+,Chrome,Opera9.5+,Safari3.0+4.如何使用在使用該日期控件的文件中加入JS庫(僅這一個文件即可,其他文件會自動引入,請勿刪除或改名)，代碼如下：<scriptlanguage="javascript"type="text/javascript"src="datepicker/WdatePicker.js"></script>注:src="datepicker/WdatePicker.js"

請根據你的實際情況改變路徑加上主調函數(shù)WdatePicker<inputid="d11"type="text"

onClick="WdatePicker()"/>為保證html與js代碼分離，以上代碼應改為：<scriptlanguage="JavaScript">$(function(){ $("#d11").click(function(){ WdatePicker(); });});</script><inputid="d11"type="text"

/>更多用例參見/dp/demo/index.htm表單驗證對表單中name唯一的（單選、多選框除外），推薦使用jQueryvalidate。1、引入jQuery庫和Validation插件：<scriptsrc="../../scripts/jquery-1.2.6.js"type="text/javascript"></script><scriptsrc="../../scripts/jquery.validate.js"type="text/javascript"></script><scriptsrc="lib/jquery.validate.messages_cn.js"type="text/javascript"></script>2、確定需要被驗證的表單和表單元素驗證規(guī)則：然后加入jQuery代碼如下：$(document).ready(function(){ $("#commentForm").validate({ rules:{ username:{ required:true, minlength:2 }, email:{ required:true, email:true }, url:"url", comment:"required" } });});上面代碼完成了以下驗證：對username的必填驗證和長度至少是兩位；對email的必填驗證和是否為email格式的驗證；對url是否為url的驗證；對comment的必填驗證。詳見《鋒利的jQuery》208頁。對于表單中存在多個同名name的表單元素（文本框之類），只能使用其他JavaScript驗證。cookie操作必須使用jQuerycookie首先引入jQuery庫和cookie插件：<scriptsrc="../../scripts/jquery-1.2.6.js"type="text/javascript"></script><scriptsrc="../../scripts/jquery.cookie.js"type="text/javascript"></script>寫入cookie：$.cookie('the_cookie','the_value');說明："the_cookie"為待寫入的cookie名，"the_value"為待寫入的值讀取cookie：$.cookie('the_cookie');說明："the_cookie"為待讀取的cookie名刪除cookie：$.cookie('the_cookie',null);說明："the_cookie"為cookie名，設置為null即刪除此cookie。我們必須使用與之前設置時相同的路徑(path)和域名(domain)，才可以正確刪除cookie。其他可選參數(shù)$.cookie('the_cookie','the_value',{expires:7,path:'/',domain:'',secure:true});詳見《鋒利的jQuery》237頁。地圖導航推薦使用Googlemap首先引入Googlemap庫<scriptsrc="/maps?file=api&v=2&key=ABQIAAAAZaP2obcQ_OqRyv3iKokEABTUOXy7K-nhjCnaN9x0YCzQOBElExQeAbhqjioLV7lRa2Plb7TMH1hHZA&sensor=false"type="text/javascript"></script>key為地圖API的密鑰，一個地圖API密鑰只對一個“目錄”或域有效。必須有

Google帳戶才能獲得地圖API密鑰，并且API密鑰會與Google帳戶關聯(lián)。地圖初始化及其他設置$(function(){ //alert(window.location.host) varmap; //$("#message").show().html("加載中……"); initialize(); //減少瀏覽器內存泄漏 $(document).unload(function(){ GUnload(); }); });//地圖初始化函數(shù)functioninitialize(){if(GBrowserIsCompatible()){ map=newGMap2($("#map_canvas")[0]);//確定顯示地圖的div層 map.setCenter(newGLatLng(30.593168,114.305361),11);//確定地圖默認顯示方位和比例尺 varcustomUI=map.getDefaultUI(); customUI.maptypes.satellite=false;//隱藏衛(wèi)星地圖 map.setUI(customUI);//放大縮小ui}}彈出窗口推薦使用jQueryweebox（尚未在項目中使用）整體界面建議使用jQueryeasyui（尚未在項目中使用）該插件包含彈出窗口，tab頁，菜單欄、拖動層等推薦的JavaScript公共函數(shù)公共函數(shù)為復雜度為達到插件程度，但多數(shù)頁面會使用的函數(shù)，可根據情況將其轉換成插件處理。日期計算金額格式化金額大小寫數(shù)字計算HTML設計編碼規(guī)范所有網頁必須使用XHTML規(guī)范。XHTML介紹XHTML指可擴展超文本標簽語言（EXtensibleHyperTextMarkupLanguage）。XHTML的目標是取代HTML。XHTML與HTML4.01幾乎是相同的。XHTML是更嚴格更純凈的HTML版本。XHTML是作為一種XML應用被重新定義的HTML。XHTML是一個W3C標準XHTML必須遵循的規(guī)則XHTMLDTD定義了強制使用的HTML元素所有XHTML文檔必須進行文件類型聲明（DOCTYPEdeclaration）;在XHTML文檔中必須存在html、head、body元素，而title元素必須位于在head元素中;文檔申明我們選擇過渡性的DTD:xhtml1-transitional.dtd.;編碼統(tǒng)一為:UTF-8;下面是一個標準的XHTML文件模板：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>標題</title></head><body></body></html>XHTML元素必須被正確的嵌套所有的元素必須像這樣彼此正確地嵌套：<b><i>Thistextisboldanditalic</i></b>XHTML元素必須被關閉非空標簽必須使用結束標簽<p>Thisisaparagraph</p>空標簽也必須被關閉<br/>重要的兼容性提示：你應該在"/"符號前添加一個額外的空格，以使你的XHTML與當今的瀏覽器相兼容。Abreak:<br/>Ahorizontalrule:<hr/>Animage:<imgsrc="happy.gif"alt="Happyface"/>標簽中的id名稱在同一個文檔內必須唯一<tableid="table1"><tableid="table2">標簽名必須用小寫字母<body><p>Thisisaparagraph</p></body>XHTML文檔必須擁有一個根元素所有的XHTML元素必須被嵌套于<html>根元素中。其余所有的元素均可有子元素。子元素必須是成對的且被嵌套在其父元素之中?；镜奈臋n結構如下：<html><head>...</head><body>...</body></html>屬性名稱必須小寫<tablewidth="100%">屬性值必須加引號<tablewidth="100%">屬性不能簡寫<inputchecked="checked"/>用Id屬性代替name屬性在XHTML中不建議使用name屬性，應該使用id取而代之。這是不建議的：<imgsrc="picture.gif"name="picture1"/>這是建議的：<imgsrc="picture.gif"id="picture1"/>常用HTML標簽編碼規(guī)則表格table表格結構thead元素用于對HTML表格中的表頭內容進行分組；th元素用于定義表格內的表頭單元格；tbody元素用于對HTML表格中的主體內容進行分組；tfoot元素用于對HTML表格中的表注（頁腳）內容進行分組。根據以上介紹：表格必須包含tbody，帶標題欄的table必須使用thead，thead中必須使用th，帶頁腳注釋的必須用tfoot，基本結構如下所示：<table><thead><th>標題</th><th>標題</th></thead><tbody><tr><td>單元格</td><td>單元格</td></tr></tbody><tfoot><tr><td>單元格</td><td>單元格</td></tr></tfoot></table>必須使用" "處理沒有內容的單元格。內容對齊及格式文本默認靠左；數(shù)字、日期靠右；金額格式化，逢3位逗號，建議默認保留兩位小數(shù)；編輯表格頁面，label標記建議靠右，文本框等表單元素建議靠左。表單formform標簽必須在table標簽外部，必須使用post，如下所示：<formmethod="post"><table></table></form>標記label<label>標簽為input元素定義標注（標記）。label元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在label元素內點擊文本，就會觸發(fā)此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。<label>標簽的for屬性應當與相關元素的id屬性相同。<labelfor="f_supervisionSituation">監(jiān)督情況</label><textareaname="f_supervisionSituation"id="f_supervisionSituation"rows="5"cols="65"></textarea>文本框、文本域inputtexttextarea根據實際內容將文本框size設置為20和40（即文本框內容不得超過文本框寬度），特殊使用80，超過的使用textarea代替。默認情況下，文本框和文本域的id和name同名，如果有name同名的情況，可以不寫id，或者按id_{序號}的方式進行命名。單選、復選框inputradiocheckbox單選框默認情況下選擇用戶最常用的選項，否則選擇第一個；復選框默認情況下不選擇任何選項。下拉框select建議下拉選項option不要超過31個，如果超過,則應該按情況分級；除非有特別需求，option應該默認以字母升序排列；默認選中的項應該為最可能常用的選項或者是空白。HTML標簽推薦使用表按功能順序列出的HTML4.01/XHTML1.0標簽手冊NN：顯示所支持標簽的Netscape的最早版本。IE：顯示所支持標簽的InternetExplorer的最早版本。DTD：顯示在哪一種XHTML1.0DTD中，標簽是被允許的。S=Strict,T=Transitional,F=Frameset.綠色：推薦使用的標簽藍色：較少使用,但可以使用的標簽紅色:禁止使用的標簽基本的標簽描述NNIEDTD<!DOCTYPE>

定義文檔類型。

STF<html>定義html文檔。3.03.0STF<body>定義body元素。3.03.0STF<h1>to<h6>定義標題1到標題6。3.03.0STF<p>定義段落。3.03.0STF<br>插入一個換行。3.03.0STF<hr>定義水平線。3.03.0STF<!--...-->定義注釋。3.03.0STF字符格式化描述NNIEDTD<b>定義粗體文本。3.03.0STF<font>不贊成使用。定義文字的字體、尺寸和顏色3.03.0TF<i>定義斜體文本。3.03.0STF<em>定義強調文本。3.03.0STF<big>定義大號字體文本。3.03.0STF<strong>定義語氣更為強烈的強調文本。3.03.0STF<small>定義小號字體文本。3.03.0STF<sup>定義上標文本。3.03.0STF<sub>定義下標文本。3.03.0STF<bdo>定義文本顯示的方向。6.25.0STF<u>不贊成使用。定義下劃線文本。3.03.0TF輸出描述NNIEDTD<pre>定義預格式文本3.03.0STF<code>定義計算機代碼文本。3.03.0STF<tt>定義打字機文本。3.03.0STF<kbd>定義鍵盤文本。3.03.0STF<var>定義變量。3.03.0STF<dfn>定義定義項目。

3.0STF<samp>定義樣本文本。3.03.0STF<xmp>不贊成使用。定義預格式文本。3.03.0

塊級描述NNIEDTD<acronym>定義只取首字母的縮寫。6.24.0STF<abbr>定義縮寫。6.2

STF<address>定義地址元素。4.04.0STF<blockquote>定義塊引用。3.03.0STF<center>不贊成使用。定義居中字體。3.03.0TF<q>定義短的引用。6.24.0STF<cite>定義引用(citation)。3.03.0STF<ins>定義被插入文本。6.24.0STF<del>定義被刪除文本。6.24.0STF<s>不贊成使用。定義加刪除線的文本。3.03.0TF<strike>不贊成使用。定義加刪除線的文本。3.03.0TF鏈接描述NNIEDTD<a>定義錨。3.03.0STF<link>定義資源引用(resourcereference)。4.03.0STF框架描述NNIEDTD<frame>定義框架的子窗口3.03.0F<frameset>定義框架結構3.03.0F<noframes>定義無框架的節(jié)3.03.0TF<iframe>定義內聯(lián)框架6.04.0TF輸入描述NNIEDTD<form>定義表單。3.03.0STF<input>定義輸入域。3.03.0STF<textarea>定義文本輸入區(qū)。3.03.0STF<button>定義按鈕。6.24.0STF<select>定義下拉式菜單。3.03.0STF<optgroup>定義選項分組。6.06.0STF<option>定義下拉列表中的可選項。3.03.0STF<label>為表單元素創(chuàng)建標記。6.24.0STF<fieldset>將表單內的相關元素分組。6.24.0STF<legend>定義框架結構的標題。6.24.0STF<isindex>不贊成使用。定義單行的輸入域3.03.0TF列表描述NNIEDTD<ul>定義無序列表。3.03.0STF<ol>定義有序列表。3.03.0STF<li>定義列表項目。3.03.0STF<dir>不贊成使用。定義目錄列表。3.03.0TF<dl>定義定義列表。3.03.0STF<dt>定義定義項目。3.03.0STFHYPERLIN

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論