Browsing all articles in 前端相关
十二
13
3

可筛选下拉框在Magento商城中的应用

Author 紫月蓝骋    Category Magento, 前端相关     Tags

在Magento添加可配置产品的时候，某一属性如果选项很多，我们就要盯着下拉框一个一个扫描下去了，这样会崩溃的。我用jQuery写了个可以对属性进行筛选的方法。实现原理就是弄了个假的select选择框覆盖在上面。先看下事例图。
未进行筛选的下拉框
Magento-select
筛选后的下拉框
magento-select
在app/design/adminhtml/default/default/template/cagalog/product /edit/super/config.phtml加入以下代码.
其中#simple_product_huaxing是select的id，改为你的select的iD即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div id="huase">
<div id="selecthuaxin"><input type="text" /></div>
</div>
<script type="text/javascript">// <![CDATA[
 jQuery("#huase").insertBefore("#simple_product_huaxing");
jQuery("#selecthuaxin input").keyup(function(){
      var inputval=jQuery(this).val();
      jQuery("#weiselect li").remove()
jQuery("#simple_product_huaxing option:contains("+inputval+")").each(function(){
            var selecton=jQuery(this).text();
            var opval=jQuery(this).val();
var li=jQuery("
 
	<li />")
li.text(selecton)
jQuery("#weiselect").append(li)
li.addClass(opval)
jQuery("#weiselect li").click(function(){
      var lion=jQuery(this).attr("class")
      var litext= jQuery(this).text()
jQuery("#simple_product_huaxing").val(lion);
 jQuery("#selecthuaxin input").val(litext)
 jQuery("#weiselect li").remove()
})
jQuery("#simple_product_huaxing").change(function(){
var selcted=jQuery("#simple_product_huaxing option:selected").text()
  jQuery("#selecthuaxin input").val(selcted)
})
jQuery("#weiselect li").hover(function(){
jQuery(this).css({background:"#2E4A99",color:"#fff"})
},function(){
jQuery(this).css({background:"#fff",color:"#000"})
} ) 
 
      });
 
})
// ]]></script>
十
14
0

去掉链接、按钮的虚框

Author 紫月蓝骋    Category 前端相关     Tags

链接和按钮在点击的时候会默认出现虚框，有时候因为美观我们需要去掉，最近就被这个小折腾了下，总结了下往上发的一些方法。
1、a{outline:none} 这个是针对Firefox的，但是IE下无效。
2、jQuery(“a”).each(function(){this.onmouseup = this.blur();})如果网站中已经加入jQuery，可以用这个方法。
3、< a href="#" hidefocus="true">……，在a标签中加入hidefocus=”true”，这个在IE下可用，但是通不过W3C验证。
4、< input type="button" border=0 onFocus="this.blur()" name="……"> button按钮标签中加入onFocus=”this.blur()”，这个同样无法通过w3c验证。
5、input{blr:expression(this.onFocus=this.blur());}给按钮加入这个样式，往上评论说这个东西不能多用，会影响性能，我也没验证，我只在一个地方用到。
上面的方法都可行，在使用时须看实际情况针对使用。

六
2
0

浏览器兼容——CSS Hack

Author 紫月蓝骋    Category 前端相关, 未分类     Tags ,

通过CSS Hack解决各浏览器的兼容问题，是现在普遍采用的方法。我分享一些常用的CSS Hack写法。

1
2
3
4

<!--[if IE6]-->……<![endif]-->  
<!--[if IE7]-->……<![endif]-->  
<!--[if IE8]-->……<![endif]-->  
<!--[if !IE]-->……<![endif]-->
1
2
3
4
5
6
7

 .csshack{  
         padding:10px; 
         padding:9px\9; /* 所有 ie */  
        *padding:5px; /* ie6和ie7 */ 
         +padding:7px; /* ie7 */ 
        _padding:6px; /* ie6 */ 
         }

这些是比较常用的CSS Hack写法，可以解决大部分兼容问题。但我个人认为，应该从根本入手，而不是单单依靠CSS Hack。

五
19
0

jQuery中cookies的应用

Author 紫月蓝骋    Category 前端相关     Tags

jQuery操作cookies，首页需要导入一个插件， 可以去官方下过来http://plugins.jquery.com/project/Cookie，下面简单的说下用法。
$.cookie(’name’, ‘value’);//设置cookie名，值
$.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});设置cookie的名，值，有效期，路径，域，安全
$.cookie(’name’);//读取cookie的值
$.cookie(’name’, null);//删除一个cookie

五
18
0

在IE6中使用position:absolute，层不显示

Author 紫月蓝骋    Category 前端相关     Tags ,

这是今天做网站碰到的问题，使用position:absolute定位，但是在IE6下无法显示。最终发现是因为紧挨的div的float没有清除浮动。去除div的浮动即可。

五
10
0

jQuery兼容问题

Author 紫月蓝骋    Category 前端相关     Tags ,

之前写到过一篇Magento中 jQuery使用方法，这篇文章针对Magento使用jQuery写了一点想法，写的不是很全。这里分享下jQuery和其他的JavaScript框架同时使用引起的兼容性问题。问题主要的原因在于：jQuery用$作为自身的快捷方式。

一、jQuery库在其他库之后导入

在JavaScript库都导入后，调用jQuery.noconflict()函数来将变量$控制权移交给其他JavaScript库。

<script type=”text/javascript”>

jQuery.noCoflict();

jQuery(function($){   //使用jQuery设定页面加载时执行的函数

$(“……”)…… //在函数内部继续使用$（）方法

})

</script>

二、jQuery库在其他库之前导入

如果jQuery库在其他之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。

Magento中 jQuery使用方法

四
29
0

IE6下PNG图片透明解决方法

Author 紫月蓝骋    Category 前端相关     Tags

PNG在IE6下不透明是个比较老的问题了，今天在逛玛萨玛索的时候看到他们的png在ie下是透明的，就把类似png的一个JS拷下来试验了下，成功 了。只要把下面的js导入网站中就可以了，比较简单，所以拿出来共享下。在Magento中测试也成功了，不过背景图片透明不支持。在Magento中不建议使用png图片，现在解决IE6下透明的方法对性能都有一定影响。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// JavaScript Document
 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
 {
 var arVersion = navigator.appVersion.split("MSIE")
 var version = parseFloat(arVersion[1])
 if ((version >= 5.5) && (document.body.filters))
 {
 for(var j=0; j<document.images.length; j++)
 {
 var img = document.images[j]
 var imgName = img.src.toUpperCase()
 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 {
 var imgID = (img.id) ? "id='" + img.id + "' " : ""
 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
 var imgStyle = "display:inline-block;" + img.style.cssText
 if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
 var strNewHTML = "<span " + imgID + imgClass + imgTitle
 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
 img.outerHTML = strNewHTML
j = j-1
 }
 }
 }
 }
 //window.attachEvent("onload", correctPNG);
 
 window.onload = correctPNG;
四
20
1

Google浏览器无法显示12px以下字体

Author 紫月蓝骋    Category 前端相关     Tags

今天做的一个网站发现Google浏览器的 字体明显的比Firefox大，检查样式后，没发现什么不对的地方，就自己做了下测试，发现Google浏览器只支持12px（包括12px）以上的字体。对汉字来说，这样也许比较不错，因为汉字12px以下就不好看了。但对于英文来的话，就觉得没必要了，相对小点，还是会比较清晰。