Rumah  >  Artikel  >  hujung hadapan web  >  jQuery melaksanakan kesan penambahan dan penolakan nombor_jquery troli beli-belah

jQuery melaksanakan kesan penambahan dan penolakan nombor_jquery troli beli-belah

WBOY
WBOYasal
2016-05-16 16:09:341743semak imbas

Apabila kami menyerahkan pesanan untuk membeli-belah dalam talian, biasanya terdapat kawalan pemilihan kuantiti pada halaman web, memerlukan pembeli memilih bilangan item untuk dibeli Pembangun akan membuat kawalan ini supaya operasi penalaan halus seperti penambahan dan penolakan boleh dilakukan dengan mengklik Sudah tentu, anda juga boleh terus memasukkan bilangan keping. Artikel ini akan memperkenalkan beberapa kaedah biasa menggunakan pemutar digital pemutar untuk melaksanakan fungsi penambahan dan penolakan digital.

Tambah dan tolak nombor kiri dan kanan

Sebagai contoh, JD.com pada masa ini menggunakan kesan menambah dan menolak nombor ke kiri dan kanan semasa menghantar pesanan Kesan ini adalah mudah dan mudah dikendalikan. Kami menggunakan pemalam jquery.spinner.js untuk menambah dan menolak nombor kiri dan kanan Kaedah panggilan adalah sangat mudah. ​​Sila lihat Contoh Demonstrasi 1.

Salin kod Kod adalah seperti berikut:


Panggilan juga sangat mudah, mula-mula muatkan fail perpustakaan jquery dan jquery.spinner.js, kemudian gunakan kod berikut:

Salin kod Kod adalah seperti berikut:
$('.spinner').spinner();

Gaya Bootstrap, tambah dan tolak di sebelah kanan

Bootstrap telah popular sejak sekian lama, dan terdapat banyak jenis aplikasi berdasarkan gaya bootstrap Biar saya memperkenalkan kepada anda pemalam tambahan dan penolakan digital berdasarkan bootstrap, yang boleh menetapkan nilai minimum, nilai maksimum. , kenaikan dan pengurangan (nilai langkah), dan Masukkan nombor secara manual.

Salin kod Kod adalah seperti berikut:





Selepas memuatkan fail css dan js yang berkaitan bootstrap, anda boleh melihat secara langsung kesan halaman Jika projek anda berdasarkan bootstrap, anda boleh memanggilnya secara terus. Sila lihat contoh demo 2
Anda juga boleh merujuk kepada alamat projek:
https://github.com/xixilive/jquery-spinner
untuk melihat tetapan parameter yang berkaitan.

Gaya ui jQuery, penambahan dan penolakan di sebelah kanan
jQuery ui juga menyediakan pemalam penambahan dan penolakan nombor, yang boleh menetapkan nilai minimum, nilai maksimum, kenaikan dan pengurangan (nilai langkah) dan memasukkan nombor secara manual. Sila lihat contoh demo 3

Salin kod


Kod adalah seperti berikut: Jika projek anda menggunakan jquery ui, anda boleh memanggil jquery ui untuk melaksanakan fungsi menambah dan menolak nombor.


Salin kod

Kod adalah seperti berikut:



Di atas adalah semua kandungan yang diterangkan dalam artikel ini saya harap anda akan menyukainya dan ia akan membantu anda menguasai 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