如同標題,很遺憾的 HTML5 內建 CheckBox 是無法在 Chrome 用CSS變更大小的
在其他瀏覽器呢?可以透過以下簡易的方法:
-ms-transform: scale(1.3); /* IE */
-moz-transform: scale(1.3); /* FF */
-webkit-transform: scale(1.3); /* Safari and Chrome */
-o-transform: scale(1.3); /* Opera */
雖然上頭註解寫著Chrome ,但可惜他就是不支援
複雜一點的方法,就是自己用img元素,自己架構一個CheckBox
或者用第三方元件,JQuery UI之類的。
我喜歡設計,我喜歡創造,我喜歡美 不論軟體設計,不論介面設計,不論產品規劃設計,我都很有興趣 一直希望能能用這份專長,好好發揮在職場上。讓我做的快樂。 不論寫程式,或是做美工,我都很喜歡,希望我可以有機會雙線。兩種都很擅長。
2013年9月29日 星期日
2013年9月26日 星期四
jquery-1.10.2.min.map not found
最近更新了JQuery的使用版本,從1.7改用到1.9、1.10
發現了一些影響不大的DEBUG的訊息
比方:「 jquery-1.10.2.min.map not found 」
上網查詢了一下
這是因為我有漏(或是亂刪)該存在的檔案
而這個.map的檔案,是用來讓DEBUG的時候可以看懂JQuery的程式碼,因為通常jquery-1.10.2.min.js這種.min.js的JQuery的JS檔是經過壓縮的,而.map檔案就是紀錄著被壓縮的TAG的位置,這可以讓Chrome瀏覽器可以使用這個檔案,把被壓成了沒有籪行的、無法識別的亂碼在DEBUG模式之下還能看到程式的原有格式。
發現了一些影響不大的DEBUG的訊息
比方:「 jquery-1.10.2.min.map not found 」
上網查詢了一下
這是因為我有漏(或是亂刪)該存在的檔案
而這個.map的檔案,是用來讓DEBUG的時候可以看懂JQuery的程式碼,因為通常jquery-1.10.2.min.js這種.min.js的JQuery的JS檔是經過壓縮的,而.map檔案就是紀錄著被壓縮的TAG的位置,這可以讓Chrome瀏覽器可以使用這個檔案,把被壓成了沒有籪行的、無法識別的亂碼在DEBUG模式之下還能看到程式的原有格式。
$.browser這個物件在JQuery 1.9版過後就被拿掉了
$.browser這個物件在JQuery 1.9版過後就被拿掉了,變成以其他的Plug-in的方式存在,有人提到,這可能是一種建議,希望避免開發者去偵測判斷瀏覽器。
如果引用了JQuery 1.9版之後的版本,在瀏覽器(特別指Chrome)執行並偵錯時,會看到以下錯誤的。
$.browser.msie cannot read property 'msie' of undefined
如果引用了JQuery 1.9版之後的版本,在瀏覽器(特別指Chrome)執行並偵錯時,會看到以下錯誤的。
$.browser.msie cannot read property 'msie' of undefined
2013年9月18日 星期三
$(function() 是甚麼意思?
之前一直看不懂$(function() ,所以很多JQuery UI也都沒有在用,現在終於瞭解了,$(function() 等同於$(document).ready()
$(function()
{
$( "#datepicker" ).datepicker();
});
等同於
$(document).ready(function()
{
$( "#datepicker" ).datepicker();
});
也就是網頁好了之後,立刻執行的Function。
{
$( "#datepicker" ).datepicker();
});
也就是網頁好了之後,立刻執行的Function。
2013年9月6日 星期五
設計範本:網頁篇
http://v2.2a-archive.com/flashindex.htm2Advance V2(Flash的極致表現)
http://v3.2a-archive.com/flashindex.htm2Advance V3(Flash的極致表現)
http://v4.2a-archive.com/flashindex.htm2Advance V4(Flash的極致表現)
http://v5.2a-archive.com/2Advance V5(Flash的極致表現)
http://v3.2a-archive.com/flashindex.htm2Advance V3(Flash的極致表現)
http://v4.2a-archive.com/flashindex.htm2Advance V4(Flash的極致表現)
http://v5.2a-archive.com/2Advance V5(Flash的極致表現)
2013年8月26日 星期一
如何讓一個DIV包含另外一個DIV ------ 如何控制網頁元素(Tag element)讓元素從原本的位置(指的是親子位置)變更到其他位置
我在設計網頁的時候,經常會需要用一個Design的DIV來試著排版,但這內容可能在一開始得隱藏,並且之後是在按下按鈕之後才出現在PAGE的主要DIV當中,所以得用JS來動態的在按鈕事件中將物件元素搬移或加入到另外一個DIV中。
原本以為會用到的是 JQuery 的 add(),但是跟想像的有所差異
add()是用來把指定的元素加入自己所在的集合,然後一起去做什麼事情。比方說
這個例子,他是把所有的DIV加上邊框,之後包含著<P>元素來做把背景變成黃色。然而,<P>元素本身並不會變更其親子關係,也就是<P>元素如果在其他DIV中,這個關係不會變。
應該要用 JQuery 的 append(), prepend(), after(), before()來做,才是真正的把元素加到某個元素中。差異說明(請先下載範例):
畫面被分割成上、中、下:Div_Header、Div_Content、Div_Footer三個區塊,每個區塊各自放了一些方塊,而「我會被搬走」這個方塊則是在按下上方的按鈕之後,會被移動,可從上方的藍色框線看出Div_Header的範圍,進而判斷出是否DivAdd01在Div_Header之中。
1.比方我要把DivAdd01這個ID的DIV放到Div_Header中,則該使用append(),跟prepend(),兩個函式,會把DivAdd01加到Div_Header中,並決定放置在最後或最前面的位置。
2.另外,after(), before()則是會把DivAdd01加到Div_Header的父親層,讓DivAdd01跟Div_Header處於同一層,然後差異也在於放在之前或之後。
3.按下add按鈕,則會把left連同Top_left,具有這兩個class的元素都會被設定為被景色白色。
原本以為會用到的是 JQuery 的 add(),但是跟想像的有所差異
add()是用來把指定的元素加入自己所在的集合,然後一起去做什麼事情。比方說
這個例子,他是把所有的DIV加上邊框,之後包含著<P>元素來做把背景變成黃色。然而,<P>元素本身並不會變更其親子關係,也就是<P>元素如果在其他DIV中,這個關係不會變。
應該要用 JQuery 的 append(), prepend(), after(), before()來做,才是真正的把元素加到某個元素中。差異說明(請先下載範例):
畫面被分割成上、中、下:Div_Header、Div_Content、Div_Footer三個區塊,每個區塊各自放了一些方塊,而「我會被搬走」這個方塊則是在按下上方的按鈕之後,會被移動,可從上方的藍色框線看出Div_Header的範圍,進而判斷出是否DivAdd01在Div_Header之中。
1.比方我要把DivAdd01這個ID的DIV放到Div_Header中,則該使用append(),跟prepend(),兩個函式,會把DivAdd01加到Div_Header中,並決定放置在最後或最前面的位置。
2.另外,after(), before()則是會把DivAdd01加到Div_Header的父親層,讓DivAdd01跟Div_Header處於同一層,然後差異也在於放在之前或之後。
3.按下add按鈕,則會把left連同Top_left,具有這兩個class的元素都會被設定為被景色白色。
2013年8月9日 星期五
顏色的基礎知識
顏色的基礎知識
常用Photoshop的人應該都對於一些色彩相關用詞不陌生才是,顏色有三個屬性
色相:色彩的外相,比方紅、藍、黃、綠這樣的表現方式。
明度:就是顏色的亮度。
彩度:顏色的鮮豔度,彩度越高越鮮豔。
而色調,就是以明度跟彩度的組合來表示,通常只要掌握度色調的統一,即便用了多色相,也不至於讓顏色混亂不協調。只不過,高彩度的色調使用上要特別謹慎,顏色太重且太多的話,容易失焦。
就像黑白對比強烈一般,利用互補色,經常可以達到很好的視覺效果,而互補色在色表上以16進位來呈現時,恰巧可以發現實用的特性:比方 #00ffff 跟 #ff0000就是視覺對比強烈的互補色,#0080ff跟 #ff8f00也是一對互補色。
在配色上,通常除非是天才,不然,通常會遵照一些範本或規範。通常有主要的基準色(目的鮮明,比方跟水有關的網站,可能會用藍色當基準),以及一些輔助色。
訂閱:
文章 (Atom)