NopCommerce 3.4中商品詳情頁面單選框、復選框的美化

本文轉載自查看原文 2015-01-21 16:31 902 NopCommerce/ Asp.net MVC

先上圖給大家看看效果，點這里打開網站（后期可能會找不到這個商品，現在再測試階段）

現在你能看到的這個頁面中，尺寸、文本描述是單選框（屬性是我亂寫的名字），上門安裝是復選框。效果就看到這里，請君跳過圖片，開始看實現過程：

NopCommerce的屬性View全部在Product下面_ProductAttributes.cshtml生成的，所以，整個的操作都是在_ProductAttributes.cshtml這個文件中。

打開這個文件，首先里面會有它生成各種控件用的一大段forearch,如圖

他這個里面一個Case就是一種控件，我重寫的是單選和復選，所以改他的RadioList和CheckBox就好了，先來看單選的代碼，說明在注釋中

 case AttributeControlType.RadioList:
                {
                    <div style="min-height: 25px;">
                        @*單選框他會有很多個選項，foreach，高手忽略這句*@
                        @foreach (var pvaValue in attribute.Values)
                        {
                            <div class="item @(pvaValue.IsPreSelected?Html.Raw("selected"):Html.Raw(""))">
                                @*把他的單選按鈕給通過Display:none隱藏起來*@
                                <input id="@(controlId)_@(pvaValue.Id)" type="radio" name="@(controlId)" value="@pvaValue.Id" checked="@pvaValue.IsPreSelected" style="display: none" />
                                @*下面是給用戶顯示的被美容過的單選按鈕，我沒法往出來貼CSS，想辦法完了給大家一個下載地址吧*@
                                <a title="@pvaValue.Name @(!String.IsNullOrEmpty(pvaValue.PriceAdjustment) ? " [" + pvaValue.PriceAdjustment + "]" : null)" href="#" class="radio_a">
                                    @if (!string.IsNullOrEmpty(pvaValue.PictureUrl))
                                    {
                                        @*下面是商品屬性所關聯的圖片*@
                                        <img src="@pvaValue.PictureUrl" style="width: 15px;height: 15px;" />
                                    }
                                    <i>@pvaValue.Name @(!String.IsNullOrEmpty(pvaValue.PriceAdjustment) ? " [" + pvaValue.PriceAdjustment + "]" : null)</i>
                                </a><b></b>
                            </div>
                        }
                    </div>
                }
                break;

單選按鈕

既然把單選按鈕給隱藏了，那怎么再讓用戶去選中他呢？答案是，通過JS，當用戶點擊外面的那個漂亮版單選框的時候，去找到那個單選控件，然后給他選中（注意，單選框沒有再點擊一次反選這么一說）

JS代碼如下，注釋在里面了

 $(".chose .item .radio_a").click(function() {
        var thisToaggle = $(this).is('.radio_a') ? $(this) : $(this).prev();//找到<a>元素
        var checkBox = thisToaggle.prev();//找到他對應的單選按鈕
        checkBox.attr('checked','checked');//給他選中，這塊如果不手動給他選中，在計算價格的時候會有Bug
        checkBox.trigger('click');//執行這個單選按鈕的單擊事件，目的是為了讓他改變價格
        var name = checkBox.attr("name");
        $("[name=" + name + "]").next("a").parent(".chose .item").removeClass("selected");//其他的單選按鈕移除選中效果
        thisToaggle.parent('.chose .item').addClass('selected');//當前單選按鈕添加選中效果
        return false;
    });

單選的JS

單選的就這樣子就搞定了，如果遇到問題，在下面跟回復。

---------------------------------------------------------分割線，復選框開始-------------------------------------------------------------------------------

生成復選框的代碼（跟單選框一個道理，沒寫注釋，有問題的下面回復）

 $(".chose .item .radio_a").click(function() {
        var thisToaggle = $(this).is('.radio_a') ? $(this) : $(this).prev();//找到<a>元素
        var checkBox = thisToaggle.prev();//找到他對應的單選按鈕
        checkBox.attr('checked','checked');//給他選中，這塊如果不手動給他選中，在計算價格的時候會有Bug
        checkBox.trigger('click');//執行這個單選按鈕的單擊事件，目的是為了讓他改變價格
        var name = checkBox.attr("name");
        $("[name=" + name + "]").next("a").parent(".chose .item").removeClass("selected");//其他的單選按鈕移除選中效果
        thisToaggle.parent('.chose .item').addClass('selected');//當前單選按鈕添加選中效果
        return false;
    });

復選框

復選框跟單選框有點不一樣，因為單選框沒有再點擊一次反選這么一說，但是復選框點第一次，是選中，第二次，就是不選中了，所以，再單選應對那個JS的bug的時候，就會有問題，認真看了單選JS的會知道，先給他把選中屬性"checkBox.attr('checked','checked');"給改了，然后再去執行Click事件，如果用作復選框，就相當於復選框你先給他選中，然后再執行一個Click事件，就又成不選中了，但是如果不去手動執行"checkBox.attr('checked','checked');”價格計算又會有bug（你可以注釋掉單選的那句看看那個Bug，東西太多，說起來會很費勁的）

逼得我沒辦法，把nop原來是click去執行價格的重新計算改成了onmoursedown,效果應該是一樣的，我反正沒遇到過bug，怎么改見下面的代碼：

1.在生成界面代碼的下面，又Nop生成js的一大堆代碼，這里也是switch case(這個是Nop去改變價格的),看圖：

找到復選框的，把Click，改成MouseDown,如圖：

再下面他還有一組Switch Case(這個是Nop去改變左邊商品圖片的),把那個里面的click，也改成mousedown，如圖

好了，生成的東西就改完了，最后我放JS出來：

 $(".chose .item .radio_b").click(function() {
        var thisToaggle = $(this).is('.radio_b') ? $(this) : $(this).prev();
        var checkBox = thisToaggle.prev();
        checkBox.prop('checked',!checkBox.prop('checked'));//如果沒選中，給他選中，如果選中了，給他改成沒選中
        checkBox.trigger('mousedown');//執行mousedown事件
        var name = checkBox.attr("name");
        $("[name=" + name + "]").next("a").parent(".chose .item").toggleClass("selected");
        return false;
    });

復選框JS

大功告成！沒啥需要修改的了....

我那個單選框美化的CSS沒法給大家，給大家另外我百度找的一組，看起來也不錯。點此下載

最后把Nop生成的JS放出來，感興趣的看看他的實現思路

  1    <script type="text/javascript">
  2         //Price adjustment table
  3         var priceAdjustmentTable_65 = new Array();
  4         var weightAdjustmentTable_65 = new Array();
  5         //Price adjustment table initialize
  6         priceAdjustmentTable_65['product_attribute_65_13_45_73'] = 400;
  7 priceAdjustmentTable_65['product_attribute_65_13_45_74'] = 0;
  8 priceAdjustmentTable_65['product_attribute_65_18_51_83'] = 0;
  9 priceAdjustmentTable_65['product_attribute_65_18_51_84'] = 0;
 10 priceAdjustmentTable_65['product_attribute_65_13_61_94'] = 200;
 11 priceAdjustmentTable_65['product_attribute_65_9_44_85'] = 2799;
 12 priceAdjustmentTable_65['product_attribute_65_9_44_86'] = 2398;
 13 
 14         ;
 15         //Price adjustment function
 16         function adjustPrice_65() {
 17 
 18 
 19                     
 20             var sum = 0;
 21             for (var i in priceAdjustmentTable_65) {
 22                 var ctrl = $('#' + i);
 23                 if ((ctrl.is(':radio') && ctrl.is(':checked')) || (ctrl.is(':checkbox') && ctrl.is(':checked'))) {
 24                     sum += priceAdjustmentTable_65[i];
 25                 } else if (ctrl.is('select')) {
 26                     var idx = $('#' + i + " option").index($('#' + i + " option:selected"));
 27                     if (idx != -1) {
 28                         sum += priceAdjustmentTable_65[i][idx];
 29                     }
 30                 }
 31             }
 32             var res = (priceValForDynUpd_65 + sum).toFixed(2);
 33             $(".price-val-for-dyn-upd-65").text(res);
 34             
 35         }
 36         function adjustWeight_65() {
 37             
 38             $('#ShippingPrice').text("正在計算...");
 39             $.ajax({
 40                 cache: false,
 41                 url: '/Product/ShippingPrice_AttributeChange?productId=65',
 42                 data: $('#product-details-form').serialize(),
 43                 type: 'post',
 44                 success: function(data) {
 45                     $('#ShippingPrice').text(data.Message);
 46                 }
 47             });
 48 
 49             
 50 
 51         }
 52 
 53         //Price attributes handlers
 54         $(document).ready(function() {
 55             adjustPrice_65();
 56             adjustWeight_65();
 57             $('#product_attribute_65_13_45_73').click(function(){adjustPrice_65();adjustWeight_65();});
 58 $('#product_attribute_65_13_45_74').click(function(){adjustPrice_65();adjustWeight_65();});
 59 $('#product_attribute_65_18_51_83').click(function(){adjustPrice_65();adjustWeight_65();});
 60 $('#product_attribute_65_18_51_84').click(function(){adjustPrice_65();adjustWeight_65();});
 61 $('#product_attribute_65_13_61_94').mousedown(function(){adjustPrice_65();adjustWeight_65();});
 62 $('#product_attribute_65_9_44_85').mousedown(function(){adjustPrice_65();adjustWeight_65();});
 63 $('#product_attribute_65_9_44_86').mousedown(function(){adjustPrice_65();adjustWeight_65();});
 64 
 65         });
 66     </script>
 67 
 68 
 69 
 70 
 71 
 72 
 73     <script type="text/javascript">
 74 
 75         //Picture adjustment table
 76         var productAttributeValueAdjustmentTable_65 = new Array();
 77         //Picture adjustment table initialize
 78         productAttributeValueAdjustmentTable_65['product_attribute_65_13_45_73_defaultsize'] = '';
 79 productAttributeValueAdjustmentTable_65['product_attribute_65_13_45_73_fullsize'] = '';
 80 productAttributeValueAdjustmentTable_65['product_attribute_65_13_45_74_defaultsize'] = 'http://anhuim.com/content/images/thumbs/0000441_2015-_600.jpeg';
 81 productAttributeValueAdjustmentTable_65['product_attribute_65_13_45_74_fullsize'] = 'http://anhuim.com/content/images/thumbs/0000441_2015-.jpeg';
 82 productAttributeValueAdjustmentTable_65['product_attribute_65_18_51_83_defaultsize'] = '';
 83 productAttributeValueAdjustmentTable_65['product_attribute_65_18_51_83_fullsize'] = '';
 84 productAttributeValueAdjustmentTable_65['product_attribute_65_18_51_84_defaultsize'] = 'http://anhuim.com/content/images/thumbs/0000442_2015-_600.jpeg';
 85 productAttributeValueAdjustmentTable_65['product_attribute_65_18_51_84_fullsize'] = 'http://anhuim.com/content/images/thumbs/0000442_2015-.jpeg';
 86 productAttributeValueAdjustmentTable_65['product_attribute_65_13_61_94_defaultsize'] = '';
 87 productAttributeValueAdjustmentTable_65['product_attribute_65_13_61_94_fullsize'] = '';
 88 productAttributeValueAdjustmentTable_65['product_attribute_65_9_44_85_defaultsize'] = 'http://anhuim.com/content/images/thumbs/0000473_2014-_600.jpeg';
 89 productAttributeValueAdjustmentTable_65['product_attribute_65_9_44_85_fullsize'] = 'http://anhuim.com/content/images/thumbs/0000473_2014-.jpeg';
 90 productAttributeValueAdjustmentTable_65['product_attribute_65_9_44_86_defaultsize'] = 'http://anhuim.com/content/images/thumbs/0000464_2014-_600.jpeg';
 91 productAttributeValueAdjustmentTable_65['product_attribute_65_9_44_86_fullsize'] = 'http://anhuim.com/content/images/thumbs/0000464_2014-.jpeg';
 92 
 93         //Picture adjustment function
 94         function adjustProductAttributeValuePicture_65(controlId, productId) {
 95             var ctrl = $('#' + controlId);
 96             var pictureDefaultSizeUrl = '';
 97             var pictureFullSizeUrl = '';
 98             if((ctrl.is(':radio') && ctrl.is(':checked')) || (ctrl.is(':checkbox') && ctrl.is(':checked'))) {
 99                 pictureDefaultSizeUrl = productAttributeValueAdjustmentTable_65[controlId + '_defaultsize'];
100                 pictureFullSizeUrl = productAttributeValueAdjustmentTable_65[controlId + '_fullsize'];
101 
102             } else if(ctrl.is('select')) {
103                 var idx = $('#' + controlId + " option").index($('#' + controlId + "option:selected"));
104                 if(idx != -1) {
105                     pictureDefaultSizeUrl = productAttributeValueAdjustmentTable_65[controlId + '_defaultsize'][idx];
106                     pictureFullSizeUrl = productAttributeValueAdjustmentTable_65[controlId + '_fullsize'][idx];
107                 }
108             }
109             if (typeof pictureDefaultSizeUrl == 'string' && pictureDefaultSizeUrl != '') {
110                 //$('#main-product-img-' + productId).attr("src", pictureDefaultSizeUrl);
111                 var defaultSizePic = $(".pro-detail .left .imgList img[src='"+pictureDefaultSizeUrl+"']");
112                 defaultSizePic.trigger('click');
113             }
114             //if (typeof pictureFullSizeUrl == 'string' && pictureFullSizeUrl != '') {
115             //    $('#main-product-img-lightbox-anchor-' + productId).attr("href", pictureFullSizeUrl);
116             //}
117 
118 
119         }
120         // Picture attributes handlers
121         $(document).ready(function() {
122             $('#product_attribute_65_13_45_73').click(function(){adjustProductAttributeValuePicture_65('product_attribute_65_13_45_73',65);});
123 $('#product_attribute_65_13_45_74').click(function(){adjustProductAttributeValuePicture_65('product_attribute_65_13_45_74',65);});
124 $('#product_attribute_65_18_51_83').click(function(){adjustProductAttributeValuePicture_65('product_attribute_65_18_51_83',65);});
125 $('#product_attribute_65_18_51_84').click(function(){adjustProductAttributeValuePicture_65('product_attribute_65_18_51_84',65);});
126 $('#product_attribute_65_13_61_94').mousedown(function(){adjustProductAttributeValuePicture_65('product_attribute_65_13_61_94',65);});
127 $('#product_attribute_65_9_44_85').mousedown(function(){adjustProductAttributeValuePicture_65('product_attribute_65_9_44_85',65);});
128 $('#product_attribute_65_9_44_86').mousedown(function(){adjustProductAttributeValuePicture_65('product_attribute_65_9_44_86',65);});
129 
130         });
131     </script>
132 <script type="text/javascript">
133     $(".chose .item .radio_a").click(function() {
134         var thisToaggle = $(this).is('.radio_a') ? $(this) : $(this).prev();
135         var checkBox = thisToaggle.prev();
136         checkBox.attr('checked','checked');
137         checkBox.trigger('click');
138         //alert(checkBox.val());
139         var name = checkBox.attr("name");
140         $("[name=" + name + "]").next("a").parent(".chose .item").removeClass("selected");
141         //  thisToaggle.sibling(".chose .item").removeClass('selected');
142         thisToaggle.parent('.chose .item').addClass('selected');
143         return false;
144     });
145     $(".chose .item .radio_b").click(function() {
146         var thisToaggle = $(this).is('.radio_b') ? $(this) : $(this).prev();
147         var checkBox = thisToaggle.prev();
148         checkBox.prop('checked',!checkBox.prop('checked'));
149         checkBox.trigger('mousedown');
150         var name = checkBox.attr("name");
151         $("[name=" + name + "]").next("a").parent(".chose .item").toggleClass("selected");
152         return false;
153     });
154 </script>

Nop生成出來的JS

祝大家生活愉快~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 分享美化復選框和單選框插件單選框和復選框中value值得獲取 JS中獲取頁面單選框radio和復選框checkbox中當前選中的值 JS中獲取頁面單選框radio和復選框checkbox中當前選中的值 JS中獲取頁面單選框radio和復選框checkbox中當前選中的值純css美化復選框，單選框，滑動條（range）【CSS筆記】CSS3美化復選框和單選框 android單選框和復選框（練習） Mui-復選框，單選框 HTML-表單-單選框-復選框-提交