Heim > Web-Frontend > js-Tutorial > Hauptteil

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
Freigeben: 2016-05-16 16:01:49
Original
1255 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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默认"/>
Nach dem Login kopieren

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();
  });
})
Nach dem Login kopieren

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:x)

titleTpl:
Titel-HTML (Standard:

)

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage