JQuery | Codepal

Posts Tagged 'jQuery'

Mengintegrasikan Cloud Zoom dengan Galeri WP e-Commerce Cart Emas

Jumat, 22 April, 2011

Pembaruan 30 April 2011: The WP e-Commerce Emas Plugin Cart mendapat diperbarui ke versi baru (v2.9.1). Mereka melakukan beberapa perubahan dalam metode tampilan galeri. Oleh karena itu, saya harus memodifikasi kode saya diposting sebelumnya, sehingga dapat bekerja dengan versi terbaru dari Galeri Cart Emas.:

Proyek

Ini proyek saya diperlukan sebuah galeri di halaman produk tunggal dan juga plugin yang Zoom Cloud diaktifkan sedemikian rupa sehingga pengguna dapat memiliki pandangan diperbesar dari gambar utama produk hanya dengan melayang di atas gambar. Cart Emas plugin untuk WP e-Commerce memungkinkan pilihan Galeri tetapi menyediakan fitur thickbox sebagai pilihan default untuk preview gambar.

Masalah

Meskipun galeri itu menampilkan thumbnail dengan baik tapi ada beberapa masalah dengan itu karena setelah mengklik thumbnail gambar di galeri, gambar produk utama tidak sedang diganti. Zoom Cloud plugin diaktifkan pada gambar utama produk dan tanpa pilihan gambar yang digantikan oleh gambar di galeri, seluruh titik pelaksanaan galeri ada gunanya.

Solusi

Jadi setelah melakukan sedikit riset dan menemukan tidak ada solusi untuk mengganti gambar utama dengan gambar yang diklik dalam galeri, saya dipaksa untuk menemukan solusi lain untuk masalah ini. Cloud Zoom adalah plugin mengagumkan dan untungnya ia menyediakan pilihan untuk menerapkan galeri juga, dengan hanya menambahkan beberapa kelas dan atribut rel yang kompleks untuk tag hyprlink gambar. Hal ini dapat dilakukan dengan cara berikut:

 <html>
 <head>

 <- Load Zoom Cloud file CSS ->
 <link rel="stylesheet" type="text/css" /> href="/styles/cloud-zoom.css"

 <- Anda dapat memuat perpustakaan jQuery dari Jaringan Konten Google!.
 Mungkin lebih baik daripada dari server Anda sendiri.  ->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script>

 <- Load Zoom Cloud file JavaScript ->
 <script type="text/javascript" src="/js/cloud-zoom.1.0.2.min.js"> </ script>

 </ Head>
     <body>

         <! -
         Sebuah jangkar dengan kelas 'awan-zoom' harus mengelilingi gambar kecil.
         Href jangkar seharusnya menunjuk ke gambar zoom besar.
         Setiap pilihan dapat ditentukan dalam atribut rel jangkar.
         Pilihan harus ditentukan dalam format objek JavaScript biasa,
         tapi tanpa kawat gigi.
         ->

         <A href = '/ images/zoomengine/bigimage00.jpg' id class = 'awan-zoom' = 'zoom1'
             rel = "adjustX: 10, adjustY: -4">
             <img src="/images/zoomengine/smallimage.jpg" alt='' judul title="Optional display" />
         </ A>

         <! -
         Anda dapat membuat galeri dengan membuat jangkar dengan kelas 'awan-galeri-Zoom'.
         Href jangkar seharusnya menunjuk ke gambar zoom besar.
         Dalam atribut rel Anda harus menentukan id dari zoom untuk menggunakan (useZoom: 'zoom1'),
         dan juga gambar kecil untuk menggunakan (smallImage: / gambar /....)
         ->

         <A href = '/ images/zoomengine/bigimage00.jpg' class = title 'awan-zoom-galeri' = 'Thumbnail 1'
        	 rel = "useZoom: 'zoom1', smallImage: '/ images / zoomengine / smallimage.jpg'">
         <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/> </ a>

         <A href = '/ images/zoomengine/bigimage01.jpg' class = 'Miniatur 2' judul 'awan-zoom-galeri' =
        	 rel = "useZoom: 'zoom1', smallImage: '/ images/zoomengine/smallimage-1.jpg'">
         <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/> </ a>                  

         <A href = '/ images/zoomengine/bigimage02.jpg' class = 'awan-zoom-galeri' title = 'Thumbnail 3'
        	 rel = "useZoom: 'zoom1', smallImage: '/ images/zoomengine/smallimage-2.jpg'">
         <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/> </ a>

     </ Body>
 </ Html>

Rincian pada argumen untuk plugin Zoom Cloud disediakan di sini .

Sekarang dari contoh di atas poin-poin utama yang perlu diperhatikan adalah sebagai berikut:

Kelas awan-zoom dalam tag hyperlink gambar utama.
Atribut href dari tag hyperlink berisi link ke versi yang lebih besar dari gambar utama.
R el atribut dalam link hiper gambar utama yang memberikan argumen utama untuk plugin, yang mendefinisikan bagaimana plugin akan bekerja.
Tag hyperlink membungkus versi kecil dari gambar produk utama.
Kelas awan-zoom-galeri pada tag hyperlink untuk thumbnail galeri.
Atribut href dari tag hyperlink berisi link ke versi yang lebih besar dari gambar.
Argumen dalam atribut rel untuk tag hyperlink di galeri thumbnail. Ini berisi id dari hyperlink gambar utama, link ke versi kecil dari gambar.
Galeri hyperlink melampirkan gambar thumbnail kecil galeri.

Oleh karena itu, kita pada dasarnya membutuhkan tiga versi gambar untuk menerapkan galeri.

Versi besar untuk mengaktifkan memperbesar: Disediakan oleh Keranjang Emas Plugin itu sendiri.
Sedang versi yang seharusnya menjadi ukuran gambar utama untuk halaman produk tunggal: Kita harus mengambil dari database.
Akhirnya, thumbnail kecil kecil untuk galeri: Disediakan oleh Keranjang Emas Plugin itu sendiri.

Sekarang saya akan menjelaskan bagaimana untuk mengintegrasikan ini dengan plugin Cart Gold dan hack yang diperlukan. Pertama-tama, setelah menginstal Plugin Cart Emas, pastikan bahwa Anda telah meng-upload beberapa gambar produk dan galeri diaktifkan dalam pengaturan. Juga menonaktifkan fitur lightbox.

Gold Cart Presentation Settings for the Gallery

Setelah itu pastikan bahwa galeri yang ditampilkan di halaman produk tunggal. Sekarang mari kita melakukan beberapa modifikasi kode. Pastikan Anda telah didukung semuanya, khusus plugin keranjang emas sebelum melanjutkan. Mengedit file gold_shopping_cart.php dan mencari fungsi untuk menampilkan gold_shpcrt_display_gallery yaitu galeri. Dalam fungsi ini, pergi ke bagian yang menampilkan galeri untuk versi di atas 3,8. Ini harus dimulai dari nomor baris 308 (jika Anda tidak melakukan modifikasi pada kode sudah). Ini adalah versi asli dari kode yang menampilkan galeri:

 $ Output ='';
 $ PRODUCT_NAME = get_the_title ($ product_id);
 $ Hasil .= "<div class='wpcart_gallery'>";
 $ Args = array (
	 'Post_type' => 'lampiran',
	 'Post_parent' => $ product_id,
	 'Post_mime_type' => 'image',
	 'Orderby' => 'menu_order',
	 'Order' => 'ASC',
	 'Numberposts' => -1
 );
 $ Lampiran = get_posts ($ args);
 $ Featured_img = get_post_meta ($ product_id, '_thumbnail_id');
 $ Thumbnail = array ();
 if ($ lampiran) {
	 foreach ($ lampiran sebagai $ post) {
		 setup_postdata ($ post);
		 $ Link = wp_get_attachment_link ($ post-> ID, 'emas thumbnail');
		 $ Ukuran = is_single ()?  'Menengah-tunggal-produk': 'produk-thumbnail';
		 $ Preview_link = wp_get_attachment_image_src ($ post-> ID, $ ukuran);
		 $ Link = str_replace ('a href', 'a rev = "' $ preview_link [0].." "Class =" thickbox "rel =" '$ PRODUCT_NAME.. "" Href', $ link);

		 / / Selalu menampilkan thumbnail fitur pertama
		 if (in_array ($ post-> ID, $ featured_img))
			 array_unshift ($ thumbnail, $ link);
		 lain
			 $ Thumbnail [] = $ link;
	 }
 }
 $ Hasil .= implode ("\ n", $ thumbnail);
 $ Hasil .= "</ div>";
 wp_reset_query ();

Sekarang ini adalah versi modifikasi dari kode diatas:

 $ Output ='';
 $ PRODUCT_NAME = get_the_title ($ product_id);
 $ Hasil .= "<div class='wpcart_gallery'>";
 $ Args = array (
	 'Post_type' => 'lampiran',
	 'Post_parent' => $ product_id,
	 'Post_mime_type' => 'image',
	 'Orderby' => 'menu_order',
	 'Order' => 'ASC',
	 'Numberposts' => -1
 );
 $ Lampiran = get_posts ($ args);
 $ Featured_img = get_post_meta ($ product_id, '_thumbnail_id');
 $ Thumbnail = array ();
 if ($ lampiran) {
	 foreach ($ lampiran sebagai $ post) {
		 setup_postdata ($ post);
		 $ Link = wp_get_attachment_link ($ post-> ID, 'emas thumbnail');
		 $ Ukuran = is_single ()?  'Menengah-tunggal-produk': 'produk-thumbnail';
		 $ Preview_link = wp_get_attachment_image_src ($ post-> ID, $ ukuran);
		 / / ORIGNIAL $ link ke gambar Mewakili galeri dengan thickbox
		 / / $ Link = str_replace ('a href', 'a rev = "' $ preview_link [0].." "Class =" thickbox "rel =" '$ PRODUCT_NAME.. "" Href', $ link);

		 / / Mengambil Gambar Menengah dan memodifikasi $ link wrt pilihan Zoom Cloud Plugin jQuery untuk menampilkan galeri
		 $ Link = str_replace ('lampiran-emas-thumbnail','',$ link); / / menghapus kelas dari tag img yang menyebabkan karena konflik dengan plugin memperbesar awan
		 $ Small_image = wp_get_attachment_image_src ($ post-> ID, array (337437)); / / mengembalikan sebuah array
		 $ Rel_options = "useZoom: 'zoom1', smallImage:" "$ small_image [0 ]."'";.
		 $ Link = str_replace ('a href', 'a rev = "' $ preview_link. [0]. '" Class = "awan-zoom-galeri" rel = "'. $ Rel_options. '" Href', $ link) ;					

		 / / Selalu menampilkan thumbnail fitur pertama
		 if (in_array ($ post-> ID, $ featured_img))
			 array_unshift ($ thumbnail, $ link);
		 lain
			 $ Thumbnail [] = $ link;
	 }
 }
 $ Hasil .= implode ("\ n", $ thumbnail); / / meledak Array unsur sebagai daftar item
 $ Hasil .= "</ div>"; / / Mengakhiri daftar
 wp_reset_query ();

Sekarang Anda dapat melihat dari kode di atas bahwa semua yang kita perlu lakukan adalah mengambil versi yang lebih kecil dari gambar (untuk menampilkan di bagian gambar utama) dan memodifikasi atribut rel sehingga memperbesar plugin awan mengaktifkan fitur galeri juga.

Untuk mengaktifkan fitur Zoom Cloud, mengedit single_product.php wpsc-dan memodifikasi kode di mana gambar akan ditampilkan dalam tag hyerplink. Anda dapat mencari oleh product_image kelas. Anda perlu memodifikasi atribut rel dan menambahkan sebuah id dan sebuah kelas untuk hyperlink melampirkan gambar.

 <A id = "zoom1" rel = "posisi: 'di dalam', smoothMove: 4" class = "awan-zoom" href = "?? <Php echo wpsc_the_product_image ();>"> <img class = "product_image" id = "product_image_ <php echo wpsc_the_product_id ();??>" alt = "<php echo wpsc_the_product_title ();??>" title = "<php echo wpsc_the_product_title ();??>"? src = "<php echo  ?>"/> </ A>

Ini adalah semua yang perlu Anda lakukan untuk mengintegrasikan plugin jQuery dengan Cloud Zoom galeri WP e-Commerce Emas Cart Plugin ini. Juga jika Anda ingin mengaktifkan plugin jQuery jCarousel pada gambar galeri, maka Anda perlu menyertakan tag galeri hyperlink dalam elemen daftar. Untuk ini, Anda perlu memodifikasi sedikit kode seperti bahwa tag hyperlink diapit unordered list.

 $ Output =''; $ PRODUCT_NAME = get_the_title ($ product_id); $ hasil .= "<ul class='wpcart_gallery jcarousel-skin-tango'> <li>"; / / Menambahkan tag li elemen array mulai meledak sebagai daftar item $ args = array ('post_type' => 'lampiran', 'post_parent' => $ product_id, 'post_mime_type' => 'gambar', 'orderby' => 'menu_order', 'pesanan' => 'ASC', 'numberposts' => -1); $ lampiran = get_posts ($ args); $ featured_img = get_post_meta ($ product_id, '_thumbnail_id'); $ thumbnail = array (); if ($ lampiran) {foreach ($ lampiran sebagai $ pos) {setup_postdata ($ post); $ link = wp_get_attachment_link ($ post-> ID, 'emas thumbnail'); $ ukuran = is_single ()?  'Menengah-tunggal-produk': 'produk-thumbnail'; $ preview_link = wp_get_attachment_image_src ($ post-> ID, $ ukuran); / / ORIGNIAL $ link ke gambar Mewakili galeri dengan thickbox / / $ link = str_replace ('a href ',' sebuah rev = "'$ preview_link [0].." "class =" thickbox "rel ="' $ PRODUCT_NAME.. "" href ', $ link); / / Mengambil Gambar Menengah dan memodifikasi $ link wrt yang jQuery Plugin pilihan Cloud Zoom untuk menampilkan galeri $ link = str_replace ('lampiran-emas-thumbnail','',$ link); / / menghapus kelas dari tag img yang menyebabkan karena konflik dengan plugin memperbesar awan $ small_image = wp_get_attachment_image_src ($ post-> ID, array (337437)); / / mengembalikan array $ rel_options = "useZoom: 'zoom1', smallImage:" "$ small_image [0 ]."'"; $ link = str_replace (. ' a href ',' a rev = "'.. $ preview_link [0]'" class = "awan-zoom-galeri" rel = "'.. $ rel_options'" href ', $ link); / / selalu menampilkan menampilkan thumbnail pertama jika (in_array ($ post-> ID, $ featured_img)) array_unshift ($ thumbnail, $ link); lain $ thumbnail [] = $ link;}} $ hasil .= implode ("</ li> <li > ", $ thumbnail); / / elemen Array meledak sebagai daftar item $ hasil .=" </ li> </ ul> "; / / Akhir daftar wp_reset_query ();

Kesimpulan

Metode ini bekerja dengan cukup baik untuk mengintegrasikan plugin Zoom Cloud dengan galeri e-Commerce Emas WP Cart. Tapi satu kelemahan adalah bahwa kita memodifikasi isi sebenarnya dari plugin keranjang emas dan semua perubahan akan hilang pada hari kita update WP e-Commerce Plugin keranjang emas. Oleh karena itu, saya akan mencoba untuk membuat sebuah plugin yang memungkinkan fungsionalitas ini daripada hard coding dalam file plugin.

Disclaimer: tutorial di atas dimaksudkan untuk mengaktifkan plugin jQuery dengan Cloud Zoom Gallery WP e-Commerce Emas Cart. Saya tidak bertanggung jawab jika sesuatu berjalan salah dan keranjang belanja tidak berperilaku dalam cara yang diharapkan. Silakan mengambil backup yang tepat sebelum bermain-main dengan setiap kode tema atau file plugin.

Tags: Cloud Zoom , Galeri , Emas Keranjang , jQuery , Wordpress , WP e-Commerce
Posted in Blog , Tutorial | 31 Comments »

Penerbitan Guru

Kamis, 24 Februari, 2011

PublishingGurus.com menyediakan solusi lengkap untuk merancang, mengedit, memformat, penerbitan dan mempromosikan buku-buku. Website ini benar-benar dirancang oleh mereka sendiri Kapoor di Sunny (Pendiri dan Direktur Kreatif), dan kami diberi tugas untuk mengembangkan situs membuat sepenuhnya disesuaikan dan menerapkan banyak fitur yang kompleks di dalamnya. Kami menggunakan wordpress untuk mencapai tugas kita dan sangat disesuaikan untuk mendapatkan produk yang berkualitas tinggi.

Tantangan

Tujuan utama dari situs ini adalah untuk mempertahankan jumlah besar halaman. Selain aspek manajemen konten dari website secara keseluruhan, dua persyaratan penting adalah menerapkan tampilan toko buku di mana mereka dapat menampilkan dan mempromosikan buku-buku dan galeri menampilkan kartu nama. Hal ini juga diperlukan Galeri di mana mereka dapat menampilkan cover dirancang untuk buku-buku mereka.

Tantangan lain termasuk melaksanakan berbagai jenis bentuk, masing-masing berbeda dari yang lain dalam banyak aspek. Layout kartu yang diperlukan untuk dihubungkan dengan bentuk sedemikian rupa sehingga pengguna dapat menyesuaikan dan ketertiban pencetakan kartu masing-masing dengan mudah. Juga menghubungkan perintah dengan sistem pembayaran PayPal adalah fitur utama. Persyaratan lainnya termasuk pelaksanaan berbagai jenis kemampuan seperti posting berita dan blog yang didedikasikan.

Solusi

Wordpress, seperti yang kita semua tahu, melakukan pekerjaan yang besar dalam mengelola isi apakah itu di halaman atau di posting. Kami memungkinkan kustomisasi dari semua halaman melalui panel admin dan menerapkan kemampuan untuk mengirim update berita atau posting blog.

Toko menampilkan buku itu lagi dikelola dengan baik menggunakan berbagai kategori dan pilihan filtering. Jelas, pengguna dapat dengan mudah mengedit gambar dan rincian buku. Layanan cetak kartu nama agak sulit untuk mengimplementasikan tapi kami berhasil dengan warna terbang. Kami menggunakan jQuery untuk menampilkan berbagai template kartu nama dengan cara yang menenangkan mata. Terhubung setiap template kartu untuk rincian diposting oleh bentuk masing-masing dan menghubungkan sistem pemesanan ke PayPal. Kami juga menggunakan jQuery untuk galeri berbasis portofolio menampilkan sampul buku yang dirancang.

Website secara keseluruhan cukup kompleks dan mencakup banyak carousels dan bentuk, tetapi semuanya dilaksanakan dalam cara yang ramah pengguna ringan. Kami bahkan menambahkan fitur jejaring sosial untuk berbagi situs web dan konten dengan mudah untuk mempromosikan pertumbuhan situs dan iklan untuk buku-buku yang ditampilkan di atasnya.

Situs ini benar-benar dioptimalkan untuk mesin pencari dan fitur tambahan dipasang seperti integrasi Google Analytics dalam dashboard menampilkan statistik tentang setiap posting dan halaman.

Tags: CMS , CSS 3 , Pembangunan , jQuery , PHP , PSD ke Wordpress , Wordpress
Posted in Portofolio | No Comments »

Aplikasi iPhone Template

Sabtu, 29 Januari, 2011

Saat ini, ketika datang ke iPhone, 'Ada App untuk semuanya'. Jadi kami berpikir untuk mengiris sebuah template aplikasi iPhone bertema sehingga semua pengembang pemula dapat memiliki sebuah situs aplikasi iPhone mereka sendiri. Tapi kali ini kita melangkah ke depan. Alih-alih xHTML / CSS template biasa, kami mengembangkan ke dalam template HTML5 yang menggunakan jejak CSS3 dan beberapa sihir jQuery. Template dapat diintegrasikan dengan sistem manajemen konten yang ada atau aplikasi web. Jadi silakan, melepaskan coder dalam diri Anda dan mengembangkan aplikasi iPhone yang besar. Kemudian menggunakan web template HTML5/CSS3 untuk berbagi dengan dunia Jangan beritahu kami jika Anda butuh bantuan. Setelah semua kita adalah Kode-Pal!

Tags: aplikasi , CSS 3 , Gratis , HTML5 , iPhone , jQuery
Posted in Blog , Downloads | 19 Comments »

Cara Buat Halaman FAQ dengan WordPress dan Jenis Posting Kustom

Sabtu, 4 Desember, 2010

Saya menulis tutorial untuk Nettuts tentang bagaimana menggunakan Blogging pernah populer / CMS platform Wordpress, untuk membuat bagian FAQ berdedikasi dalam back-end menggunakan 'Jenis Posting Kustom'. Kemudian mengambil jenis-jenis kustom posting dan menampilkan di ujung depan dengan cara yang sampai dibumbui menggunakan jQuery dan CSS3.
Ini adalah apa produk akhir akan terlihat seperti.

Create a faq page with wordpress and custom post types final

Bila pengguna mengklik pada salah satu FAQ, halaman akan gulir ke bawah secara otomatis ke jawaban masing-masing dan sorot.

Check out lengkap tutorial pada Nettuts dan menciptakan beberapa, halaman Tanya Jawab untuk keren interaktif situs Anda sendiri. Apakah berbagi kreasi Anda dengan kami

Tags: CSS 3 , Kustom Pos , FAQ , bagaimana , jQuery , jQuery UI , Wordpress
Posted in Blog , Tutorial | 1 Komentar »

Membuat Efek Blink Neon untuk Formulir Anda menggunakan CSS3 dan jQuery

Sabtu, 17 Juli, 2010

Nah berkat anak baru di blok cerah, CSS3, dirapikan dengan sedikit jQuery, saya akan menunjukkan Anda bagaimana membangun efek bagus untuk meningkatkan formulir Anda.

Yakin bahwa ini efek berkedip keren Neon dalam bentuk yang akan berguna untuk banyak tujuan jadi jangan lewatkan tutorial saya di 1stWebDesigner.com .

Dalam tutorial ini, kita telah memanfaatkan @-WebKit-keyframes yang bekerja hanya di browser menggunakan layout engine WebKit seperti Chrome dan Safari. Untuk browser seperti Firefox dan Opera, di mana tidak ada alternatif lain, kita harus anggun menurunkan efek, yang dalam hal ini akan hanya kotak-bayangan pada fokus. Internet Explorer (sampai versi 8) tidak dapat membuat sebagian besar dari apa yang akan kita pelajari di sini, tapi IE 9 tampaknya sangat menjanjikan dari apa yang saya telah melihat di preview platform yang terakhir.

Tags: CSS 3 , Pengembangan , bentuk , cara , jQuery
Posted in Tutorial | 4 Comments »

'Pilih' Masalah Setelah Menggunakan jqTransform dan Solusi nya

Kamis, 18 Februari, 2010

Proyek

Dalam proyek terakhir saya, saya diminta untuk membangun halaman arahan. Dalam halaman arahan, akan ada daftar bahasa dan setelah pengguna memilih bahasa tertentu, homepage situs akan terbuka secara otomatis dalam bahasa yang dipilih masing-masing. Itu juga diperlukan untuk gaya kotak daftar pilih dengan cara itu diberikan dalam desain halaman arahan. Jadi saya memilih untuk jqTransform jQuery plug-in, yang saya digunakan sekali untuk gaya beberapa bentuk. jqTransform sangat bagus plug-in untuk menyesuaikan bentuk dengan cara yang sangat mudah dan produk akhir tidak diragukan lagi indah. Tapi dalam kasus ini, itu menjadi pemutus kecepatan minor untuk kemajuan saya.

Masalah

Drop-down daftar kontrol dari bentuk html berisi 'pilih' tag yang menyertakan 'opsi' berbagai tag. Berikut adalah bentuk yang saya gunakan dalam tutorial ini untuk menjelaskan masalah:

 <form>
	 <h4> Pilih Kotak Tanpa jqTransform </ h4>
	 <div id="box-city" class="select-menus">
		 <label> Kota </ label>
		 <br/>
		 <select name="select-country">
  		         <option> Gotham </ option>
			 <option> New York City </ option>
			 <option> Smallville </ option>
		 </ Select>
		 <div class="clear"> </ div>
	 </ Div>
 </ Form>

Apa jqTransform lakukan adalah, ia memindai seluruh tag 'pilih' dan menciptakan daftar unordered mengandung hiper-link dari pilihan dalam daftar drop-down-. Kemudian menyembunyikan asli 'pilih' tag dan isinya.

 <form class="jqtransform jqtransformdone">
	 <h4> Pilih kotak dengan jqTransform dan metode perubahan normal pilih </ h4>
	 <div class="select-menus" id="box-name">
		 <label style="cursor: pointer;"> Nama </ label>
		 <div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			 <div>
				 <span style="color: 119px;"> Batman </ span>
				 <a class="jqTransformSelectOpen" href="#"> </ a>
			 </ Div>
                         <ul style="color: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
				 <li> <a href="#" index="0" class="selected"> Batman </ a> </ li>
				 <li> <a href="#"> index="1" Robin </ a> </ li>
				 <li> <a href="#"> index="2" Superman </ a> </ li>
				 <li> <a href="#"> index="3" Spiderman </ a> </ li>
			 </ Ul>
			 <select name="select-country" class="jqTransformHidden" style="">
	 				 <option> Batman </ option>
					 <option> Robin </ option>
					 <option> Superman </ option>
					 <option> Spiderman </ option>
			 </ Select>
		 </ Div>
		 <div class="clear"> </ div>
	 </ Div>
 </ Form>

Ini tidak menciptakan masalah ketika kita menggunakan 'pilih' tag umumnya untuk memilih nilai tertentu dan kemudian melakukan pengiriman formulir dengan menggunakan tombol submit. Ini menciptakan masalah ketika kita ingin melakukan beberapa fungsi ketika nilai dari daftar drop-down berubah.

Hal ini biasanya dicapai di javascript dengan menggunakan 'perubahan' metode kontrol pilih. 'Perubahan' metode menangkap acara-nilai perubahan dan kita dapat mengakses nilai yang dipilih oleh pengguna dengan cara berikut.

 / / Menangkap peristiwa perubahan Kotak Pilih Non-Transformasi.
 $ ("# Kotak-kota pilih"). Perubahan (function () {
	 var nilai = $ (ini) val ().;
     alert ("Nilai Dipilih =" + nilai);
 });

Tetapi setelah menggunakan jqTransform plugin, yang 'pilih' tag tidak lebih sana untuk menerapkan metode perubahan pada.

Solusi

Solusi untuk ini, adalah satu yang sangat sederhana. Kita dapat mensimulasikan acara perubahan untuk drop down jqTransformed dengan menerapkan fungsi klik untuk elemen hiper-link dalam unordered list. Kemudian kita dapat memiliki nilai yang dipilih dengan mengakses teks tag span mana elemen yang dipilih diatur atau ditampilkan.

 / / Menangkap acara perubahan dari Kotak Pilih Berubah menggunakan metode modifikasi dari menangkap acara perubahan nilai.
 $ ("# Kotak usia div.jqTransformSelectWrapper ul li a"). Klik (function () {
	 var nilai = $ ("# kotak rentang usia div.jqTransformSelectWrapper") teks (.)
	 alert ("Nilai Dipilih =" + nilai);
	 return false; / / mencegah aksi browser default
 });

Kesimpulan

Ini adalah salah satu cara simulasi fungsi perubahan untuk drop-down-list kotak setelah menggunakan jqTransform untuk menyesuaikan mereka. Pilihan lainnya adalah untuk memodifikasi plugin jqTransform sendiri untuk benar mengakses acara onChange dari 'Pilih' kotak. Saya berharap plug-in jqTransform pengembang dapat memperbaiki masalah ini dalam rilis berikutnya dari plug-in. Meskipun ini bukan bug yang sangat penting atau umum tapi saya berharap bahwa ini adalah beberapa bantuan.

Tags: CSS , bentuk , jqTransform , jQuery
Posted in Tutorial | 71 Comments »

Berlangganan
<a href="http://us.clickme.my/openx/www/delivery/ck.php?n=a9c8645c&cb=INSERT_RANDOM_NUMBER_HERE"target=_blank><a><img src=http://us.clickme.my/openx/www/delivery/avw.php?zoneid=30&cb=INSERT_RANDOM_NUMBER_HERE&n=a9c8645c border=0 alt="" /></a></a>
Daftar
Terakhir
Posting Populer
Kiriman terbaru
Komentar
Wordpress Tahun di Review: The Tutorial Terbaik tahun 2011
Kiat Kilat: Backing Up Blog Anda dengan VaultPress
40 + Lucu Portofolio Wordpress Theme
Kiat Kilat: Menggunakan shortcode dalam Pembangunan Tema
Buat Portofolio Multi-Layout dengan Wordpress
'Pilih' Masalah Setelah Menggunakan jqTransform dan Solusi nya 71 comment (s)
Bagaimana Kode yang Tumpang Tindih menu Utama Tabbed 47 comment (s)
Mengintegrasikan Zoom Cloud dengan WP e-Commerce Cart Emas Galeri komentar 31 (s)
Grunge Templat 19 comment (s)
iPhone Aplikasi Templat 19 comment (s)
Listify, Mengkonversi Teks Mentah Untuk Elemen HTML 17 comment (s)
Bisnis Template 16 comment (s)
utama:
$ ('Select.jqTransformHidden') hidup ('perubahan', function () {. Var thiz = $ (t. ..
Jwel:
Suppppppppppper tutorial .... Terima kasih banyak ...............
zied:
Hi, saya telah menggunakan plugin yang jqtransform untuk membuat formulir pendaftaran, I. ..
zied:
Hello; adalah apa yang Anda telah menemukan solusi untuk penggunaan "OptionGroup "?...
Tag Cloud
000webhost aplikasi CMS coding CSS 3 CSS Kustom Posts Pembangunan menampilkan pakan dns pakan bentuk Gratis Grunge bagaimana jqTransform jQuery jQuery UI Luncurkan manajer menu Pindah navigasi host baru Berita di dibelitkan PCA Portofolio PSD PSD ke HTML PSD ke Mail PSD ke Wordpress PSD ke XHTML / CSS tip cepat menggeser situs wordpress sprite Template wordpress mentransfer database yang mentransfer blog wordpress tutorial Twitter Tidak dapat membuat direktori Wordpress wpwebhost xHTML
WP Cumulus Flash tag awan oleh Roy Tanck dan Lukas Morton memerlukan Flash Player 9 atau yang lebih baik.

Codepal

My Blog

Tulisan-tulisan saya, Berbagi Pengetahuan saya, Berita

Posts Tagged 'jQuery'

Mengintegrasikan Cloud Zoom dengan Galeri WP e-Commerce Cart Emas

Proyek

Masalah

Solusi

Kesimpulan

Penerbitan Guru

Tantangan

Solusi

Aplikasi iPhone Template

Cara Buat Halaman FAQ dengan WordPress dan Jenis Posting Kustom

Membuat Efek Blink Neon untuk Formulir Anda menggunakan CSS3 dan jQuery

'Pilih' Masalah Setelah Menggunakan jqTransform dan Solusi nya

Proyek

Masalah

Solusi

Kesimpulan

Daftar

Tag Cloud

Tentang Penulis

Arsip

Teman

Kategori

Navigasi

Codepal

My Blog

Tulisan-tulisan saya, Berbagi Pengetahuan saya, Berita

Posts Tagged 'jQuery'

Mengintegrasikan Cloud Zoom dengan Galeri WP e-Commerce Cart Emas

Proyek

Masalah

Solusi

Kesimpulan

Penerbitan Guru

Tantangan

Solusi

Aplikasi iPhone Template

Cara Buat Halaman FAQ dengan WordPress dan Jenis Posting Kustom

Membuat Efek Blink Neon untuk Formulir Anda menggunakan CSS3 dan jQuery

'Pilih' Masalah Setelah Menggunakan jqTransform dan Solusi nya

Proyek

Masalah

Solusi

Kesimpulan

Berlangganan

Daftar

Tag Cloud

Tentang Penulis

Arsip

Teman

Kategori

Navigasi