cari

Rumah >hujung hadapan web >tutorial js >jQuery hanya melaksanakan kaedah menyerahkan data dan menunjukkan bar_jquery kemajuan memuatkan

jQuery hanya melaksanakan kaedah menyerahkan data dan menunjukkan bar_jquery kemajuan memuatkan

WBOY
WBOYasal
2016-05-16 15:07:492024semak imbas

Contoh dalam artikel ini menerangkan cara jQuery hanya melaksanakan bar kemajuan memuatkan apabila menyerahkan data. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Bahagian html kod adalah seperti berikut, salin dan import perpustakaan kelas untuk digunakan

<html>
<head>
<style type="text/css">
 #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.2; opacity:.2; filter: alpha(opacity=70);}
 .loading{display: none; position: absolute; top: 50%; left: 50%; z-index:1002; }
 </style>
</head>
<body>
  <div id="bg"></div>
  <input type="button" value="Save" id="btnSave" name="btnSave" />
  <div class="loading"><img src="loading.gif"></div>
</body>
</html>

Sebahagian daripada kod jQuery adalah seperti berikut: 

<script src="jquery-1.11.0.min.js" type="text/javascript"></script><!--自己下载类库-->
<script type="text/javascript">
$(function(){
  $("#btnSave").click(function(){
    $("#bg,.loading").show();
    $.ajax({
      async:false,
      url:"time.php",
      type:"post",
      data:{},
      success:function(mes){
        $("#bg,.loading").show();
      }
    })
  })
})
</script>

kod php: 

for($i=0;$i<10000000;$i++){
}

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Ringkasan kesan dan teknik penukaran JQuery", "kesan seretan jQuery dan ringkasan teknik", "Ringkasan kemahiran sambungan JQuery", "ringkasan kesan khas klasik biasa jQuery", "ringkasan penggunaan animasi jQuery dan kesan khas", "Ringkasan penggunaan pemilih jquery " dan "Ringkasan pemalam dan penggunaan biasa jQuery "

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Avatar JavaScript memuat naik pemalam perkongsian kod sumber kemahiran_javascriptArtikel seterusnya：Avatar JavaScript memuat naik pemalam perkongsian kod sumber kemahiran_javascript

Artikel berkaitan

Lihat lagi