整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          個人收藏的必備網頁設計控件,也許正是你在尋找的(二)

          個人收藏的必備網頁設計控件,也許正是你在尋找的(二)

          、范圍滑塊選擇 ion.rangeSlider

          ion.rangeSlider是一種簡單、靈活、范圍內選擇方便的滑塊選擇器。

          它支持事件和公共方法,具有靈活的設置,可以用CSS來完全改變

          跨瀏覽器支持(Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+)

          支持主流的設備(iPhone, iPad, Nexus等)

          主頁:https://github.com/IonDen/ion.rangeSlider

          2、范圍選擇滑塊 Powerange

          Powerange是一個范圍滑塊控件,首先它很容易定制,它完全都是由CSS和JavaScript組成。其次它包含許多功能,包括改變顏色和整體風格,水平和垂直的風格,自定義之間切換,最大值和初始值,自定義步驟的時間間隔,顯示十進制值,顯示而不是最小/最大號的圖標。

          跨瀏覽器支持:谷歌瀏覽器14+,Mozilla Firefox瀏覽器6.0以上版本,歌劇11.6+,Safari 5以上版本,IE 9+

          主頁:http://abpetkov.github.io/powerange/

          3、按鈕切換開關 Switchery

          Switchery是一個簡單的組件,它可以幫助你把你的默認的HTML復選框,只需要幾個簡單的步驟就設置為iOS 風格切換方式。您可以輕松地使用CSS自定義開關,使他們完美匹配您的設計。

          支持所有主流瀏覽器(Chrome, Firefox, Opera, Safari, IE8+)

          主頁:http://abpetkov.github.io/switchery/

          4、彈窗插件 Sweet Alert

          Sweet Alert 是一個替代傳統的 JavaScript Alert 的漂亮提示效果。SweetAlert 自動居中對齊在頁面中央,不管您使用的是臺式電腦,手機或平板電腦看起來效果都很棒。另外提供了豐富的自定義配置選擇,可以靈活控制。

          主頁:http://t4t5.github.io/sweetalert/

          5、通知插件 Toastr

          toastr 是一個實現了類似 Android 的 Toast 提示的 jQuery 插件。

          主頁:https://github.com/CodeSeven/toastr

          6、頁面加載動畫SpinKit

          spinkit使用CSS3的特性實現多種動畫效果,元素移動、放大縮小、翻轉、進度條加載效果等等,使用了很多CSS3新的特性。

          主頁:https://github.com/tobiasahlin/SpinKit

          演示網址:http://tobiasahlin.com/spinkit/

          7、交互式圖表HighCharts

          Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在您的web網站或是web應用程序添加有交互性的圖表。目前HighCharts支持的圖表類型有:直線圖、曲線圖、區域圖、區域曲線圖、柱狀圖、餅狀圖和散狀點圖等。它的顯示速度很快,看起來很雅致,并且界面漂亮。它含有大量的配置選項和可擴展性。一個組件系統可讓您未使用的功能壓縮到一個10kB的文件大小。它還具有良好的兼容性和可訪問性,當用戶在Javascrip 失效的情況下,或是使用早期版本的瀏覽器,瀏覽器仍然會重定向到圖片本身或事先指定的HTML頁。

          主頁:http://www.highcharts.com/

          8、焦點圖SuperSlide

          SuperSlide 致力于解決網站大部分特效展示問題,使網站代碼規范整潔,方便維護更新。

          網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動”“無縫滾動”等只需要一個SuperSlide即可解決!

          從此無需網上苦苦尋覓特效,無需加載n個插件,無需害怕代碼沖突,你需要的只是一個SuperSlide!

          還可以多個SuperSlide組合創造更多效果哦~(兼容包括ie6的絕大部分瀏覽器)

          下面這個圖上使用了5種以上相應的效果,只引用了一次插件



          主頁:http://www.superslide2.com/

          PS:官網介紹包括的擴展效果,是用SuperSlide制作的,有些特殊的效果會加少量js,如果你熟練掌握SuperSlide,你也可以制作一模一樣的效果,甚至更好。對于剛剛接觸的朋友,如果真的不想自己研究,請留下郵箱,我抽時間會一一發送。

          9、jquery.cookie

          一個簡單的,輕量級的jQuery插件用于讀取,寫入和刪除的cookie。

          主頁:https://github.com/carhartl/jquery-cookie

          10、Custombox

          Custombox是基于 CSS3 過渡功能實現的 jQuery 模式窗口插件。有許多效果,如淡入,滑動,模糊,翻轉,旋轉等等。截圖不能突出效果,強烈推薦看看演示。

          主頁:https://github.com/dixso/custombox

          演示地址:http://dixso.github.io/custombox/

          這次就介紹這10款吧,其實我認為,所有插件、控件都是讓我們在開發過程中盡可能縮短時間的工具,“工欲善其事,必先利其器”,可能真正的“牛人”都是自己需要什么寫什么,但是大多數開發者可能還達不到那種境界,亦或者不愿意浪費那個時間和精力,所以,收集自己會使用或者常用的工具,何樂而不為呢。謝謝支持,下次繼續。

          同于服務器端腳本語言,例如php與ASP,Javascript是客戶端腳本語言,也就是說JavaScript是在用戶的瀏覽器上運行,不需要服務器的支持而可以獨立運行。所以在早期程序員比較青睞于JavaScript以減少對服務器的負擔,而與此同時也帶來另一個問題:安全性。而隨著服務器的強壯,雖然程序員更喜歡運行于服務端的腳本以保證安全,但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。

          Web前端教程

          復選框的全選和全不選

          需求分析

          商品分類界面中,當我們點擊全選框的時候,我們希望選中所有的商品,當我們取消掉的時候,我們希望不選中所有的商品

          技術分析

          checked="checked"選擇復選框

          事件:onclick點擊事件

          getElementsByTagName:返回包含帶有指定標簽名稱的所有元素的節點列表(集合/節點數組)。

          getElementsByName:返回包含帶有指定類名的所有元素的節點列表。

          步驟分析

          全選和全部選步驟分析:

            1.確定事件:onclick單機事件

            2.事件觸發函數:checkAll()

            3.函數要去做一些事情:

            獲得當前第一個checkbox的狀態

            獲得所有分類項的checkbox

            修改每一個checkbox的狀態

          代碼實現

            <!DOCTYPEhtml>

            <html>

             <head>

             <metacharset="UTF-8">

             <title></title>

             <!--

             1.確定事件:文檔加載完成onload

             2.事件要觸發函數:init()

             3.函數:操作頁面的元素

             要操作表格中每一行

             動態的修改行的背景顏色

             -->

             <script>

             functioninit(){

             //得到表格

             vartab=document.getElementById("tab");

             //得到表格中每一行

             varrows=tab.rows;

             //便利所有的行,然后根據奇數偶數

             for(vari=1;i<rows.length;i++){

             varrow=rows[i];//得到其中的某一行

             if(i%2==0){

             row.bgColor="yellow";

             }else{

             row.bgColor="red"

             }

             }

             }  

             /*

          全選和全部選步驟分析:

             1.確定事件:onclick單機事件

             2.事件觸發函數:checkAll()

             3.函數要去做一些事情:

             獲得當前第一個checkbox的狀態

             獲得所有分類項的checkbox

             修改每一個checkbox的狀態

             */

             functioncheckAll(){

            // 獲得當前第一個checkbox的狀態

             varcheck1=document.getElementById("check1");

             //得到當前checked狀態

             varchecked=check1.checked;

            // 獲得所有分類項的checkbox

            // varchecks=document.getElementsByTagName("input");

             varchecks=document.getElementsByName("checkone");

            // alert(checks.length);

             for(vari=0;i<checks.length;i++){

            // 修改每一個checkbox的狀態

             varcheckone=checks[i];

             checkone.checked=checked;

             }

             }

             </script>

             </head>

             <bodyonload="init()">

             <tableborder="1px"width="600px"id="tab">

             <tr>

             <td>

             <inputtype="checkbox"onclick="checkAll()"id="check1"/>

             </td>

             <td>分類ID</td>

             <td>分類名稱</td>

             <td>分類商品</td>

             <td>分類描述</td>

             <td>操作</td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>1</td>

             <td>手機數碼</td>

             <td>華為,小米,尼康</td>

             <td>黑馬數碼產品質量最好</td>

             <td>

             <ahref="#">修改</a>|<ahref="#">刪除</a>

             </td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>2</td>

             <td>成人用品</td>

             <td>充氣的</td>

             <td>這里面的充氣電動硅膠的</td>

             <td><ahref="#">修改</a>|<ahref="#">刪除</a></td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>3</td>

             <td>電腦辦公</td>

             <td>聯想,小米</td>

             <td>筆記本特賣</td>

             <td><ahref="#">修改</a>|<ahref="#">刪除</a></td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>4</td>

             <td>饞嘴零食</td>

             <td>辣椒,麻花,黃瓜</td>

             <td>年貨</td>

             <td><ahref="#">修改</a>|<ahref="#">刪除</a></td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>5</td>

             <td>床上用品</td>

             <td>床單,被套,四件套</td>

             <td>都是套子</td>

             <td><ahref="#">修改</a>|<ahref="#">刪除</a></td>

             </tr>

             </table>

             </body>

            </html>

          JavaScript是一種腳本語言,其源代碼在發往客戶端運行之前不需經過編譯,而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱點是安全性較差,而且在JavaScript中,如果一條運行不了,那么下面的語言也無法運行。而且由于每次重新加載都會重新解譯,加載后,有些代碼會延遲至運行時才解譯,甚至會多次解譯,所以速度較慢。

          以上是酷仔今日整理的“前端教程:使用JavaScript完成復選框的全選和全不”一文,希望為正在學習Web前端的同學提供參考。

          果您覺得該文章對您有幫助,讓更多人受用,請關注“鍵盤碼農”,轉發該文章。謝謝您的支持!

          今天跟大家寫了一份js的聯動全選的源碼,代碼少,清晰易懂。

          效果是這樣的:

          點擊全選下面的就會被全部全選,或者下面的被一一選擇,全選按鈕也會被選中。運用復選框來實現的聯動全選的功能。

          點擊上面的復選框就會被全選

          Javascript:聯動全選

          當下放的復選框沒有被全選,最上面的全選按鈕未被選中

          復選框聯動全選js代碼實現:

          <!DOCTYPE html>

          <html>

          <head>

          <title></title>

          <meta charset="utf-8">

          <script type="text/javascript">

          window.onload=function ()

          {

          var oBtn1=document.getElementById('btn1');

          var oBox=document.getElementById('box');

          var oInputs=oBox.getElementsByTagName('input');

          oBtn1.onclick=function ()

          {

          if (oBtn1.checked==true) {

          for (var i=0; i < oInputs.length; i++) {

          oInputs[i].checked=true;

          }

          } else {

          for (var i=0; i < oInputs.length; i++) {

          oInputs[i].checked=false;

          }

          }

          }

          //點擊每一個input框

          for (var i=0; i < oInputs.length; i++) {

          oInputs[i].onclick=function ()

          {

          var n=0;

          for (var i=0; i < oInputs.length; i++) {

          if (oInputs[i].checked==true) {

          n++;

          }

          }

          if (n==oInputs.length) {

          oBtn1.checked=true;

          } else {

          oBtn1.checked=false;

          }

          }

          }

          }

          </script>

          </head>

          <body>

          <h1>全選/全不選</h1>

          <input type="checkbox" id="btn1">

          <div id="box">

          <input type="checkbox" name="">

          <input type="checkbox" name="">

          <input type="checkbox" name="">

          <input type="checkbox" name="">

          </div>

          </body>

          </html>

          相對比較簡單,對于初學者應該有很好的幫助!請關注鍵盤碼農。后期繼續更新,如有什么看法請在下方評論。第一時間為您解答哦!


          主站蜘蛛池模板: 亚洲AV日韩AV天堂一区二区三区| 亚洲日韩国产精品第一页一区| 欧洲精品免费一区二区三区| 亚洲熟女一区二区三区| 精品国产香蕉伊思人在线在线亚洲一区二区 | 久久人妻内射无码一区三区| 精品视频无码一区二区三区| 成人丝袜激情一区二区| 国产精品盗摄一区二区在线| 不卡无码人妻一区三区音频| 国产精品福利一区二区久久| 在线观看日韩一区| 久久免费区一区二区三波多野| 午夜DV内射一区区| 日韩电影一区二区三区| 午夜视频在线观看一区二区| 亚洲色欲一区二区三区在线观看| 亚洲熟妇AV一区二区三区浪潮| 日韩有码一区二区| 无码人妻精品一区二区三区蜜桃| 日韩有码一区二区| 亚洲av无码一区二区三区在线播放| 一区二区三区四区视频在线| 99精品一区二区三区无码吞精 | 国产区精品一区二区不卡中文| 亚洲变态另类一区二区三区| 久久亚洲中文字幕精品一区四| 亚洲日韩中文字幕一区| 精品一区二区三区免费| 成人区人妻精品一区二区不卡| 国产精品视频一区二区三区四| 精品女同一区二区三区免费播放| 91福利一区二区| 国精产品一区一区三区免费视频| 成人免费一区二区三区在线观看| 国产成人精品视频一区二区不卡| 免费无码AV一区二区| 天堂一区二区三区在线观看| 亚洲国产一区国产亚洲| 国产凹凸在线一区二区| 精品女同一区二区|