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
Lepaskan: 2016-05-16 15:07:49
asal
2023 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

kod php:

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

Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan