Yooyo Garden » 前端开发 http://www.yooyo.me/blog frent-end and web design Thu, 10 Nov 2011 04:43:17 +0000 en hourly 1 http://wordpress.org/?v=3.3 Overview of CSS3 structural pseudo-classes(1) – the ‘:target ‘ pseudo-class http://www.yooyo.me/blog/overview-of-css3-structural-pseudo-classes1-the-target-pseudo-class/ http://www.yooyo.me/blog/overview-of-css3-structural-pseudo-classes1-the-target-pseudo-class/#comments Thu, 10 Nov 2011 04:42:16 +0000 admin http://www.yooyo.me/blog/?p=203

E:target

Selects the element E referenced by the fragment identifier (if any) of the page’s URL. this lets you dynamically select the jumped-to anchor from an HTML anchor on the page.

target 伪类可以动态选择页面中具有锚点的元素。


通常一个页面都是有一个URL地址，但是如果这个地址如果是以#something 结尾 链接到特定的元素的话，浏览器会尝试着确定这个元素是否存在（可见）或者是否是在页面的顶端。

:target 伪类可以选择这个特定的元素。

当然可以做的更多，比如，你可以判断这个元素是否选中来隐藏或者显示这个元素。

一个简单的例子：

<a href="#item1">item 1</a>
<a href="#item2">item 2</a>
<a href="#item3">item 3</a>
<a href="#default">clear</a>
<div class="items">
<p id="item1">... item 1...</p>
<p id="item2">... item 2...</p>
<p id="item3">...item 3...</p>
<p id="default">no target</p>

</div>

相应的css，

div.items p {display: none}
div.items p:target {display: block}

非常简单的一个选项卡切换功能，只用了css3就实现。

你可以另外加些样式，使之看起来更像一个按钮。

实际上，在那些支持css3的浏览器你可以用’:not(:target)’隐藏没有被选择的元素。相应代码：

div.items p:not(:target) {display: none}
div.items p:target {display: block}
]]> http://www.yooyo.me/blog/overview-of-css3-structural-pseudo-classes1-the-target-pseudo-class/feed/ 0 UPDATING XCODE AND MACPORTS FOR OSX LION http://www.yooyo.me/blog/updating-xcode-and-macports-for-osx-lion/ http://www.yooyo.me/blog/updating-xcode-and-macports-for-osx-lion/#comments Tue, 26 Jul 2011 09:47:28 +0000 admin http://www.yooyo.me/blog/updating-xcode-and-macports-for-osx-lion/ 转发一篇文章

So, you’ve upgraded from Snow Leopard to Lion, and you’re ready to jump back into development. Watch out! MacPorts and XCode need to be updated! Apple doesn’t include XCode in the system updates, so you have to do it manually. If you installed XCode on Snow Leopard, you’re probably running XCode 3 (unless of course you bought XCode 4). The latest that ships for Lion is 4.1 and is free. Here’s how to upgrade your development environment:

Step 1: Install XCode 4.1

From the App store, find and download XCode. This will put an installer in your Applications folder. Run the installer. As of right now, there isn’t an alternative download method from Apple. If you don’t want to deal with the App store, you’ll probably have to hit the warez sites.

Step 2: Uninstall XCode 3

Installing the new XCode doesn’t replace your old one, it just moves it to a backup directory. Fire up your terminal:

sudo /Developer-old/Library/uninstall-devtools –mode=all
Remove the leftover XCode folder:

sudo rm -rf /Developer-old
At this point I needed to run the XCode 4.1 installer again because the XCode 3 uninstall removed some of the shared command line utilities.

Step 3: Remove installed ports

Make a list of your installed ports in your home folder:

port -qv installed > ~/myports.txt
Uninstall all ports

sudo port -f uninstall –follow-dependents installed
Remove any partially installed ports and archives

sudo port clean –work –archive all
Step 4: Update MacPorts

MacPorts recommends that you reinstall the base package, but as of right now there isn’t a Lion-specific installer. You should download and run the Snow Leopard installer again though.

After that, make sure you’re updated and rsynched with the MacPorts server:

sudo port -v selfupdate
sudo port upgrade obsolete
Step 5: Reinstall the ports you need

Read through the text file we created, and reinstall only the ports you need. Don’t worry about all the dependencies, they’ll be added as necessary. Make sure that if you used specific variants (the package name is followed with a +) that you install those variants. For example, I didn’t install git-core, I installed git-core +svn, so I need to now run:

sudo port install git-core +svn
Yes, even though Git and SVN are both included in XCode 4.1, I am reinstalling git. The build of Git that Apple included is quite limited, and I needed a specific extension git-svn so that I can migrate my projects from SVN to Git.

That should be it! Enjoy developing on OSX Lion!

]]> http://www.yooyo.me/blog/updating-xcode-and-macports-for-osx-lion/feed/ 0 JS学习笔记提升规则(hoisting) http://www.yooyo.me/blog/js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0%e6%8f%90%e5%8d%87%e8%a7%84%e5%88%99hoisting/ http://www.yooyo.me/blog/js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0%e6%8f%90%e5%8d%87%e8%a7%84%e5%88%99hoisting/#comments Tue, 14 Jun 2011 10:11:11 +0000 admin http://www.yooyo.me/blog/?p=196 JS 学习笔记一：

提升规则 hoisting

JS代码：

var  h_var = "Hello hoisting";

alert(h_var);

运行代码会输出 Hello hoisting

代码2:

var  h_var = "Hello hoisting";

(function(){

alert(h_var);

})();

运行代码也会输出 Hello hoisting

代码3:

var  h_var = "Hello hoisting";

(function(){

alert(h_var);

var h_var = "Hello hoisting again!"

})();

运行代码则会输出 undefined, 为什么我们已经声明了变量h_var 但是会输出undefined呢？

在它的当前作用域内，不管变量是在哪里声明的，都会提升到顶部作用域，然而，只是声明部分提升,赋值部分不会被提升，如果变量被赋值，则当前的值会初始化为 undefined!

声明跟初始化的区别：

假设有这样一个变量声明：

var h_var = "hello h"

那么，首先是声明： var h_var ,然后才是初始化变量 h_var = “hello h”.

再来一个例子：

function hoisting(){

var a=1;

//其他js代码

var b=2;

//其他js代码。。。



}

则相当于：

function hoisting(){

var a,b;

a = 1

//其他js代码，再这里的js代码如果用到b变量的话则是输出undefined!

b=2;

//其他js代码。。。


}

提示： 把所有的变量声明都写到函数的顶部！

所以不难理解上面的代码3 ：

var  h_var = "Hello hoisting";

(function(){

var h_var; //变量声明自动提升到函数顶部，但是变量初始化没有提升到函数顶部，所以初始值为 undefined

alert(h_var);// 输出 undefined

h_var = "Hello hoisting again!"    //var h_var = "Hello hoisting again!" 应该把变量声明放到行数最顶部！

})();


]]> http://www.yooyo.me/blog/js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0%e6%8f%90%e5%8d%87%e8%a7%84%e5%88%99hoisting/feed/ 0 jquery live() 在iPad safari里部分元素失效的问题 http://www.yooyo.me/blog/jquery-live-%e5%9c%a8ipad-safari%e9%87%8c%e9%83%a8%e5%88%86%e5%85%83%e7%b4%a0%e5%a4%b1%e6%95%88%e7%9a%84%e9%97%ae%e9%a2%98/ http://www.yooyo.me/blog/jquery-live-%e5%9c%a8ipad-safari%e9%87%8c%e9%83%a8%e5%88%86%e5%85%83%e7%b4%a0%e5%a4%b1%e6%95%88%e7%9a%84%e9%97%ae%e9%a2%98/#comments Fri, 27 May 2011 07:44:51 +0000 admin http://www.yooyo.me/blog/?p=192 在一个项目里用到live()来绑定一个元素的click事件，但是在iPad里失效了，没有任何效果！ 改用bind可以工作，但是有些内容涉及AJAX请求取得，bind就不符合要求了，用delegate也不能正常工作。

后来查了资料 jQuery’s live click handler on mobile Safari 在元素里添加 onlick＝”", live()就正常工作了。

上面的连接被Q了，

以下是文章的引用：

jQuery’s live click handler on mobile Safari

Won’t fire: $(‘section’).live(‘click’, function(){ … });

But if the element you’re binding to is an anchor tag, it WILL fire.

The workaround: add onclick=”” to the element you’re binding to.

This applies to iOS 4.0.

]]> http://www.yooyo.me/blog/jquery-live-%e5%9c%a8ipad-safari%e9%87%8c%e9%83%a8%e5%88%86%e5%85%83%e7%b4%a0%e5%a4%b1%e6%95%88%e7%9a%84%e9%97%ae%e9%a2%98/feed/ 0 How to change srcollbar style on safari(webkit browsers) http://www.yooyo.me/blog/how-to-change-srcollbar-style-on-safariwebkit-browsers/ http://www.yooyo.me/blog/how-to-change-srcollbar-style-on-safariwebkit-browsers/#comments Fri, 14 Jan 2011 08:11:00 +0000 admin http://www.yooyo.me/blog/?p=179 一下代码是修改基于webkit浏览器的滚动条的样式的css代码(部分).

#container ::-webkit-scrollbar {/*滚动条宽跟高*/
width:9px;
height:9px;
}

#container ::-webkit-scrollbar-button:start:decrement, #container ::-webkit-scrollbar-button:end:increment {
display:block;
height:0;
background-color:transparent;
}

#container ::-webkit-scrollbar-track-piece {/*滚动条样式底部样式*/
background-color:#FAFAFA;
-webkit-border-radius:0;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
}

#container ::-webkit-scrollbar-thumb:vertical {/*垂直滚动条样式*/
height:50px;
background-color:#999;
-webkit-border-radius:8px;
}

#container ::-webkit-scrollbar-thumb:horizontal {/*横向滚动条样式*/
width:50px;
background-color:#999;
-webkit-border-radius:8px;
}

screenshot:

]]> http://www.yooyo.me/blog/how-to-change-srcollbar-style-on-safariwebkit-browsers/feed/ 0 display:inline-block 额外产生的4px margin http://www.yooyo.me/blog/displayinline-block-%e9%a2%9d%e5%a4%96%e4%ba%a7%e7%94%9f%e7%9a%844px-margin/ http://www.yooyo.me/blog/displayinline-block-%e9%a2%9d%e5%a4%96%e4%ba%a7%e7%94%9f%e7%9a%844px-margin/#comments Thu, 01 Jul 2010 09:36:51 +0000 admin http://www.yooyo.me/blog/?p=157 今天在做一个Timeline的模块的时候遇到一个棘手的问题： 给元素添加display:inline-block 属性的时候会产生额外的4px的margin-right。

原始代码

.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;
background-color:#00FF00;
position:relative;
}

页面渲染结果：

每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover状态的事件。尝试修改doctype类型也不见效果。后来尝试了另外一个方法：

把原来的HTML 代码结构：

更改为：

这样就不会产生额外的外边距，也弄不清楚为什么会出现这种问题。先暂时记下，以后再研究研究。

]]> http://www.yooyo.me/blog/displayinline-block-%e9%a2%9d%e5%a4%96%e4%ba%a7%e7%94%9f%e7%9a%844px-margin/feed/ 0 Zen Coding- 一个书写HTML跟CSS代码的方法 http://www.yooyo.me/blog/zen-coding-%e4%b8%80%e4%b8%aa%e4%b9%a6%e5%86%99html%e8%b7%9fcss%e4%bb%a3%e7%a0%81%e7%9a%84%e6%96%b9%e6%b3%95/ http://www.yooyo.me/blog/zen-coding-%e4%b8%80%e4%b8%aa%e4%b9%a6%e5%86%99html%e8%b7%9fcss%e4%bb%a3%e7%a0%81%e7%9a%84%e6%96%b9%e6%b3%95/#comments Thu, 06 May 2010 08:21:37 +0000 admin http://www.yooyo.me/blog/?p=132 Zen Coding 是一个高速书写HTML XML XSL(或者其他结构化代码格式)的编辑器插件，核心功能是功能强大的“缩写引擎” 可以根据你输入的公式自动生成HTML代码，

例子：

输入zen coding 代码公式 ： div#page>div.logo+ul#navigation>li*3>a

在textmate下的执行快捷键是 ⌘+E

执行后为：

点击查看更多关于zen coding 的语法

“缩写引擎”  拥有模块化结构，允许你在不同的语言上扩展公式。zen coding 现在支持的语言有：CSS, HTML, XML/XSL 和 HAML(需要 filters 支持)

—————————————————————————————

“缩写引擎” 目前支持的功能：

  1. ID跟CLASS属性：div#page.section.main
  2. 自定义属性: div[title]，a[title="Hello world" rel], td[colspan=2]
  3. 同时生成N个元素： li*5 会生成5个li 标签
  4. 使用$字符生成递增数字元素： li.item$*3  生成
  5. 使用多个$字符生成多位数列：  li.item$$$ -> li.item001
  6. 无限制嵌套公式支持：div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
  7. 支持 Filters
  8. div 标签可以省略，直接从id或者是class开始 #content>.section is the same as div#content>div.section.

可以观看 视频 跟 Smashing Magazine 上的 教程

官方支持的编辑器：

  1. Aptana/Eclipse
  2. Textmate
  3. Coda
  4. Espresso
  5. Komodo
  6. Notepad++
  7. PSPad
  8. <textarea>(基于网站的编辑器) DEMO
  9. editArea (基于网站的编辑器) DEMO

点击查看官网

]]> http://www.yooyo.me/blog/zen-coding-%e4%b8%80%e4%b8%aa%e4%b9%a6%e5%86%99html%e8%b7%9fcss%e4%bb%a3%e7%a0%81%e7%9a%84%e6%96%b9%e6%b3%95/feed/ 1 JS 的nextSibling属性(The built-in Javascript property nextSibling) http://www.yooyo.me/blog/js-%e7%9a%84nextsibling%e5%b1%9e%e6%80%a7the-built-in-javascript-property-nextsibling/ http://www.yooyo.me/blog/js-%e7%9a%84nextsibling%e5%b1%9e%e6%80%a7the-built-in-javascript-property-nextsibling/#comments Wed, 28 Apr 2010 09:49:41 +0000 admin http://www.yooyo.me/blog/?p=126 今天做项目的时候遇到一个变态的问题，CKEditor 嵌入ROR 的时候出现了 一个回车产生2个br 标签的问题(2个回车产生4个br……)，使段落之前的间距变大一倍。
CKeditor本身应该没有问题，为解决此问题，想了一个笨方法： 用JS的nextSibling 属性来查找是否有相邻的2个或者以上的br，有的话直接remove。 (用的是jQuery)。
初始代码：

var brs = $('.format_markdown_text br').size();
var fbr = $('.format_markdown_text br');
for(i=brs-1;i&gt;=0;i--){
if(fbr[i].nextSibling.nodeName == "BR"){
$(fbr[i]).remove();
}
}

发现只取到部分的br，查资料发现，firefox、opera、safari会把诸如空格换行之类的排版元素视作节点读取，所以在这些浏览器下只读取了部分br。

改进的代码：

var brs = $('.format_markdown_text br').size();
var fbr = $('.format_markdown_text br');
for(i=brs-1;i&gt;=0;i--){
if(fbr[i].nextSibling.nodeName == "BR" || ($(fbr[i].nextSibling).val().match(/^[\s\r\n]*$/) &amp;&amp; fbr[i].nextSibling.nextSibling &amp;&amp; fbr[i].nextSibling.nextSibling.nodeName == 'BR')){
$(fbr[i]).remove();
}
}

这样就圆满解决了 空格（或者多个）、回车等产生的问题。

]]> http://www.yooyo.me/blog/js-%e7%9a%84nextsibling%e5%b1%9e%e6%80%a7the-built-in-javascript-property-nextsibling/feed/ 0 CSS inline-block 属性 http://www.yooyo.me/blog/css-inline-block-%e5%b1%9e%e6%80%a7/ http://www.yooyo.me/blog/css-inline-block-%e5%b1%9e%e6%80%a7/#comments Tue, 27 Apr 2010 09:34:12 +0000 admin http://www.yooyo.me/blog/?p=122 如果你有CSS编程经验的话，那么你对 inline-block 这个CSS属性应该不会陌生，inline-block 是 displaly 属性的一个值，但是这个属性IE6还不支持。在IE6下,对制定了float的元素增加margin 或者padding 属性的时候（margin或者padding的方向跟float一样，比如元素同时拥有float:left和margin-left 属性），会使margin或者padding的距离加倍（双边距bug）。当然你可以使用ie hack 来解决这个问题，在ie6下设置有原始值的一半。如果你用inline-block来代替float的话，就能很好的解决这个问题（大多数情况下）

使用inline-block 来代替float 的解决方案或或许是最有效的方法来实现内联块的价值。

inline-block的定义：

一下是来自一些网站关于inline-block的定义

Sitepoint’s

inline-block makes the element generate a block box that’s laid out as if it were an inline box.

QuirksMode:

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

Robert Nyman:

Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.

可以理解为：将对象作为内联来显示，但是里面的内容作为块对象来呈现。（周围元素与其保持同一行，但可以设置宽度跟高度的属性）

什么情况下使用：

  • 解决ie6双边距bug
  • 在横向类块元素上没有float属性
  • 使内联元素能设置宽度跟高度，但是同时保持内联显示
  • 使内联元素能设置margin和padding 属性

目前 ie6,ie7 不支持 inline-block。但是可以通过触发haslayout来实现inline-block.

实现方法：

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

更多的关于这个实现方法可以参考这里

]]> http://www.yooyo.me/blog/css-inline-block-%e5%b1%9e%e6%80%a7/feed/ 0 让IE也支持CSS3 http://www.yooyo.me/blog/%e8%ae%a9ie%e4%b9%9f%e6%94%af%e6%8c%81css3/ http://www.yooyo.me/blog/%e8%ae%a9ie%e4%b9%9f%e6%94%af%e6%8c%81css3/#comments Fri, 23 Apr 2010 03:13:12 +0000 admin http://www.yooyo.me/blog/%e8%ae%a9ie%e4%b9%9f%e6%94%af%e6%8c%81css3/ IE目前还不支持CSS3的一些属性，通过这个脚本可以实现部分CSS3属性，

脚本下载地址 http://www.keithclark.co.uk/labs/ie-css3/#supported-libaries

]]> http://www.yooyo.me/blog/%e8%ae%a9ie%e4%b9%9f%e6%94%af%e6%8c%81css3/feed/ 0