<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          el-date-picker時間插件獲取值格式問題

          前端達人

          最近在使用vue el-date-picker時間控件,發現直接獲取的時間是日期格式,而我需要的格式是

          yyyy-MM-dd HH:mm

          那么如何轉換時間控件格式呢

          <el-date-picker 
          v-model="selectDatetime"
           type="datetime" placeholder="選擇時間"
           @change="dataSearch" value-format="yyyy-MM-dd HH:mm" 
          format="yyyy-MM-dd HH:mm"> </el-date-picker>

          在日期控件中,加入上述加粗格式即可




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

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

          Vue實現ul中item 刪除

          前端達人

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Todolist</title>
              <script src="./js/vue.js"></script>
          
          </head>
          <body>
          <div id="app">
              {{msg}}
              <div>
                  <input v-model="txtValue">
                  <button type="button" @click="handleSubmit">提交</button>
                  <ul>
                      <li v-for="(item,index) of list"
                          :key="index"
                          :index="index"  @click="deleteItem(index)" //傳遞下標值 >
                          {{item}}
                      </li>
                  </ul>
              </div>
          </div>
          <script>
              new Vue({
                  el: '#app',
                  data: {
                      msg: 'hello Vue!!',
                      txtValue: '',
                      list: []
                  },
                  methods: {
                      handleSubmit: function () {
                          this.list.push(this.txtValue)
                          this.txtValue =''
                      },
                      deleteItem: function (index) {
                          //alert(index)
                          this.list.splice(index,1) //通過下標刪除 }
                  }
              })
          </script>
          </body>
          </html>




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

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

          github 22個優秀的React項目

          前端達人

          React Native :

          1. https://github.com/fbsamples/f8app
          2. https://github.com/iSimar/HackerNews-React-Native
          3. https://github.com/catalinmiron/react-native-dribbble-app
          4. https://github.com/FaridSafi/react-native-gifted-messenger
          5. https://github.com/7kfpun/FinanceReactNative
          6. https://github.com/race604/ZhiHuDaily-React-Native
          7. https://github.com/lwansbrough/react-native-camera
          8. https://github.com/xiekw2010/react-native-gitfeed
          9. https://github.com/wwayne/react-native-nba-app
            10 . https://github.com/akveo/react-native-reddit-reader
            11 . https://github.com/faridsafi/react-native-basketball

          React :

          1. https://github.com/andrewngu/sound-redux
          2. https://github.com/benoitvallon/react-native-nw-react-calculator
          3. https://github.com/casesandberg/react-color
          4. https://github.com/gatsbyjs/gatsby
          5. https://github.com/getsentry/sentry/
            6 . https://github.com/gpbl/isomorphic500
            7 . https://github.com/insin/react-hn
            8 . https://github.com/fatiherikli/fil
            9 . https://github.com/khan/perseus
            10 . https://github.com/BinaryMuse/imgsible
          6. https://github.com/skidding/flatris
            12 . http://www.amazon.com/gp/product/1491929006?ie=UTF8&camp=1789&creativeASIN=1491929006&linkCode=xm2&tag=mybridge-20



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

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          作者:吳博
          鏈接:https://www.jianshu.com/p/2dc805c6c007
          來源:簡書

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

          CSS3實現自定義Checkbox和Radiobox

          前端達人

          我們知道瀏覽器自帶的Checkbox復選框不怎么美觀(這或許是我們看習慣了的緣故),而且復選框在不同的瀏覽器上顯示的樣式又有很大的差異,由于目前越來越多的人開始接受支持CSS3的現代瀏覽器,所以今天就簡單的用一些CSS3代碼來自定義Checkbox的顯示方式,個人覺得比瀏覽器自帶的Checkbox美觀不少。

          下面先來看一下最終實現效果

          效果演示地址

          效果圖如下

           

          下面來分析一下源代碼,原理很簡單,先把頁面上<input type="checkbox" />的display設置為none,從而把它隱藏掉,然后利用CSS3代碼來繪制與checkbox鄰近的label元素:

          HTML代碼:

          <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label> <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label> <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>

          CSS3代碼:

          復制代碼
          .regular-checkbox + label { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative;
          }
          復制代碼

          下面的CSS代碼可以讓checkbox選中后出現陰影的效果,主要利用了box-shadow屬性:

          .regular-checkbox + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
          }

          radiobox的實現也是同樣的原理,具體實現方式大家可以在線演示研究,也可以下載源碼,非常簡單實用。

          分類: HTML5/CSS3



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

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

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

          vue.js學習之 如何在better-scroll加載完成后,自動滾動到最底部(示例代碼)

          前端達人

          作者:_林沖

          簡介  這篇文章主要介紹了vue.js學習之 如何在better-scroll加載完成后,自動滾動到最底部(示例代碼)以及相關的經驗技巧,文章約1091字,瀏覽量459,點贊數3,值得參考!

           

          首先我們需要使用scrollTo這個方法:

          scrollTo(x, y, time, easing)

          參數:

          • {Number} x 橫軸坐標(單位 px)
          • {Number} y 縱軸坐標(單位 px)
          • {Number} time 滾動動畫執行的時長(單位 ms)
          • {Object} easing 緩動函數,一般不建議修改,如果想修改,參考源碼中的 ease.js 里的寫法

           

          為了組件的復用性,我們需要在scroll組件的props添加一個flag,可以監聽父元素是否開啟滾動到最底部。

          scrollToEndFlag: {
                  type: Boolean,
                  default: false
          }
          


          接下來我們在scroll組件的mounted中加入如下代碼:

          setTimeout(() => {
                  this._initScroll()
                  console.log(this.scroll.maxScrollY)
                  if(this.scrollToEndFlag) {
                      this.scroll.scrollTo(0,this.scroll.maxScrollY)
                  }
          }, 100)  
          


          最后在父組件中使用

          <scroll :scrollToEndFlag="scrollToEndFlag"> </scroll>
          




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

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

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

          vue聊天對話框滾動條自動定位到最底部

          前端達人

          這么寫的話只能定位到發送消息前的前一條消息,不能定位到最底部

           

          
          
          1. .then(
          2. this.$nextTick(() => {
          3. let msg = document.getElementById('chatRecord') // 獲取對象
          4. msg.scrollTop = msg.scrollHeight // 滾動高度
          5. })
          6. )

          解決:寫在生命周期updated里面可以完美定位!

          
          
          1. updated(){
          2. // 聊天定位到底部
          3. let ele = document.getElementById('chatRecord');
          4. ele.scrollTop = ele.scrollHeight;
          5. },

           


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

          文章來源:csdn

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

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

          Vue開發聊天界面

          前端達人

          Vue開發聊天界面(一)

          最近業務里面有個需求就是開發一個類似微信的聊天頁面的H5,不需要像微信那么復雜,但是得有個樣子,弄了半天之后終于有了個樣子。決定寫個博客記一下這個過程,希望后續不會鴿

          組件拆分

          拆了3個,打字的,聊天item聊天list。大概就這樣了

          其中聊天list 用了一個better-scroll這個第三方插件。

          首先第一步就是開發這個聊天item

          聊天item 開發

          分析一下需求,別人發過來的和我們發過去的是兩個排版和樣式,但是不用單獨寫兩個,用個邏輯區分一下就可以了,也可以動態綁定css什么的差別很小。

          <template> <div class="record-wrapper"> <!-- 時間,后續開發 --> <div class="time"></div> <!-- 消息, msg通用樣式 msg-right/msg-left 區分排版左右 --> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <!-- 消息框, msg通用樣式 message-wrapper-right/left 區分聊天框顏色 --> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> </div> </template> 

          這個是只有1邊的,邏輯就是在消息那邊加個v-if,判斷來源,也可以動態綁定css

          弄好以后就這樣

          <template> <div class="record-wrapper"> <div class="time"></div> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> <div v-else class="msg msg-left"> <div class="img-wrapper"> <img class="img" :src="from2" /> </div> <div class="message-wrapper message-wrapper-left"> <div class="message">{{ message }}</div> </div> </div> </div> </template> <script> export default {
            name: "",
            props: {
              from: Number, // 1: 自己    2: 別人
              message: String,
              timestamp: Date,
            },
            data() {
              return {
                from1: require("../../../assets/imgs/from1.jpg"),
                from2: require("../../../assets/imgs/from2.jpg"),
              };
            },
          }; </script> 

          個人覺得css還是比較重要的,這里用了sass來寫。主要解決方案就是用一個display:flex配合上flex-direction: row-reverse讓頭像和消息左右排列

          <style lang="scss" scoped> .record-wrapper { margin: 4px; padding: 4px; } .time { text-align: center; } .msg { display: flex; flex-direction: row; .message-wrapper { max-width: 220px; margin: 0px 10px 0px 10px; .message { margin: 8px; word-wrap: break-word; //英文換行 } } .message-wrapper-left { background-color: lightslategray; border-radius: 0px 12px 12px 12px; } .message-wrapper-right { background-color: powderblue; border-radius: 12px 0px 12px 12px; } .img { flex: auto; height: 36px; width: 36px; border-radius: 8px; } } .msg-right { flex-direction: row-reverse; } .msg-left { flex-direction: row; } </style> 

          這個是沒有調樣式的,只是為了自己嗨弄的,可能會很丑。
          最后大概就是這樣的

          Vue開發聊天界面(二)

          我開發好了一個聊天的item,可以根據發送方和接收方來分別渲染一個item,這一章我把他們放在一個list的界面里面,讓一串item構成一個聊天頁面,并且這個聊天頁面能夠上下滾動。

          其實我覺得很簡單,難點就2個。首先是滑動,這里用了better-scroll這個組件,可以在網上搜,挺好用的。另一個就是頁面布局的問題,寫點css還是沒得問題的。
          首先去better-scroll的官網,按著他的核心邏輯抄一下。不詳細談了,總之來說,會有三層嵌套。我個人命名他們為: wrapper 和content和 item 這三層。
          先弄一個json,當做會被填充的數據。

          export const chatItems = [ { type:1, message:"fdaf地方撒風大撒風阿斯頓飛fd阿斯頓飛安德森發大水發大水發大水奮斗發的大撒風安德森 發大發大水發", from:1, timestamp: new Date() }, { type:1, message:"fdaf地方撒風大撒aa風阿斯頓飛ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奮斗發的大撒風安德森 發大發大水發", from:1, timestamp: new Date() }, { type:1, message:"做緊d咩嘢?", from:2, timestamp: new Date() }, { type:1, message:"???", from:2, timestamp: new Date() }, ] 

          然后開始寫vue的代碼

          <template> <div class="scroll-wrapper" ref="scroll"> <div class="scroll-content"> <chat-item v-for="item in chatItems" :key="item.message" :type="item.type" :message="item.message" :timestamp="item.timestamp" :from="item.from" ></chat-item> </div> </div> </template> <script> import BScroll from "@better-scroll/core";
          import MouseWheel from "@better-scroll/mouse-wheel"
          import ChatItem from "./ChatItem";
          import { chatItems } from "../../../assets/data/items";
          
          BScroll.use(MouseWheel)
          
          export default {
            name: "",
            data() {
              return {
                chatItems,
                bs: null
              };
            },
            components: {
              "chat-item": ChatItem,
            },
          
            mounted() {
              this.init();
            },
            beforeDestroy() {
              this.bs.destroy();
            },
            methods: {
              // better-scroll的代碼
              init() {
                this.bs = new BScroll(this.$refs.scroll, {
                  scrollY: true, // 上下滾動
                  click: true,   // 開啟點擊事件
                  startY: document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight + 5 , // 初始高度
                  mouseWheel: true,   // 鼠標滾動
                  probeType: 2, // listening scroll hook
                });
          
                // 下面的不要也行,官網抄的順便留下來了
                this.bs.on("scroll", ({ y }) => {
                  console.log("scrolling:" + y);
                });
                this.bs.on("scrollEnd", () => {
                  console.log("scrollingEnd");
                });
              },
              clickHandler(item) {
                alert(item);
              },
            },
          }; </script> <style lang="scss" scoped> .scroll-wrapper {
            height: calc(100% - 160px);  // 留一些空間給 打字的地方 和 header
            overflow: hidden;    // 非常之關鍵
          } </style> 

          最后是這個樣子的了

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

          文章來源:簡書。作者:Good_Nine9

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

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





          WebSocket 百科

          前端達人

          WebSocket是一種在單個TCP連接上進行全雙工通信的協議。WebSocket通信協議于2011年被IETF定為標準RFC 6455,并由RFC7936補充規范。WebSocket API也被W3C定為標準。
          WebSocket使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在WebSocket API中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,并進行雙向數據傳輸。
          中文名
          WebSocket
          外文名
          WebSocket
          解    釋
          基于TCP的全雙工通信協議
          優    點
          服務器可以主動傳送數據給客戶端
          功    能
          實現了瀏覽器與服務器全雙工通信

          目錄

          背景

           語音
          很多網站為了實現推送技術,所用的技術都是輪詢。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對服務器發出HTTP請求,然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點,即瀏覽器需要不斷的向服務器發出請求,然而HTTP請求可能包含較長的頭部,其中真正有效的數據可能只是很小的一部分,顯然這樣會浪費很多的帶寬等資源。
          而比較新的技術去做輪詢的效果是Comet。這種技術雖然可以雙向通信,但依然需要反復發出請求。而且在Comet中,普遍采用的長鏈接,也會消耗服務器資源。
          在這種情況下,HTML5定義了WebSocket協議,能更好的節省服務器資源和帶寬,并且能夠更實時地進行通訊。

          優點

           語音
          • 較少的控制開銷。在連接創建后,服務器和客戶端之間交換數據時,用于協議控制的數據包頭部相對較小。在不包含擴展的情況下,對于服務器到客戶端的內容,此頭部大小只有2至10字節(和數據包長度有關);對于客戶端到服務器的內容,此頭部還需要加上額外的4字節的掩碼。相對于HTTP請求每次都要攜帶完整的頭部,此項開銷顯著減少了。
          • 更強的實時性。由于協議是全雙工的,所以服務器可以隨時主動給客戶端下發數據。相對于HTTP請求需要等待客戶端發起請求服務端才能響應,延遲明顯更少;即使是和Comet等類似的長輪詢比較,其也能在短時間內更多次地傳遞數據。
          • 保持連接狀態。與HTTP不同的是,Websocket需要先創建連接,這就使得其成為一種有狀態的協議,之后通信時可以省略部分狀態信息。而HTTP請求可能需要在每個請求都攜帶狀態信息(如身份認證等)。
          • 更好的二進制支持。Websocket定義了二進制幀,相對HTTP,可以更輕松地處理二進制內容。
          • 可以支持擴展。Websocket定義了擴展,用戶可以擴展協議、實現部分自定義的子協議。如部分瀏覽器支持壓縮等。
          • 更好的壓縮效果。相對于HTTP壓縮,Websocket在適當的擴展支持下,可以沿用之前內容的上下文,在傳遞類似的數據時,可以顯著地提高壓縮率。

          握手協議

           語音
          WebSocket 是獨立的、創建在 TCP 上的協議。
          Websocket 通過HTTP/1.1 協議的101狀態碼進行握手。
          為了創建Websocket連接,需要通過瀏覽器發出請求,之后服務器進行回應,這個過程通常稱為“握手”(handshaking)。


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

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

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


          VUE 設置定時器和清理定時器

          前端達人

          使用鉤子函數對定時器進行清理,失敗了,

          1、在data中聲明要設置的定時器名稱:

          
          
          1. data() {
          2. return {
          3. timer: null // 定時器名稱
          4. }
          5. },復制代碼

          2、在mounted中創建定時器:

          
          
          1. this.timer = (() => {
          2. // 某些操作
          3. }, 5000)復制代碼

          3、在頁面注銷時清理定時器:

          
          
          1. beforeDestroy() {
          2. clearInterval(this.timer);
          3. this.timer = null;
          4. }復制代碼

          然鵝,并沒什么卵用,在切換頁面后,定時任務依然頑強的奔跑著。

          
          
          1. beforeDestroy() {
          2. clearInterval(this.timer);
          3. this.timer = null;
          4. console.log(this.timer) //輸出為: null,但是任務依然在繼續運行
          5. }復制代碼

          可能是我的姿勢不對吧。害羞.jpg

          經過在各大論壇一番查找發現:

          通過$once這個事件偵聽器在定義完定時器之后的位置來清除定時器:

          
          
          1. const timer = setInterval(() =>{
          2. // 某些定時器操作
          3. }, 5000);
          4. // 通過$once來監聽定時器
          5. // 在beforeDestroy鉤子觸發時清除定時器
          6. this.$once('hook:beforeDestroy', () => {
          7. clearInterval(timer);
          8. }) 復制代碼

          哇,成功了...



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

          文章來源:csdn

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

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




          textarea去掉右下角的條紋

          前端達人

          resize:none

          <textarea style="resize:none " rows="8" cols="80" ></textarea> 
          
          • 1

          在這里插入圖片描述

          如果你使用谷歌瀏覽器或火狐瀏覽器,你會發現頁面上的textarea元素的右下角有個小三角,用鼠標箭頭拖拽它,你的textarea就能隨著放大或縮小。這是現代瀏覽器為方便用戶而添加的一個輔助功能(很遺憾,不包括IE,如果你使用IE,是看不到的。)。Web程序員在設計網頁時,一般給了textarea一個固定的長寬,通常是配合布局而設定。但挑剔的用戶往往會認為太小或太大。有了這個可以調整大小的工具后,用戶就可以自己選擇合適的大小了。

          但是,有時候是應用的需要,Web程序員需要禁止這個可以調整textarea大小的功能(IE完全沒這個問題!),也就是去掉右下角的小三角,有什么辦法呢?很簡單,使用CSS的resize屬性。

          
              
          1. <style type="text/css">
          2. textarea {
          3. resize: none;
          4. }
          5. </style>
           resize 屬性設置為 none  textarea 就變成了固定大小,小三角也消失了

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

          文章來源:csdn

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

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

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合