您現在的位置是:電腦技術吧?>? 編程技術 ??>??什么是模態對話框,模態與非模態對話框??>??正文詳情

什么是模態對話框,模態與非模態對話框

長孫傲柏2019-11-18 15:30:33 人圍觀
簡介qt模態對話框本文詳細總結了HTML 5頁面切換和模式對話框使用的效果。與您分享以供參考。具體分析如下:頁面動畫:數據轉換屬性可以定義頁面切換的動畫效果。例如:a href=qt非模態對

本文詳細總結了html5各種頁面切換效果和模態對話框用法。

分享給大家供大家參考。

具體分析如下:頁面動畫:data-transition 屬性可以定義頁面切換是的動畫效果。

例如:a href=index.html data-transition=popI'll pop/adata-transition 參數表:參數說明slide 從右側向左滑入頁面slideup 從底部向上滑入slidedown 從上向下滑入pop 從中心漸顯展開fade 漸顯flip 翻轉備注:如果想要在目標頁面中顯示后退按鈕,可以在鏈接中加入 data-direction=reverse屬性,這個屬性和原來的 data-back=true相同,不知道在正式版本中將會保留哪個屬性。

模態對話框模態對話框是一種帶有圓角標題欄和關閉按鈕的偽浮動層,用于獨占事件的應用。

任何結構化的頁面都可以用 data-rel=dialog鏈接的方式實現模態對話框應用。

例如:a href=foo.html data-rel=dialogOpen dialog/a這個頁面切換效果同樣可以使用標準頁面的 data-transition 參數效果。

建議使用pop、slideup 和flip參數以達到更好的效果。

這個模態對話框會默認生成關閉按鈕,用于回到父級頁面。

在腳本能力較弱的設備上也可以添加一個帶有 data-rel=back的鏈接來實現關閉按鈕。

針對支持腳本的設備可以直接使用 href=#或者 data-rel=back來實現關閉。

還可以使用內置的close方法來關閉模態對話框,例如:$('.ui-dialog').dialog('close')。

由于模態對話框是動態顯示的臨時頁面,所以這個頁面不會被保存在哈希表內,這就意味著我們講無法后退到這個頁面,例如你在 A 頁面中點擊一個鏈接打開 B 對話框,操作完成并關閉對話框,然后跳轉到 C 頁面,這時候你點擊瀏覽器的后退按鈕,這時候將回到 A 頁面,而不是 B 頁面。

工具條工具條主要用于header,footer等區域,用來支撐和實現頁面中業務功能的應用。

jQuery Mobile 提供了一個相對完整的解決方案。

工具條分為:標題(header bar),頁腳(footer bar)和導航(nav bar)這三中應用。

其中標題和頁腳在頁面中有一些不同的應用方式,默認工具條是以嵌入(inline)的方式定位的,這種定位方式可以實現最大限度的兼容性,包括在對腳本和 css 兼容性不佳的設備都有很好的優化。

另一種是浮動(fixed)定位的方式,也可以成為靜態定位,這種定位方式可以讓工具條始終保持在屏幕的頂部或者底部。

并可以接受點擊事件來顯示/隱藏工具條,已達到最大化利用屏幕空間的目的。

實現方式:在標題和頁腳區域加入 data-position=fixed屬性。

標題容器標題容器是頁面頁眉區域的顯示控件,主要用來顯示標題和主要操作的區域。

結構代碼:代碼如下:div data-role=headerh1Page Title/h1/div為了方便頁面的交互在頁面切換后會在標題容器的左側自動生成一個后退按鈕,這樣可以簡化我們的開發復雜程度,但是有些時候我們會因為應用的需求而不需要這個后退按鈕,可以在標題容器上添加 data-backbtn=false屬性用來阻止后退按鈕的自動創建。

標題容器的左側和右側分別可以放置一個按鈕,在阻止自動生成的后退按鈕后,我們就可以在后退按鈕的位置來自定義按鈕了。

例如:代碼如下:div data-role=header data-position=inline data-backbtn=false a href=index.html data-icon=deleteCancel/ah1Edit Contact/h1a href=index.html data-icon=checkSave/a/div如果需要自定義默認的后退按鈕中的文本,可以用data-back-btn-text=previous屬性來實現,或者通過擴展的方式實現:代碼如下:$.mobile.page.prototype.options.backBtnText = previous如果你沒有使用標準的結構來創建標題區域,那么框架將不會自動生成默認的按鈕。

頁腳容器頁腳容器的結構和標題容器的結構基本相同,只要把 data-role 屬性的參數設置為footer。

例如:代碼如下:div data-role=footerh4Footer content/h4/div與標題容器相比頁腳容器有更多的靈活度,它不會想標題容器一樣只允許放置兩個按鈕,并且也不會默認的把按鈕放置在左右的頂端,頁腳的按鈕默認是從左到右依次排列的,并且何以放置更多的按鈕。

在頁腳容器上只要添加一個 class=ui-bar就可以將頁腳變成一個工具條,你可以不用設置任何的布局樣式就可以在其中添加整齊的按鈕。

例如:代碼如下:div data-role=footer class=ui-bara href=index.html data-role=button data-icon=deleteRemove/aa href=index.html data-role=button data-icon=plusAdd/aa href=index.html data-role=button data-icon=arrow-uUp/aa href=index.html data-role=button data-icon=arrow-dDown/a/div如果我們需要一組鏈接效果,我們可以這樣寫:代碼如下:div data-role=footer class=ui-bar data-position=inlinediv data-role=controlgroup data-type=horizontala href=index.html data-icon=deleteRemove/aa href=index.html data-icon=plusAdd/aa href=index.html data-icon=arrow-uUp/aa href=index.html data-icon=arrow-dDown/a/div/div技巧:通過使用 data-id 屬性可以讓多個頁面使用相同的頁腳。

導航導航容器是一個可以每行容納最多 5 個按鈕的按鈕組控件,用一個擁有 data-role=navbar屬性的 div 來容納這些按鈕。

例子:代碼如下:div data-role=footerdiv data-role=navbarullia href=a.html class=ui-btn-activeOne/a/lilia href=b.htmlTwo/a/li/ul/div!-- /navbar --/div!-- /footer --在默認的按鈕上添加 class=ui-btn-active如果按鈕的數量超過 5 個,導航容器將會自動以合適的數量分配成多行顯示。

按鈕你可以將頁面中的任何一個鏈接通過 data-role=button來聲明成為按鈕的顯示風格。

為了風格統一,框架會在頁面加載時自動將 form 類的按鈕格式化為 jQuery Mobile 風格的按鈕,不需要添加 data-role 屬性。

框架中包含了一組常用的圖標可以用于按鈕,用 data-icon 屬性中的參數來定義顯示不同的圖標效果。

例如:代碼如下:a href=index.html data-role=button data-icon=deleteDelete/adata-icon 原生參數列表除了可以默認顯示左側的圖標之外,還可以用 data-iconpos 屬性來定義圖標與文字的位置關系。

data-iconpos 參數列表:參數效果:right 圖標在文字的右側top 圖標在文字上面bottom 圖標在文字下面data-iconpos=notext屬性可以讓按鈕隱藏文字。

內聯樣式在框架中默認情況下按鈕是橫向獨占根據屏幕寬度橫向自適應的,但是我們在應用的應用中經常需要在一行中顯示多個按鈕,這時候我們就需要知道一個新的叫做內聯模式的屬性了data-inline=true。

例如:代碼如下:div data-inline=truea href=index.html data-role=buttonCancel/aa href=index.html data-role=button data-theme=bSave/a/div按鈕組jQuery Mobile 框架可以將幾個按鈕以組的方式顯示,data-role=controlgroup用以展示按鈕間的緊湊關系。

例如:代碼如下:div data-role=controlgroupa href=index.html data-role=buttonYes/aa href=index.html data-role=buttonNo/aa href=index.html data-role=buttonMaybe/a/div如果需要按鈕橫向排列可以增加 data-type=horizontal屬性。

表單應用jQuery Mobile 框架為原生的 html 表單元素封裝了新的表現形式,對觸屏設備的操作進行了優化。

在框架的頁面中會自動將 form 元素渲染成 jQuery Mobile 風格的元素。

form 元素的使用和默認的 html 方式使用相同,可以同樣使用 Post 和 get 方式提交數據,但是需要注意的是元素的 ID 命名問題,在常規的規范中同一個頁面中是不允許出現相同的 ID命名的,在 jQuery Mobile 中由于其允許在同一個 DOM 中存在多個頁面,所以建議 form 元素的 ID 命名在整個項目中是唯一的,防止由于 ID 問題引發的錯誤。

默認情況下框架會自動渲染在標準頁面中的 form 元素的風格,一旦成功渲染后,這個控件元素將可以使用 jQuery 中的函數進行操作。

在某些情況下,我們需要使用 html 原生的 form 元素,為了阻止 mobile 框架對該元素的自動渲染,在框架中我們在 data-role 屬性中引入了一個控制參數none。

使用這個屬性參數就會讓該元素以 html 原生的狀態顯示。

例如:代碼如下:select name=foo id=foo data-role=noneoption value=a A/optionoption value=b B/optionoption value=c C/option/select列表應用信息列表是開發應用中使用頻率相對比較高的控件,用于數據顯示、導航, 數據列表等。

為了適應不同的信息內容,列表的表現形式也多種多樣。

列表的代碼結構是以有序和無序列表來實現的,只要在 ul 或 ol 上聲明 data-role=listview就可以讓框架以列表的方式渲染了,例如:代碼如下:ul data-role=listview data-theme=glia href=acura.htmlAcura/a/lilia href=audi.htmlAudi/a/lilia href=bmw.htmlBMW/a/li/ul如果需要在列表里添加數據,則需要在數據加載后執行 refresh()方法對列表進行數據更新。

例如:代碼如下:$('ul').listview('refresh');以上是運用 jQuery Mobile 進行界面構建的基礎規則。

版權聲明:本文由 長孫傲柏 整理編輯。

原標題:創建模態對話框,非模態對話框創建

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

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 釘釘名片,釘釘名片在哪

    釘釘名片,釘釘名片在哪 相關圖片釘釘名片認證如今,越來越多的企業選擇使用美甲辦公室。我相信有很多人不知道如何發送名片和信息。接下來,超人軟件為大家帶來指甲相關介紹,希望大家喜歡。釘釘發送名片是干...

  • 鼠標懸停,無鼠標懸停

    鼠標懸停,無鼠標懸停 相關圖片鼠標懸停變色本文的例子描述了在純CSS中實現鼠標懸停提示的方法。與您分享以供參考。具體分析如下:這是一個更漂亮的鼠標懸停提示效果,是用純CSS代碼實現的。當你把鼠標放在圖...

  • 各種幣的符號怎么打,人民幣的符號在電腦上怎么打

    各種幣的符號怎么打,人民幣的符號在電腦上怎么打 相關圖片如何打人民幣符號有時我們需要輸入人民幣符號,但很多人不知道如何操作。事實上,這是鍵盤上的美元符號。在中文輸入法狀態下,按shift鍵和數字鍵4(注意,不是鍵盤的4)輸入成功...

  • 倒計時器,倒計時器怎么用

    倒計時器,倒計時器怎么用 相關圖片倒計時器程序當我們做一些任務或專注于一些活動時,倒計時可以有效地提醒我們。大多數人使用倒計時大多是在手機或電腦上。實際上,我們的計算機上有一些功能可以用來制作倒計...

  • 卡通人物五官圖片,卡通人物五官畫法

    卡通人物五官圖片,卡通人物五官畫法 相關圖片卡通人物的手頭部的造型比例頭部的具體繪制步驟:頭部的立體繪制方法不同角度的頭部在正面被分解:面部結構不同角度的眼睛不同角度的眼睛桌子鼻子的繪制步驟:嘴唇的造型方法...

  • inode智能客戶端連接不上,inode智能客戶端安裝

    inode智能客戶端連接不上,inode智能客戶端安裝 相關圖片inode智能客戶端打不開相信很多人對inode非常陌生。事實上,正式的inode智能客戶端是H3C設計開發的一款基于Windows的多業務接入客戶端軟件,提供802.1x門戶等認證方式inode智能客戶端下載...

  • 1加5t什么時候上市,1手機5t什么時候上市

    1加5t什么時候上市,1手機5t什么時候上市 相關圖片一加5什么時候發布One plus 5T是一款智能手機,將在不久的將來由One plus技術推出。相信很多小伙伴都想知道什么時候推出1 5T?一加五噸怎么樣?現在,讓我們跟隨超人一加5t上市...

  • hr標簽樣式,hr格式

    hr標簽樣式,hr格式 相關圖片hr信息系統代碼如下:HR style=width:490px;/HR size=8 style=color:ffd306;border style:offset;widt


    ...

  • 種子可以用什么打開,迅雷種子用什么打開方式

    種子可以用什么打開,迅雷種子用什么打開方式 相關圖片種子鏈接怎么用在百度云出現之前,seed是我們經常接觸的一種下載方式。這種種子又稱BT種子,大小約為1-500kb,后綴為torrent。安裝BT下載所需的文件信息,相當于H種子打開用什么軟件...

  • 炫酷的網頁,網頁炫酷效果

    炫酷的網頁,網頁炫酷效果 相關圖片登錄頁面炫酷特效代碼在過去,網站的創造性導航喜歡在大小、形式、顏色和排版上耍花招。現在,隨著時代的發展,它將增添酷炫的動感效果。例如,今天的網站群中,有很多學生在...

熱評文章

  • 抖音突然不顯示位置了,抖音一會顯示位置一會不顯示

    抖音突然不顯示位置了,抖音一會顯示位置一會不顯示 相關圖片抖音位置怎么不顯示省份自助餐作為一種有趣的短視頻軟件,受到許多年輕人的喜愛。最近,有很多合伙人想知道如何隱藏顫音的位置,以及如何從顫音中賺錢。然后,超人軟件會向您...

  • 垂直水平,水平和垂直是什么

    垂直水平,水平和垂直是什么 相關圖片水平結構和垂直結構最后介紹了用焰火制作馬賽克網格背景的方法和實例。事實上,水平或垂直漸變的彩條背景也很不錯,有點透明的背景和添加前景的效果如下圖所示:圖片中的彩條...

  • 酷騎單車押金還能退不,酷騎單車押金一直沒退

    酷騎單車押金還能退不,酷騎單車押金一直沒退 相關圖片2019酷騎還能退押金嗎由于管理不善,庫奇自行車決定終止共享單車業務,但仍有許多小伙伴的存款和余額沒有退還。如何退還冷騎押金?如何退還自行車的余額?現在,讓我們跟隨超人...

  • 色板,發色斑

    色板,發色斑 相關圖片玫麗盼色斑用戶界面專用色板,用戶界面設計師必備!染頭色斑...

  • 電腦跑分17萬什么檔次,新版魯大師跑分多少算好

    電腦跑分17萬什么檔次,新版魯大師跑分多少算好 相關圖片跑分28萬算高端嗎作為一個強大的系統工具,魯大師最關心的是魯大師能跑多少分?呂師傅怎么能跑積分?現在,超人軟件編輯將為您帶來陸大師的跑步積分介紹,希望您喜歡陸大師跑多...

  • 怎么做文字生成鏈接,怎么把鏈接變成文字

    怎么做文字生成鏈接,怎么把鏈接變成文字 相關圖片怎么轉發文字加鏈接文本鏈接是網頁中最常見的頁面元素。默認情況下,文本鏈接的樣式為下劃線,這使得網頁無法突出個性和滿足布局的需要。為了使文本鏈接符合頁面的整體效果,...

  • 獵豹瀏覽器打不開網頁,獵豹瀏覽器官方網站

    獵豹瀏覽器打不開網頁,獵豹瀏覽器官方網站 相關圖片獵豹極輕瀏覽器作為一款功能強大的網頁瀏覽器,獵豹瀏覽器獲得了大量用戶,你知道如何設置獵豹瀏覽器的默認網頁嗎如何翻譯cheetah瀏覽器的網頁?接下來,超人軟件編輯就為大家介...

  • 內存修改器有什么用,怎么用內存修改器修改內購

    內存修改器有什么用,怎么用內存修改器修改內購 相關圖片怎么用gg修改器修改內購這里的內存修改不是指計算機的物理內存,而是使用內存修改器來修改游戲內存數據,達到游戲作弊的目的。通用內存修飾符是CE。因此,本文主要介紹CE內存修...

  • 鋪底,鋪底什么意思

    鋪底,鋪底什么意思 相關圖片陶粒可以當魚缸鋪底嗎最近在做一個項目-口袋收藏夾。簡言之,我想在布袋頁上收集我最喜歡的圖片,它使用了iframe的許多方面,如下所示:1。作為一個覆蓋底部的彈出層,如果你已經...

  • 菜鳥裹裹的運費是怎么支付,菜鳥裹裹怎么給運費啊

    菜鳥裹裹的運費是怎么支付,菜鳥裹裹怎么給運費啊 相關圖片菜鳥裹裹他人能代付運費嗎新手包裝是一款實用的快遞軟件,您可以通過它輕松完成郵件服務。那新秀包裝的運費怎么付?新秀包裝快遞怎么寄?接下來,讓超人軟件編輯為您解答。希...

關注微信

变脸官网查询