實現功能：dataTable某列內容過長的話，只顯示部分內容，鼠標點擊顯示全部，再點擊顯示部分。可以切換。

效果圖：

鼠標點擊：

如果再次點擊，備注內容又收縮了。

JS實現代碼如下：

var remarkShowLength = 10;//默認現實的字符串長度

datatable中的配置：

首先在 columnDefs 中顯示文本的時候，如果超長，就只顯示部分。

然后通過 createdRow ，如果備注信息超長的話，給該td元素添加上onclick時間，鼠標點擊的時候，可以進行切換。并且將全部的字符信息 data.remarks 放置到屬性中去，以便后面可以取出來。

    


        


            


            

        

        


            

                "createdRow": function( row, data, dataIndex ) {
            

        

    

    


        


            


            

        

        


            

                if(data.remarks.length > remarkShowLength){//只有超長，才有td點擊事件
            

        

    

    


        


            


            

        

        


            

                $(row).children('td').eq(7).attr('onclick','javascript:changeShowRemarks(this);');
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                $(row).children('td').eq(7).attr('content',data.remarks);
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                "ajax" : {
            

        

    

    


        


            


            

        

        


            

                "url" : "/cluster/list?importantLevel=" + $('#searchImportantLevelSelect').val()
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                "columnDefs" : [
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "type": "date",
            

        

    

    


        


            


            

        

        


            

                "targets": 7,
            

        

    

    


        


            


            

        

        


            

                "render": function (data, type, full, meta) {
            

        

    

    


        


            


            

        

        


            

                if (full.remarks.length > remarkShowLength) {
            

        

    

 return getPartialRemarksHtml(full.remarks);//顯示部分信息

 } else {

 return full.remarks;//顯示原始全部信息 }

 }

}

]

下面從td的屬性中取出全部的remark，然后根據當前是顯示的全部還是顯示的部分信息，進行切換。

    


        


            


            

        

        


            

                //切換顯示備注信息，顯示部分或者全部
            

        

    

    


        


            


            

        

        


            

                function changeShowRemarks(obj){//obj是td
            

        

    

    


        


            


            

        

        


            

                var content = $(obj).attr("content");
            

        

    

    


        


            


            

        

        


            

                if(content != null && content != ''){
            

        

    

    


        


            


            

        

        


            

                if($(obj).attr("isDetail") == 'true'){//當前顯示的是詳細備注，切換到顯示部分
            

        

    

    


        


            


            

        

        


            

                //$(obj).removeAttr('isDetail');//remove也可以
            

        

    

    


        


            


            

        

        


            

                $(obj).attr('isDetail',false);
            

        

    

    


        


            


            

        

        


            

                $(obj).html(getPartialRemarksHtml(content));
            

        

    

    


        


            


            

        

        


            

                }else{//當前顯示的是部分備注信息，切換到顯示全部
            

        

    

    


        


            


            

        

        


            

                $(obj).attr('isDetail',true);
            

        

    

    


        


            


            

        

        


            

                $(obj).html(getTotalRemarksHtml(content));
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                //部分備注信息
            

        

    

    


        


            


            

        

        


            

                function getPartialRemarksHtml(remarks){
            

        

    

    


        


            


            

        

        


            

                return remarks.substr(0,remarkShowLength) + '&nbsp;&nbsp;<a href="javascript:void(0);" ><b>...</b></a>';
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //全部備注信息
            

        

    

    


        


            


            

        

        


            

                function getTotalRemarksHtml(remarks){
            

        

    

    


        


            


            

        

        


            

                return remarks + '&nbsp;&nbsp;<a href="javascript:void(0);" >收起</a>';
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

原文鏈接：https://blog.csdn.net/zz_chst/article/details/79587936?utm_source=blogxgwz5

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

當表格的列比較多的時候，可能就需要固定表格的寬度了，默認的100%寬已經不適應了。默認的100%寬要實現改變窗口大小也100%的話，在table元素上添加width="100%",至于css的100%為什么不生效，原因未知。下面就說說設置如何給datatables設置固定的寬度。

1.html代碼

<div id="tableArea"> <table id="userTable" class="display table table-bordered" cellspacing="0" > <thead> <tr> <th style="display: none">ck</th> <th>序號</th> <th>賬號</th> <th>姓名</th> <th>CPID</th> <th>CP名稱</th> <th>操作</th> </tr> </thead> </table> </div>

2.覆蓋某些樣式(我們的樣式優先級高，所以會覆蓋內置的樣式)

#tableArea .dataTables_wrapper { position: relative; clear: both; zoom: 1; overflow-x: auto;
} #tableArea table{ width: 800px;
}

這里的overflow-x:auto是新增的，表示表格內容超出寬度后，出現橫向滾動條；table的width必須寫死寬度，直接寫在table元素上不生效，原因未知。

3.設置列寬（可略）

"columns": [

　　　　{ "data": "number", "orderable": false ,"width":"100px","searchable": false}
]

4.運行瀏覽，發現此時，當瀏覽器窗口小于800像素的時候，表格出現了橫向的滾動條，正是我們想要的結果。

5.為什么不用"scrollX":true的配置實現橫向滾動條呢？查詢它渲染后的網頁發現，它把table拆分成了兩個表格，一個表示表頭，一個表示表體。這不是我想要的，而且它表頭的內容若是超出的話是隱藏的。

6.還有兩個樣式，可以參考參考，可能對你有用。

table td{

word-break:break-all;

}

單詞也可以允許換行，這對于單元格的寬度有很好的控制，而不會讓單元格被內容撐開！

table
{
        table-layout:fixed;
}

表格布局算法為固定（列寬由表格寬度和列寬度設定）。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

受分頁器影響，NiceScroll的滾動條一直顯示不正常

$("#ID").getNiceScroll().remove();

1 個解決方案

什么是通用設計？ 

設計產品需要考慮許多不同的因素，包括功能性、可靠性、美觀性、安全性等。產品設計的主要目標之一是讓具有不同能力的用戶能夠有效地與產品交互。幸運的是，通用設計是一個框架，它允許產品創建者設計適合所有用戶的體驗。本文將為大家講解通用設計概念、其核心原則，以及針對不同受眾和設備間的實用設計技巧。

通用設計適用于所有用戶

通用設計是一套建議，以確保產品或服務適用于不同身心能力的用戶。不同身體感官、心理或智力能力的人可以使用同一種產品，而無需任何額外調整或修改時，設計被認為是「通用的」。

通用設計對用戶和企業都有益處，因為更高的用戶可訪問性和滿意度會帶來更好的用戶留存率。認為體驗不錯的用戶，更有可能向他們的朋友和家人推薦產品，從而擴大用戶市場。

關于通用設計的3個常見誤解

盡管通用設計聽起來很簡單，但它卻是數字世界中最容易被誤解的概念之一。讓我們回顧一下關于通用設計的3大誤解

通用設計和無障礙設計是一回事

在了解了通用設計的含義后，大家可能會認為它是無障礙設計的同義詞。實際上，無障礙設計——指的是允許殘障用戶正確訪問產品或服務的設計，它是通用設計的一個組成部分。

通用設計關注所有人的需求，包括殘障用戶。換句話說，通用設計旨在讓產品、服務和環境更容易為每個人所用。例如，超市中的自動開門器，方便了坐輪椅的人和攜帶雜貨的人。

通用設計只關注功能

為了最大化地提高產品的可訪問性、可用性，需要人們投入時間和精力來創建可靠的產品功能，但功能良好的產品還不足以讓用戶滿意。事實上，用戶通常偏向具有良好功能性和美觀性的產品——而美觀性對可用性是有直接影響的。美學可用性效應表明，如果用戶擁有良好的視覺外觀，他們往往會覺得設計更有用。

通用設計是設計方法的一個很好的補充

這種誤解的根源來自于對通用設計含義的不理解。有些設計師認為這是一個「結果」，但實際上它是一個「過程」。通用設計并不是一套用在設計結尾時的指導方針，而是一套從始至終就整合進設計過程內的原則。實踐設計協作非常重要，以確保團隊中的每個人在創建產品時也共享相同的通用設計理念。

通用設計的核心原則是什么？

通用設計的一個經典例子：幫助輪椅使用者從街道轉到人行道的坡道設計。圖片來源 Adobe

通用設計的核心原則是由Ronald Mace和北卡羅來納州立大學的建筑師和產品設計師工作小組于1997年制定的。Mace 創造了「通用設計」這個詞，并用它來描述產品和環境的概念。

最初，通用設計主要是為實體產品和環境考慮的，但后來這個概念被應用于數字產品。接下來概述的通用設計原則，目的是幫助當今的數字設計師創造更人性化的產品和環境。

01 公平使用

設計師應致力于為所有用戶提供相同的使用方式。如果無法為不同能力的人提供相同的設計方案是，那么產品創造者應該找到合適的相似方案。例如，當你設計一個網站時，需要讓所有人都能訪問它——包括有視覺障礙和使用屏幕閱讀器技術的人。

視障人士在配有輔助技術的計算機上工作。圖片來源 Adobe

02 靈活使用

當你的設計投入使用時，它應該足夠靈活以適應用戶的節奏，以及不同用戶間的交互方式。例如，當你創建新設備時，它應針對右手或左手訪問進行優化。

03 簡單直觀地使用

你的設計應該簡單、直觀，并符合用戶的期望——無論用戶的知識或以前的經驗如何，都應該易于理解?？偸窃囍ハ槐匾膹碗s性，包括使你的視覺設計盡可能簡約，以及在任務完成期間和完成后為用戶提供適當的反饋。此外，一定要使用簡單易懂的語言與用戶交流。

04 可感知的信息

你的設計應持續向用戶傳達必要的信息。重要的是通過多種方式提供信息，以適應感官能力不同的用戶。例如，在設計視頻播放器時，建議添加啟用字幕的用戶界面（UI）元素。字幕可以幫助聾啞用戶理解多媒體內容，對非母語人士也很有用。

YouTube的視頻字幕。圖片來源YouTube

05 容錯

你的設計應將出錯的風險降至最低。為具有潛在危險的操作添加額外的「保護層」，防止用戶犯錯，例如不可逆轉的文件刪除。

Apple macOS 中的對話框，在用戶嘗試清空廢紙簍時變得可見。此對話框通知用戶無法撤消此操作。圖片來源：Nick Babich

06 最少的體力勞動

你的設計應盡量降低用戶使用時所需的體力工作。具有良好的人體工程學設計、最少的重復操作，以及舒適的交互。自動人行道——機場中常見的一種運行機制，幫助身體各異的人快速移動——展示了這一原則的應用。

在機場使用自動人行道的人。圖片來源 Adobe

07 接近使用的尺寸和空間

無論人們的體型、姿勢或活動能力如何，都應不受影響地使用產品。例如，當我們設計一個新的移動設備時，我們需要確保它適應手和握把尺寸的變化。對于許多項目來說，可以使用UI 套件去制作適合各種情況的UI元素。 

如何將通用設計應用于學習？

正如我們前面提到的，通用設計不是嚴格的指導原則，而是一種考慮用戶不同能力的設計方法。通用設計的目標不是創建一個一刀切的解決方案（很少能找到這樣的解決方案），而是探索不同的設計解決方案，并選擇更具包容性、可訪問性和教育性。由于每個產品都不同，因此實施通用設計方法可能因組織而異。以下是基本上適用于所有項目的一些建議。

01 進行用戶研究以了解你的用戶

了解你的用戶是產品設計最關鍵的方面——但如果你想實踐通用設計，你也應該了解用戶的多樣性。用戶研究在設計過程中起著關鍵作用，因為它直接影響我們的設計，這也是為什么所有設計過程的第一步都是收集用戶需求。旨在了解用戶的需求、行為方式以及與產品互動時的想法。

在進行用戶研究時，你應該：

-確定你的目標受眾；

-找到你目標受眾的正確代表。

-采訪代表以獲得有關用戶偏好和行為的寶貴見解。

在這個過程中實現用戶多樣性非常重要，這意味著你應該采訪目標用戶群中不同年齡、不同心理和不同身體能力的人。它將幫助你設計和開發可供不同類型用戶訪問的強大UI。在此階段結束時，你應該了解用戶的性質、目標以及使用你的產品想要完成的任務。

02 創建心智模型

根據你在第一步中收集的用戶研究，是時候創建用戶心智模型了。這些模型描述了用戶對系統的了解（或認為他們了解）什么，這使你可以了解特定人員看待情況的視角。將殘疾視為心智模型的一部分也很重要。例如，在為色盲用戶調整產品設計時，請確保顏色不是用作交流的唯一方式。

03 用戶流分析

用戶流分析是最有價值的用戶體驗 (UX) 設計方法之一。用戶流顯示了用戶如何與產品交互——包括用戶為實現目標而經歷的步驟，以及在此過程中每一步實際發生的操作或交互。用戶流分析使設計人員有機會了解不同交互發生的背景。

在進行用戶流分析時，建議設置一個量表，讓你能夠恰當地評估用戶交互：

1級：與產品交互時沒有重大問題；

2級：對特定產品功能有困難；

3級：大多數產品功能有困難；

4級：無法使用產品。

在此步驟結束時，你將了解產品的實際復雜級別。這些信息將幫助你在用戶有效性、效率和滿意度方面優化產品需求。

設計提示：使用同理心圖會讓你的用戶流分析變得更容易。當你站在用戶角度，去考慮用戶在使用時的所見、所想和所感時，它可以幫助你的團隊建立對用戶的同理心。

04 應用迭代式原型

原型制作是一個將團隊最初概念轉化為實際有形的過程，例如在紙上繪制模型（低保真）或創建功能設計模型（高保真）。應用迭代原型對探索和測試非常有用，因為原型可以在產品發布前幫助收集用戶豐富的反饋信息。它還允許關鍵的項目利益人或合作伙伴設想系統的未來樣子。

雖然原型制作是通用設計過程里的重要組成部分，但最大限度地減少構建原型的所需時間也同樣重要，產品設計師可以依靠UI套件來加快原型制作。

05 進行可用性測試

在這個階段，確保你的用戶不再遇到任何產品問題至關重要——可用性測試是實現這一目標的完美技術?？捎眯詼y試使可以幫助你直接觀察目標用戶與產品的交互。它可以是直接的（適度的可用性測試）或遠程的觀察?？捎眯詼y試允許設計人員從單個功能后退一步，從整體上審視產品、服務或環境?？捎眯詼y試的目的是評估你當前的設計，并明確改進的方式。

06 將用戶反饋環路整合進設計過程中

通用設計需要用戶的積極參與，因為你需要用戶的輸入讓設計運行起來。這意味著你的用戶時刻向你共享他們的反饋。通過反饋循環機制（例如共享產品問題、關注點和意見表單），能幫助你設計出更符合用戶期望和需求的產品。

設計應吸引所有用戶

通用設計期望造福任何人，因為它促進了產品的可訪問和可用性。在整個設計過程中考慮所有人的需求和能力，可以創造出真正滿足用戶需求的產品。

文章來源：站酷   作者：UX詞典

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務