html5網(wǎng)頁模板怎么修改，我們需要了解哪些?企業(yè)在為學(xué)校做html網(wǎng)頁模板時，有一個頁面要顯示一些考號、座號等，因為要經(jīng)常修改，所以在后臺做一個可以定制的頁面。

　　所創(chuàng)建的組件分為兩類：文本組件(定制要顯示的文本，例如標(biāo)題等)和數(shù)據(jù)組件(如座位號等，僅可修改寬度，內(nèi)容不能直接編輯)。

　　闡述了編輯功能的基本實現(xiàn);

　　一：布置。

　　其中，綠色div(.container)是每一個創(chuàng)建的組件中最外層的div，藍色span用于編輯文本，container中也有上面的工具條，以便將其向上偏移顯示在外部。最上面的紅色div(.move)是隱藏的，并向其添加了拖動事件。在右下方有一個正方形的div(.zoom)，它會在上面添加縮放事件。

　　二是編輯功能。

　　普通的編輯文本使用input，但是在上面使用input顯然不合適，在上面添加一個上contenteditable="true"屬性到span(或者上面的div)上面，就可以編輯它的內(nèi)容了。

　　第三，拖拽。

　　因為所有的dom都在container中，所以只要在拖動時改變container的位置就可以了。

　　當(dāng)組件接近頂部時，在基本拖動上加一個作用域限制，關(guān)于建站，以防止組件從頁面中被拖出，同時使工具條出現(xiàn)在下面。

　　四：比例調(diào)整。

　　(a)$container.find('.zoom').on('mousedown'),function(e){cancelBubble(e);var$element=$(this).parent();$(document).on('mousement)',function(e){varx=e.pageX-$element.offset().left();//pagex和offset所獲得的位置，是vary=e.pageY-$element.offset()(function);function(mousement);$element.css(height',y);returnfalse(function);function(function)(function){$element)}

　　這個部分實現(xiàn)了縮放的基本功能，并在后面限制了其最小寬度高度。cancelBubble是消除泡沫的功能。

　　取消冒泡函數(shù)functioncancelBubble(e)?(e.cancelBubble=true):(e.stoppropagation())

　　五、工具欄。

　　工具欄中的功能基本上都是處理文本，只需在相應(yīng)的按鈕上添加功能即可，這里我使用的一個叫做jscolor的插件，還有一些blog中的顏色選擇器。

　　六：來源。

　　額，其它地方都是一些DOM和風(fēng)格操作，這里就不多說了，放源碼吧。

　　以上就是關(guān)于html5網(wǎng)頁模板怎么修改的文字介紹，希望對您有幫助!