您現在的位置是:電腦技術吧?>? 編程技術 ??>??css3氣泡樣式,css3下箭頭氣泡??>??正文詳情

css3氣泡樣式,css3下箭頭氣泡

伊晏靜2019-11-17 17:50:34 人圍觀
簡介css氣泡對話Bubble組件在實際工作中非常常見,無論是在web頁面還是應用程序中,例如:這里所謂的Bubble組件是指列表類型的Bubble組件。在這里,我們將討論它的Dcss三角邊框氣泡

前言氣泡組件在實際工作中非常普遍,無論是網頁中還是app中,比如:

我們這里所謂氣泡組件是指列表型氣泡組件,這里就其dom實現,css實現,js實現做一個討論,最后對一些細節點做一些說明,希望對各位有用小釵最近初學CSS,這里做一個專題,便于自身CSS提升,文章有不少問題與可優化點,請各位指導組件分類單由氣泡組件來說,他仍然屬于彈出層類組件,也就是說其會具有這些特性:① 布局為脫離文檔流② 可以具有mask蒙版,并且可配置點擊蒙版是否關閉的特性③ 可選的特性有點擊瀏覽器回退關閉組件以及動畫的顯示與隱藏動畫特性其中比較不同的是:① 不是居中定位② 具有一個箭頭標識,并且可以設置再上或者在下③ 因為具有箭頭,而且這個箭頭是相對于一個元素的,一般意義上我們任務是相對某個按鈕,所以說具有一個triggerEL所以單從這里論述來說,我們的組件名為BubbleLayer,其應該繼承與一個通用的Layer但是,就由Layer來說,其最少會具有以下通用特性:① 創建create② 顯示show③ 隱藏hide④ 摧毀destroy而以上特性并不是Layer組件所特有的,而是所有組件所特有,所以在Layer之上還應該存在一個AbstractView的抽象組件至此繼承關系便出來了,拋開多余的接口不看,簡單來說是這樣的:

組件dom層面實現最簡單實現單從dom實現來說,其實一個簡單的ul便可以完成任務代碼如下:ul class=cui-bubble-layer style=position: absolute; top: 110px; left: 220px;li data-index=0 data-flag=c價格:¥35/lili data-index=1 data-flag=c評分:80/lili data-index=2 data-flag=c級別:5/li/ul當然這里要有相關的css代碼如下:.cui-bubble-layer {background: #f2f2f2;border: #bcbcbc 1px solid;border-radius: 3px}至此形成的效果是醬紫滴:

代碼如下:!doctype htmlhtmlheadmeta charset=utf-8 /titleBlade Demo/titlemeta name=viewport content=width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=nometa content=telephone=no name=format-detection /meta name=apple-mobile-web-app-capable content=yes /style type=text/cssbody, button, input, select, textarea { font: 400 14px/1.5 Arial, Lucida Grande ,Verdana, Microsoft YaHei ,hei; }body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }body { background: #f5f5f5; }ul, ol { list-style: none; }.cui-bubble-layer { background: #f2f2f2; border: #bcbcbc 1px solid; border-radius: 3px; }/style/headbodyul class=cui-bubble-layer style=position: absolute; top: 110px; left: 220px;li data-index=0 data-flag=c價格:¥35/lili data-index=1 data-flag=c評分:80/lili data-index=2 data-flag=c級別:5/li/ul/body/html這個時候在為其加一個偽類,做點樣式上的調整,便基本實現了,這里用到了偽類的知識點:代碼如下:cui-bubble-layer:before { position: absolute; content: ; width: 10px; height: 10px; -webkit-transform: rotate(45deg); background: #f2f2f2; border-top: #bcbcbc 1px solid; border-left: #bcbcbc 1px solid; top: -6px; left: 50%; margin-left: -5px; z-index: 1;}這里設置了一個絕對定位的矩形框,為其兩個邊框設置了值,然后變形偏斜45度形成小三角,然后大家都知道了代碼如下:!doctype htmlhtmlheadmeta charset=utf-8 /titleBlade Demo/titlemeta name=viewport content=width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=nometa content=telephone=no name=format-detection /meta name=apple-mobile-web-app-capable content=yes /style type=text/cssbody, button, input, select, textarea { font: 400 14px/1.5 Arial, Lucida Grande ,Verdana, Microsoft YaHei ,hei; }body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }body { background: #f5f5f5; }ul, ol { list-style: none; }.cui-bubble-layer { background: #f2f2f2; border: #bcbcbc 1px solid; border-radius: 3px; }.cui-bubble-layer li { padding: 5px 10px; }.cui-bubble-layer:before { position: absolute; content: ; width: 10px; height: 10px; -webkit-transform: rotate(45deg); background: #f2f2f2; border-top: #bcbcbc 1px solid; border-left: #bcbcbc 1px solid; top: -6px; left: 50%; margin-left: -5px; z-index: 1;/style/headbodyul class=cui-bubble-layer style=position: absolute; top: 110px; left: 220px;li data-index=0 data-flag=c價格:¥35/lili data-index=1 data-flag=c評分:80/lili data-index=2 data-flag=c級別:5/li/ul/body/html

不足與擴展上面作為基本實現,沒有什么問題,但是其實際應用場景會有以下不足:① 基本的ul層級需要一個包裹層,包裹層具有一個up或者down的class,然后在決定那個箭頭是向上還是向下② 我們這里不能使用偽類,其原因是,我們的小三角標簽并不是一定在中間,其具有一定滑動的特性,也就是說,這個小三角需要被js控制其左右位置,他需要是一個標簽根據以上所述,我們的結構似乎應該是這個樣子滴:代碼如下:section class=cui-bubble-layer up-or-down-classi class=cui-icon-triangle/iulli data-index=0 data-flag=c價格:¥35/lili data-index=1 data-flag=c評分:80/lili data-index=2 data-flag=c級別:5/li/ul/section① 根元素上我們可以設置當前應該是up還是down的樣式② i標簽根據根元素的up或者down選擇是向上還是向下,并且該標簽可被js操作到此,似乎整個組件便比較完全了,但是真實的情況卻不是如此,怎么說了,上面的結構太局限了該組件需要一個容器,這個容器標簽應該位于ul之上,這個時候容器內部所裝載的dom結構便可以不是ul而是其他什么結構了其次,在手機上,我們可視項目在4S手機上不會超過5個,往往是4個,所以我們應該在其容器上設置類似overflow之類的可滾動屬性組件回歸最終結構由上所述,基于其是繼承至Layer的事實,我們可以形成這樣的結構:代碼如下:section class=cui-pop cui-bubble-layeri class=cui-pop-triangle/idiv class=cui-pop-head/divdiv class=cui-pop-bodyulli data-index=0 data-flag=c價格:¥35/lili data-index=1 data-flag=c評分:80/lili data-index=2 data-flag=c級別:5/li/ul/divdiv class=cui-pop-footer/div/section這個也可以是我們整個彈出層類的基本結構,我們可以在此上做很多擴展,但是這里我們不扯太多,單就氣泡組件做論述就氣泡組件,其結構是:代碼如下:section class=cui-pop cui-bubble-layeri class=cui-pop-triangle/idiv class=cui-pop-bodyulli data-index=0 data-flag=c價格:¥35/lili data-index=1 data-flag=c評分:80/lili data-index=2 data-flag=c級別:5/li/ul/div/sectionjs層面的實現這里仍然是采用的blade中的那一套繼承機制,如果有不明白又有點興趣的同學請移步:【blade的UI設計】理解前端MVC與分層思想關于模板因為我們這一部分的主題為重構相關,所以我們這里的關注點是CSS,我們首先生成我們的模板:代碼如下:section class=cui-pop %=wrapperClass % %if(dir == 'up'){ % %=upClass % % } else { % %=downClass % % } %i class=cui-pop-triangle/idiv class=cui-pop-bodyul class=cui-pop-list %=itemStyleClass %% for(var i = 0, len = data.length; i len; i ) { %% var itemData = data[i]; %li data-index=%=i% data-flag=c class=% if(index == i){ %%=curClass %%} % %if(typeof itemFn == 'function') { %%=itemFn.call(itemData) % % } else { %%=itemData.name%%} %% } %/ul/div/section這里給出了幾個關鍵的定制化點:① wrapperClass用以添加業務團隊定制化的class以改變根元素的class,如此的好處是便于業務團隊定制化氣泡組件的樣式② 給出了項目列表Ul的可定制化className,通用單單只是方便業務團隊做樣式改變③ 默認情況下返回的是傳入項目的name字段,但是用戶可傳入一個itemFn的回調,定制化返回以上模板基本可滿足條件,如果不滿足,便可把整個模板作為參數傳入了關于js實現由于繼承的實現,我們大部分工作已經被做了,我們只需要在幾個關鍵地方編寫代碼即可代碼如下:define(['UILayer', getAppUITemplatePath('ui.bubble.layer')], function (UILayer, template) {return _.inherit(UILayer, {propertys: function ($super) {$super();//html模板this.template = template;this.needMask = false;/p p this.datamodel = {data: [],wrapperClass: 'cui-bubble-layer',upClass: 'cui-pop--triangle-up',downClass: 'cui-pop--triangle-down',curClass: 'active',itemStyleClass: '',needBorder: true,index: -1,dir: 'up' //箭頭方向默認值};/p p this.events = {'click .cui-pop-listli': 'clickAction'};/p p this.onClick = function (data, index, el, e) {console.log(arguments);// this.setIndex(index);};/p p this.width = null;/p p //三角圖標偏移量this.triangleLeft = null;this.triangleRight = null;/p p this.triggerEl = null;/p p },/p p initialize: function ($super, opts) {$super(opts);},/p p createRoot: function (html) {this.$el = $(html).hide().attr('id', this.id);},/p p clickAction: function (e) {var el = $(e.currentTarget);var i = el.attr('data-index');var data = this.datamodel.data[i];this.onClick.call(this, data, i, el, e);},/p p initElement: function () {this.el = this.$el;this.triangleEl = this.$('.cui-pop-triangle');this.windowWidth = $(window).width();},/p p setIndex: function (i) {var curClass = this.datamodel.curClass;i = parseInt(i);if (i 0 || i this.datamodel.data.length || i == this.datamodel.index) return;this.datamodel.index = i;/p p //這里不以datamodel改變引起整個dom變化了,不劃算this.$('.cui-pop-list li').removeClass(curClass);this.$('li[data-index=' i ']').addClass(curClass);},/p p //位置定位reposition: function () {if (!this.triggerEl) return;var offset = this.triggerEl.offset();var step = 6, w = offset.width - step;var top = 0, left = 0, right;if (this.datamodel.dir == 'up') {top = (offset.top offset.height 8) 'px';} else {top = (offset.top - this.el.offset().height - 8) 'px';}/p p left = (offset.left 2) 'px';/p p if (offset.left (parseInt(this.width) || w) this.windowWidth) {this.el.css({width: this.width || w,top: top,right: '2px'});} else {this.el.css({width: this.width || w,top: top,left: left});}/p p if (this.triangleLeft) {this.triangleEl.css({ 'left': this.triangleLeft, 'right': 'auto' });}if (this.triangleRight) {this.triangleEl.css({ 'right': this.triangleRight, 'left': 'auto' });}},/p p addEvent: function ($super) {$super();this.on('onCreate', function () {this.$el.removeClass('cui-layer');this.$el.css({ position: 'absolute' });});this.on('onShow', function () {this.setzIndexTop(this.el);});}/p p });/p p});這里開始調用的,便可做簡單實現:代碼如下:'click .demo1': function (e) {if (!this.demo1) {var data = [{ name: 'span class=center普通會員/span' },{ name: 'span class=centervip/span' },{ name: 'span class=center高級vip/span' },{ name: 'span class=center鉆石vip/span'}];this.list = new UIBubbleLayer({datamodel: {data: data},triggerEl: $(e.currentTarget),width: '150px',triangleLeft: '20px'});}this.list.show();}稍作修改便可形成另一種樣子:

只不過我們還得考慮這個場景的發生,在項目過多過長時我們仍需要做處理:

這里有很多辦法可以處理,第一個是直接傳入maxHeight,如果高度超出的話便出現滾動條,第二個是動態在組件內部計算,查看組件與可視區域的關系我們這里還是采用可視區域計算吧,于是對原組件做一些改造,加一個接口:代碼如下:this.checkHeightOverflow();就這一簡單接口其實可分為幾個段落的實現第一個接口為檢測可視區域,這個可以被用戶重寫代碼如下:isSizeOverflow第二個接口是如果可視區域超出,也就是第一個接口返回true時的處理邏輯代碼如下:handleSizeOverflow考慮到超出的未必是高度,所以這里height改為了Size當然,這里會存在資源銷毀的工作,所以會新增一個hide接口代碼如下:isSizeOverflow: function () {if (!this.el) return false;if (this.el.height() this.windowHeight * 0.8) return true;return false;},/p phandleSizeOverflow: function () {if (!this.isSizeOverflow()) return;/p p this.listWrapper.css({height: (parseInt(this.windowHeight * 0.8) 'px'),overflow: 'hidden',position: 'relative'});/p p this.listEl.css({ position: 'absolute', width: '100%' });/p p //調用前需要重置位置this.reposition();/p p this.scroll = new UIScroll({wrapper: this.listWrapper,scroller: this.listEl});},/p pcheckSizeOverflow: function () {this.handleSizeOverflow();},/p paddEvent: function ($super) {$super();this.on('onCreate', function () {this.$el.removeClass('cui-layer');this.$el.css({ position: 'absolute' });});this.on('onShow', function () {/p p //檢查可視區域是否超出;this.checkSizeOverflow();this.setzIndexTop(this.el);});this.on('onHide', function () {if (this.scroll) this.scroll.destroy();});}

到此,我們的功能也基本結束了,最后實現一個定制化一點的功能,將我們的氣泡組件變成黑色:

結語今天的學習到此為止,因為小釵css3也算是初學,若是文中有誤,請提出該組件的動畫以來我準備做到Layer基類上,而是會介紹css3的動畫技術,這里便不介紹了

版權聲明:本文由 伊晏靜 整理編輯。

原標題:css3氣泡框上面,css3氣泡效果下載

轉載注明出處:http://www.dn9ww09s.icu/program/13240.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • acrobat pro序列號,acrobat pro 9序列號

    acrobat pro序列號,acrobat pro 9序列號 相關圖片acrobat9pro有些用戶不熟悉acrobat x pro。Acrobat x Pro是一個用于PDF創建和編輯的Adobe軟件。它是acrobat x軟件家族的一員,因為ACRadobeacrobat8序列號...

  • ps切片工具怎么使用教程,ps淘寶詳情頁制作步驟

    ps切片工具怎么使用教程,ps淘寶詳情頁制作步驟 相關圖片ps里面的切片工具在哪里切片工具是Photoshop中非常有用的工具。它可以把你需要的所有部分都保存到圖片中。如何使用PS切片工具?如何保存PS切片工具?讓我們跟隨超人軟件編輯器來了...

  • 常用中文字體,中文字體

    常用中文字體,中文字體 相關圖片設計用的中文字體窗口:新粗體:pmingliu粗體:Mingliu粗體:dfkai sb粗體:simhei song:Simsun新歌:nsimsun song:Fangson中文字體設計...

  • 怎么看cad自動保存路徑,2018cad自動保存位置

    怎么看cad自動保存路徑,2018cad自動保存位置 相關圖片cad怎么找自動保存文件相信所有從事室內設計的朋友都遇到過CAD軟件的突然崩潰。這時,CAD的自動保存功能將投入使用。那么CAD自動保存在哪里呢?如何打開CAD自動保存?下一步,超人...

  • 喝茶悠閑的句子,一個人喝茶悠閑的詩句

    喝茶悠閑的句子,一個人喝茶悠閑的詩句 相關圖片山上喝茶悠閑的詩詞打開flash,創建一個新的空白文檔,并設置背景色。我在這里設置的是綠色。您可以根據自己的喜好設置ha~,然后按Ctrl F8創建一個名為tea 2的新視頻剪輯你喝茶就喝茶...

  • 歐特克cad2012序列號和密鑰,cad2012產品序列號及密鑰

    歐特克cad2012序列號和密鑰,cad2012產品序列號及密鑰 相關圖片cad2012安裝碼Cad2012是地圖軟件CAD的2012版本,其特點是集成了世界領先的二維和三維設計。靈活、強大的特點使從事機械、建筑等方面的設計師更加強大。小編在這里分享CAauto2012安裝教程...

  • 啟動困難,win10啟動很慢

    啟動困難,win10啟動很慢 相關圖片電腦冷啟動困難癥狀:Dreamweaver 8啟動時出錯,即使注冊表項被刪除,系統被優化,程序被反復刪除和安裝兩三次,也無法進入程序~~說明:重命名或刪除用戶配置文件夾以Wiwin10啟動藍屏...

  • 蘋果怎么用ifunbox,ifunbox不越獄能用嗎

    蘋果怎么用ifunbox,ifunbox不越獄能用嗎 相關圖片ifileIfunbox是一個專門用于蘋果手機的文件管理工具。我相信有很多小伙伴不知道如何使用ifunbox。然后,超人軟件將為您提供使用ifunbox的教程。希望你喜歡怎么修改iphone字體...

  • 網頁設計配色教程,網頁設計配色方案

    網頁設計配色教程,網頁設計配色方案 相關圖片棕色 網頁設計一套舒適的網頁設計顏色網頁設計顏色搭配表...

  • tmp用什么文件打開,tmp文件怎么用

    tmp用什么文件打開,tmp文件怎么用 相關圖片tmp應該用什么打開一些用戶在他們的計算機上發現了TMP文件。許多人不知道他們可以使用什么,他們可以打開什么TMP文件,以及他們是否可以刪除。TMP文件是一種臨時文件,因為它常常...

熱評文章

  • 電視的dlna在哪,手機不支持dlna是什么意思

    電視的dlna在哪,手機不支持dlna是什么意思 相關圖片酷我支持dlna嗎很多人認為DLNA的概念很奇怪。DLNA的全稱是數字生活網絡聯盟,由索尼、英特爾、微軟等公司發起,旨在解決無線網絡與有線網絡的互聯問題康佳dlna怎么打開...

  • 誤刪手機相冊如何恢復,手機相冊誤刪還能還原嗎

    誤刪手機相冊如何恢復,手機相冊誤刪還能還原嗎 相關圖片小米回收站無刪除照片錯誤刪除照片的操作時有發生,特別是當Android手機需要重新繪制系統進行恢復時,有些用戶找不到照片的文件夾,甚至恢復時照片也會被刪除。在這種情況下我該...

  • excel表格單元格大小調整,如何調整單元格大小

    excel表格單元格大小調整,如何調整單元格大小 相關圖片怎么調整表格大小今天,我將介紹如何調整表格和單元格的大小。讓我們看看如何更改表大小,首先選擇表。在屬性窗口中,我們可以調整表格的寬度來改變單元格的大小,首先將光標...

  • 360保險箱顯示運行出錯,360保險箱為什么打不開

    360保險箱顯示運行出錯,360保險箱為什么打不開 相關圖片360保密箱怎么打開近日,不少360安全衛士的用戶和朋友反映,當他們打開360安全衛士時,系統提示在動態鏈接庫sfc_os.dll上找不到序號7,導致安全衛士無法打開。如果360保360隱私保險箱打...

  • 宇宙是無限的嗎,宇宙無限論

    宇宙是無限的嗎,宇宙無限論 相關圖片全能宇宙哈哈,也許在看了這片無空間星系之后,你會認為它是由指揮螺旋完成的。對不起,我想錯了,我會輕描淡寫這個過程。關鍵是補充核心思想例證1。在軟化圓形筆畫的基礎上,...

  • 為什么ppt會自動播放,怎樣讓ppt自動播放

    為什么ppt會自動播放,怎樣讓ppt自動播放 相關圖片ppt怎么停止自動播放一定有很多小伙伴在使用PTT發布報告,你需要它來自動播放它。現在,超人軟件將介紹PPT自動播放設置方法以及如何取消PPT自動播放。希望你不要錯過設置ppt自動播...

  • 做網頁制作怎么樣,網頁制作什么

    做網頁制作怎么樣,網頁制作什么 相關圖片網頁制作工具在制作XHTML CSS頁面的過程中,解決這個問題的辦法是解決得太多了。充其量,這只是一些建議,為剛剛開始學習標準網頁制作的朋友。如果你說的不對,請原諒我。當然網...

  • rpc服務器不可用什么意思,為什么rpc服務器不可用

    rpc服務器不可用什么意思,為什么rpc服務器不可用 相關圖片電腦出現rpc服務器不可用怎么辦有網友反映,RPC服務器不可用。他們不知道這意味著什么,也不知道如何解決。RPC服務器的不可用主要是由打印機RPC或遠程過程調用協議(rem)的服務引...

  • ps素材網站,做ps可以在哪些網站上找素材

    ps素材網站,做ps可以在哪些網站上找素材 相關圖片ps素材網哪個好如果你想設計出一架酷酷的飛機,設計師的一雙巧手不過是一個沒有飯吃不下的女人。豐富優質的PS材料是女人手中的米。有了這些PS材料,設計師可以充分發揮自己的想...

  • 筆記本鍵盤全部沒反應,華碩鍵盤某些按鍵失靈

    筆記本鍵盤全部沒反應,華碩鍵盤某些按鍵失靈 相關圖片筆記本電腦多少錢因為筆記本電腦的鍵盤是固定的,所以當鍵盤出現故障時,會讓很多小朋友很苦惱。筆記本鍵盤壞了怎么辦?筆記本鍵盤壞了怎么辦?讓我們跟隨超人軟件編輯器來了...

關注微信

变脸官网查询