Heim  >  Artikel  >  Web-Frontend  >  Beispiele für Floating-Layer-Steuerelemente für Mobiltelefone mit js, die mit PC-Browsern kompatibel sind und über verschiedene Popup-Eingabeaufforderungen verfügen_Javascript-Fähigkeiten

Beispiele für Floating-Layer-Steuerelemente für Mobiltelefone mit js, die mit PC-Browsern kompatibel sind und über verschiedene Popup-Eingabeaufforderungen verfügen_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:01:491244Durchsuche

Das Beispiel in diesem Artikel beschreibt ein mobiles Floating-Layer-Steuerelement, das mit PC-Browsern js-kompatibel ist und über eine Vielzahl von Popup-Tipps verfügt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Verwendung

<input type="button" id="btn_dialog" value="打开浮层"/>
<div id="dialog-content" style="display:none;">这是内容</div>
<script src="../src/jquery-1.9.1.min.js"></script>
<script src="../src/dialog.js"></script>
<script>
 var dialog = new Dialog();
 dialog.init({target:"#dialog-content",trigger:"#btn_dialog",mask:true,width:500,height:300,title:'标题'});
</script>

Oder rufen Sie es mit jquery auf:

<input type="button" id="btn_dialogjquery" value="jq打开浮层"/>
<div id="dialog-contentjq" style="display:none;">这是内容22</div>
<script src="../src/dialog-jquery.js"></script>
<script>
 $('#btn_dialogjquery').Dialog({target:"#dialog-contentjq",mask:true,width:500,height:300,title:'标题'})
</script>

Klassenwarnung erben und Eingabeaufforderungen bestätigen (im JQuery-Modus):

html:

<input type="button" id="btn_alert" value="alert"/>
<input type="button" id="btn_alert2" value="alert定时关闭"/>
<input type="button" id="btn_confirm" value="confirm三种按钮"/>
<input type="button" id="btn_confirmdefault" value="confirm默认"/>

js:

$('#btn_alert').click(function(){
  $.alert('选好商品才能上传素材哦',true,function(){
   alert('你点击了ok')
  })
});
$('#btn_alert2').click(function(){
  $.alert('选好商品才能上传素材哦')
});
$('#btn_confirm').click(function(){
  $.confirm('下载全部 9 张图片至本地相册&#63;<div class="confirm-title2">文字内容已复制</div>',[{yes:"是"},{no:'否'},{close:'关闭'}],function(type){
   $.alert('您点击了'+type);
   this.hide();
  });
})
$('#btn_confirmdefault').click(function(){
  $.confirm('你确定要删除这条消息吗&#63; ',null,function(type){
   $.alert('您点击了'+type);
   this.hide();
  });
})

Eigenschaften oder Methoden:

Attribute:

Auslöser:
Objekt auslösen

Ziel:
Popup-Inhalte können #id oder ein Jquery-Objekt
sein
Maske:
Ob es eine Maskenebene gibt

Titel:
Titel

zIndex:
Z-Index

closeTpl:
HTML schließen (Standard:f2b54661cd0a6d5afc2f12b5e72067bex54bdf357c58b8a65c66d7c19c8e4d114)

titleTpl:
Titel-HTML (Standard: 9ca5b7b4c0ddc9dd9833efaf3c90649f16b28748ea4df4d9c2150843fecfba68)

Methoden und Rückrufe:

zeigen:
Popup anzeigen

verstecken:
Ausblenden

beforeShow: Funktion(Inhalt)
Methodenrückruf vor der Anzeige, Inhalt ist das schwebende Layer-Inhaltsobjekt

beforeHide:function(content)
Methodenrückruf vor dem Ausblenden, Inhalt ist das schwebende Layer-Inhaltsobjekt

setPosition:function()
Stellen Sie die Position auf Mitte

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn