<mark id="j7xzf"></mark>

        <output id="j7xzf"><ins id="j7xzf"><nobr id="j7xzf"></nobr></ins></output>

           <i id="j7xzf"><output id="j7xzf"><th id="j7xzf"></th></output></i>

          <b id="j7xzf"><cite id="j7xzf"><big id="j7xzf"></big></cite></b><cite id="j7xzf"><p id="j7xzf"><th id="j7xzf"></th></p></cite>

              

                        
	
                        
        
                        
            
                        
                
            
                        
            
                        
        
                        
    
                        
    
                        
    
                        
                     
                        
            常用軟件|效果代碼|設計理論|技術文章|                        
                        
           
    
                        
    
                        


                        

                        
  
                        
  
                        當前位置：首頁 > 資源 > 效果代碼 >  正文
                        
      
                        MixItUp動畫過濾和排序jQuery插件        
                        
欄目分類：效果代碼   發布日期：2014-09-11   來源：   瀏覽次數：次
    
                        
    
                        
    
                        
			
                        什么是MixItUp？MixItUp是一個jQuery插件，提供動畫過濾和排序。MixItUp是偉大的，像管理投資組合，畫廊和博客的任何分類或排序的內容，而且還可以作為一個功能強大的工具，從事應用程序的用戶界面和數據可視化。
                              
                        
                        
                        MixItUp動畫過濾和排序jQuery插件
                        

                        
什么是MixItUp？
                        
MixItUp是一個jQuery插件，提供動畫過濾和排序。
                        
MixItUp是偉大的，像管理投資組合，畫廊和博客的任何分類或排序的內容，而且還可以作為一個功能強大的工具，從事應用程序的用戶界面和數據可視化。
                        
MixItUp起著很好的與您現有的HTML和CSS，使之成為響應布局的絕佳選擇。
                        
而不是用絕對定位來控制布局，MixItUp設計與現有的在線流布局工作。要使用百分比，媒體查詢，inline-block的，甚至是彎曲盒子？沒問題！
                        

                        
頁面代碼                        

                        
	
                          
	
                        1. <div id="Container"> 
                          2. 
	
                        2.     <div class="mix category-1" data-my-order="1"> ... div> 
                          3. 
	
                        3.     <div class="mix category-1" data-my-order="2"> ... div> 
                          4. 
	
                        4.     <div class="mix category-2" data-my-order="3"> ... div> 
                          5. 
	
                        5.     <div class="mix category-2" data-my-order="4"> ... div> 
                          6. 
	
                        6. div> 
                          7. 
	
                        

                        
MixItUp目標與類混合容器中的元素。分類過濾添加為類和排序屬性添加自定義數據屬性。
                        
建立你的過濾器控制：                        

                        
	
                          
	
                        1. class="filter" data-filter=".category-1">Category 1 
                          2. 
	
                        2. class="filter" data-filter=".category-2">Category 2 
                          3. 
	
                        

                        
過濾發生在過濾器按鈕被點擊。
                        
建立您的排序控件：                        

                        
	
                          
	
                        1. class="sort" data-sort="my-order:asc">Ascending Order 
                          2. 
	
                        2. class="sort" data-sort="my-order:desc">Descending Order 
                          3. 
	
                        

                        

                        排序發生在排序按鈕被點擊。
                        

                        CSS
                        

                        
	
                          
	
                        1. #Container .mix{ 
                          2. 
	
                        2.     display: none; 
                          3. 
	
                        3. } 
                          4. 
	
                        

                        

                        在項目的樣式，設置目標元素沒有顯示屬性。 MixItUp將只顯示那些匹配當前的過濾元件。
                        

                        
JS
                        
實例MixItUp上使用jQuery的容器：
                        

                        
	
                          
	
                        1. $(function(){ 
                          2. 
	
                        2.     $('#Container').mixItUp();   
                          3. 
	
                        3. }); 
                          4. 
	
                        

                        

                        使用我們的容器的ID，我們可以實例化MixItUp與jQuery的方法.mixItUp（）
                        

                        
        
                
        
        
                        
            
                        
             
                        
                        官方網站                        查看DEMO                        立即下載                              
                              
                        
        
                        			
                        相關熱詞：MixItUp排序jQuery插件
                        
            
                        
    
                        
      
                        
    
                        
  	
                        
    	
                        上一篇：一款圖片彈出層相冊jQuery插件for jQuery
                        
        
                        jQuery簡單二級下拉菜單：下一篇
                        
    
                        
                
                        
    
                        
      
                        相關內容
                        
        
       
                        
                
                        
    
                        
     
                        
      
                        
	    
                        

    
                        

                        

                        

                        
        
                        
            
                        這些是最新的
                        
			            
        
                        
        
                        
        
                        
          
                        熱門關鍵詞
                        
    AE軟件
    返回頂部
    js模塊拖動
    jQuery表單美化
    偽靜態
    標簽云
    AdSense
    彩色粉筆
    js客服代碼
    滾動表格
    綠色版
    翻頁效果
    帝國CMS
    交互式透明工具
    slicebox
    Retina
    RangeSlider
    指定位置
    CSS3美化
    觸摸
    wamp5
    頁面設計
    PIGCMS
    首字母轉換成大寫
    vba代碼
    左右滾動
    百度
    幻燈片配音
    jQuery編輯器
    圖片放大鏡
        
                        

                        
        
         
                        
            
                        熱門排行
                        
                         
                    
                        

                        
    
                        

                        





                        關于聚合分享
                        聚合分享整合國內外優質的資源，內容涉及js效果代碼，平面設計教程，網頁設計教程，cms建站，網頁模版等領域，提供最新的行業資訊，設計教程和素材參考學習。
                        版權聲明
                        聲明：本站發布的資源均來自互聯網，僅供交流學習之用，請勿作商業用途，所有資源版權歸原作者所有。如果有侵犯到您的權益，請聯系本站刪除，謝謝合作！
                        
本站為原創網站其他源碼均為仿制。如有意購買本站模板請聯系本站管理員QQ:774780837
                        Copyright © 2014  聚合分享 版權所有   京ICP備14037269號-1  關于聚合分享 |  廣告合作 |  版權聲明 |  意見反饋 |  聯系方式 |  原創投稿 |  網站地圖 |  友情鏈接
                        常用軟件效果代碼設計理論技術文章
                        

av男人的天堂在线观看国产_好吊妞无缓冲视频观看_邻居老头把我弄舒服死了_我把她日出水了刺激视频

                        <mark id="j7xzf"></mark>
                              <output id="j7xzf"><ins id="j7xzf"><nobr id="j7xzf"></nobr></ins></output>
                                
<i id="j7xzf"><output id="j7xzf"><th id="j7xzf"></th></output></i>
                                <b id="j7xzf"><cite id="j7xzf"><big id="j7xzf"></big></cite></b><cite id="j7xzf"><p id="j7xzf"><th id="j7xzf"></th></p></cite>