H5網頁進度條顯示

碼如下所示：

<!DOCTYPE html>

<html>

<head>

<title>網頁進度條</title>

#progressBox{

width: 300px;

height: 40px;

position: relative;

border: 1px solid #c8c8c8;

background: #fff;

}

#progressBar,#progressText{

position: absolute;

left: 0;

top: 0;

width: 100%;

line-height: 40px;

font-size: 18px;

text-align: center;

}

/*clip屬性適用于絕對定位*/

#progressBar{

z-index: 2;

background: #00a1f5;

/*第二個參數表示所切寬度*/

clip: rect(0px,0px,140px,0px);

color: white;

}

#progressText{

z-index: 1;

color: black;

}

</style>

</head>

<body>

</div>

</body>

//從網頁上加載過來的jquery

$(function(){

var iNow=0;//寫死數據，實際情況應該取得后臺返回的ajax數據

var timer=setInterval(function(){

iNow+=2;

if(iNow>100){

clearInterval(timer);

}

else{

progressFn(iNow);

}

},30);

});

function progressFn(cent){

var progressBox=$("#progressBox");

var progressBar=$("#progressBar");

var progresstext=$("#progressText");

var toalWidth=progressBox.width();

progressBar.text(cent+"%");

progresstext.text(cent+"%");

progressBar.css({clip:'rect(0px,'+cent/100*toalWidth+'px,140px,0px)'});

}

</script>

</html>

效果如圖所示：

Query表單向導是一個jQuery插件，與某種表格流協助表單創建（不用刷新頁面）。舉個例子，如果你有一個巨大的表格來輸入用戶數據，你可以使用表單向導來將其分成一系列相關步驟。這一優點使用戶不會被超長表單嚇到，并且當用戶輸入信息時為其提供一些進度指示。

在這篇文章中，我們列出了開發者最喜歡的六大jQuery表單向導，考量了它們的不同功能以及如何創立你自己的向導。這不會是一個冗長的列表，如果你正在尋找一個jQuery表單向導，這一定會為你指明正確的方向。

此列表在2017年8月30日更新，從列表中刪除了損壞和棄用的插件，并加入了新的插件來提供開發者要求的功能。

1. jQuery Steps

jQuery Steps是一個智能UI元素，使開發者可以很方便地創建向導界面。這個插件將內容分成區塊來形成更有結構和順序的頁面外觀。它有多種功能，例如、狀態保持（這會保存你每一步的輸入）以及每個區塊的過渡效果。它可以通過NuGet或者bower安裝，擁有內容和功能豐富的API。

2. jQuery Smart Wizard

Smart Wizard是一個靈活且高度客戶化的jQuery步驟向導插件，有Bootstrap支持。它很容易執行，并且可以為你的表單、檢出屏幕、注冊步驟創建一個整潔而時髦的界面。它的功能包括主題支持（包括了多個主題）、URL導航、步驟選擇和動態隱藏或關閉步驟。它可以通過npm、bower和composer安裝，擁有內容和功能豐富的API。

3. formToWizard

這個小型插件可以用jQuery將任何網絡表格轉換成多步驟的向導，每個表格<fieldset>可以轉換成具有前進和后退按鍵的單獨步驟。雖然它沒有像前兩個插件那么多的功能，但它和jQuer確認插件整合，來提供確認功能。它是一個單獨的文件（所以你可以從GitHub上將其提取下來），如果JavaScript不可用，它會慢慢的退化。

4. jQuery Stepy

jQuery Stepy是一個生成可客戶化表格的向導。它假定表格有特定的結構，其中有特定的類。然后你只需要初始化插件，然后就擁有了表單向導。

此插件沒有任何預先設定的風格。但是，它提供了豐富的選擇，例如可以在步驟之間導航，提供前進、后退和完成按鈕與過渡效果，與任何你選用的確認插件整合。它提供了合理的API，例如允許你觸發步驟間的召回，或者當前步驟的確認后的召回。

5. Twitter Bootstrap Wizard

這個Twitter Bootstrap插件利用形式可轉換結構建造向導。它允許用戶利用按鈕來建造一個向導功能，來遍訪不同的向導步驟和實踐，并分別接入每一步。此插件關鍵的優勢在于它和Bootstrap緊密整合。它有一些基本功能，例如確認、進度條和創建或移除步驟的能力。另外，為了簡單地從GitHub中復制插件，它還可以通過Bower（雖然并不推薦）來安裝。它有不錯的內容且提供了基礎的API。

6. jQuery.wizard

最后要介紹的是jQuery.wizard。這是一個不同的表單向導，支持分支——在評論中被要求的功能之一。

基本結構包括步驟和分支，后者是選擇性的。一個簡單的線性表格可能只要求一個包含所有步驟的分支，但復雜的表格可能要求用到多個分支，甚至是極為復雜的分支。開發者需要處理表單中步驟和分支的數量。向導采用了不同的有限步驟決定怎樣自身導航。

這一插件的內容前所未有的豐富，提供了擴展API。它可以通過npm或者Bower來安裝，與Internet Explorer 6之后的所有版本兼容。它可以和多種其他插件整合，包括最受歡迎的jQuery Validation。你可以通過復制回復并在瀏覽器中查看examples/index.html來查看不同的例子。

彩蛋

開源軟件的世界很精彩，在為新項目選用插件時可以坐享極豐富的選擇。但是，這并不意味著我們應該躲避為有真正作用的軟件付費。以下是兩種需要付費的表單向導插件。我推薦你們去看一看它們，說不定會對你有用：

Form Wizard – Multi Step Form Validation（下載鏈接：https://codecanyon.net/item/form-wizard-multi-step-form-validation/19613591）
Timon – Step Form Wizard + jQuery Step Form Builder（下載鏈接：https://codecanyon.net/item/timon-step-form-wizard/15830006）

最后，如果你是那種喜歡弄懂所有事情的原理，不喜歡使用插件，那么你可能會想要看一看以下這些教程，告訴你如何通過探索來創建一個表單向導。

Turn any webform into a powerful wizard with jQuery（地址：http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/）
Multistep Form With Progress Bar Using jQuery And CSS（地址：http://talkerscode.com/webtricks/multistep-form-with-progress-bar-using-jquery-and-css.php）

結論

你已經擁有6個jQuery表單向導插件的詳盡概覽，每一個插件都有不同的功能和特點。根據項目要求來選用它們，希望你可以從這篇文章中找到對你有所幫助的內容。如果有什么遺漏請告知我們，或者通過下方評論告訴我們你最喜歡的插件是哪一個。

家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個 HTML 標簽（組件），通過這些標簽避免你在項目中集成復雜第三方組件，比如日歷組件、顏色選擇、進度條等...，簡單的標簽就能很方便的調用系統組件。

一、顏色選擇組件（Color Picker）

在項目中，你可能希望通過調色板組件動態調整顏色，這時你可以使用 <input type="color"> 就可以輕松調用一個調色板組件，省去你在找第三方組件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用標簽（Blockquote）

在文章排版時，有時候我們需要引用一些信息，這時我們需要用特殊的樣式進行強調，這時你可以使用<blockquote> 標簽來強調你用的內容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音頻播放器（Audio Player）

如果從頭寫個音頻播放器是一個費時費力又有挑戰性的工作，但是你現在可以使用<audio>標簽就能很輕松的調用。系統的音頻播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、視頻播放器（Video Player）

我們不僅能很方便的調用系統的音頻組件，我們還可以使用<video> 標簽調用視頻組件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折疊組件（Accordion）

折疊列表的需求也是比較常見的，點擊標題展開對應的信息內容，這時 <details> 標簽就派上用場了，示例效果如下所示：

gif

項目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期選擇（Date Picker）

日期選擇組件可以說是項目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復雜的樣式和交互需求，使用<input type="date"> 這個標簽就能輕松的勝任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑塊組件（Slider）

滑塊組件也是一個比較常見的組件，主要應用在數值范圍的篩選上，方便用戶進行選擇，這時我們可以使用 <input type="range"> ，我們可以設置最小值、最大值以及當前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、內容編輯（Content Editor）

為了讓內容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當前容器及所見即所得的編輯，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、圖片標簽（Picture Tag）

有時候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標簽的話，你需要做的工作就會許多，但是使用<picture> 標簽就能很輕松的完成在不同分辨率下顯示不同圖片的設置，調整瀏覽器的大小，就會根據窗口的大小顯示不同大小的圖片，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/abybomY

十、進度條（Progress Bar）

進度條組件也是個很常見的組件，你可以使用<progress> 標簽就能輕松完成相關外觀的設置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉組件（Dropdown）

如果下拉組件選項比較多，用戶選擇就會比較困難，用戶可能希望結合輸入，能很方便的定位到下拉組件的內容，這時候你可以使用 <datalist> 標簽就能滿足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要對頁面某部分進行詳細介紹時，你可能需要鼠標經過此區域顯示詳細的提示框效果，這時我們可以使用 title 屬性就能輕松實現，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

結束語

今天的文章就分享到這里，希望在日后的項目中你能想起今天分享的這12個標簽（組件），感謝你的閱讀。

參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza

在線咨詢

上一篇：Chrono.js：Javascript 中的日期 NLP 庫
下一篇：分享一個大數據可視化大屏看板案例（echarts實現含中國地圖）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商