美化checkbox 等html控件的效果
雖然技術不是很難，單現在網上采用這種技術的，還是很少，也就是在國外的一些個站點看到過這些技術，所以自己就寫下實現效果。。（第一次發首頁，高手請勿見怪，但絕對原創）
你是否對web.UI默認設計感到很煩惱，很多好的設計，由于不能很好的支持導致了網頁的整體美觀？
哪么好吧。。讓我們來重寫web組建，讓他們按照我們的顯示效果來出現吧。。
技術需求：設計能力（可以去找美工），javascript基本概念，html熟悉
下面我就以html->form->checkbox為例，來為大家改寫下。。
這個就是我們常用的checkbox了，對于它的樣式，默認的css并不能很好的解決我們的問題，那么我們只有一個方法來完成我們想法了，那是什么呢？很簡單，K掉他。。呵呵。。但可不是刪除啊。。因為我們還要用他來提交表單等等。。所以只要style="display:none;" 就可以了。。對于他來說我們只需要他的 checked 屬性。
現在你可以找你的美工做個你想要的圖片了。。要兩個哦。一個未選中和一個選中的哦。。（水分太弄了好像）
這里我們用div來弄個表現的層來替代剛才checkbox。。
<div style="width:22px; height:22px;background-image:url(checkOff.JPG);" onclick="myCheckbox('cc',this);"> </div>
我做的圖片寬度是22*22 默認的時候給了張checkOff圖片，這里我們用div.onclick事件來模擬checkbox的onclick
事件。。寫了個小函數<script language="javascript">
function myCheckbox(obj,thisobj)
{
var o = document.getElementById(obj);
if(o.checked)
{
thisobj.style.backgroundImage="url(checkOff.JPG)";
o.checked = false;
}
else
{
thisobj.style.backgroundImage="url(checkOn.JPG)";
o.checked = true;
}
}
</script>
意思就是，點擊的時候，顯示我們的圖片，并自動改寫checkbox控件屬性，達到實用目的。表單提交的時候，獲得cc就可以了。。
下面給出小demo，大家下載下來看看就可以了。。根據這個思路，可以自己做些動畫效果或什么的都可以，下來菜單用jQuery當然是更XX了。。呵呵。。
demo下載：http://www.cnblogs.com/Files/pengpengsay/myCheck.rar
你是否對web.UI默認設計感到很煩惱，很多好的設計，由于不能很好的支持導致了網頁的整體美觀？
哪么好吧。。讓我們來重寫web組建，讓他們按照我們的顯示效果來出現吧。。
技術需求：設計能力（可以去找美工），javascript基本概念，html熟悉
下面我就以html->form->checkbox為例，來為大家改寫下。。
<input type="checkbox" name="cc" id="cc" value="checkbox" />
這個就是我們常用的checkbox了，對于它的樣式，默認的css并不能很好的解決我們的問題，那么我們只有一個方法來完成我們想法了，那是什么呢？很簡單，K掉他。。呵呵。。但可不是刪除啊。。因為我們還要用他來提交表單等等。。所以只要style="display:none;" 就可以了。。對于他來說我們只需要他的 checked 屬性。
現在你可以找你的美工做個你想要的圖片了。。要兩個哦。一個未選中和一個選中的哦。。（水分太弄了好像）
這里我們用div來弄個表現的層來替代剛才checkbox。。
<div style="width:22px; height:22px;background-image:url(checkOff.JPG);" onclick="myCheckbox('cc',this);"> </div>事件。。寫了個小函數
<script language="javascript">function myCheckbox(obj,thisobj){
var o = document.getElementById(obj); if(o.checked) {
thisobj.style.backgroundImage="url(checkOff.JPG)"; o.checked = false; } else { thisobj.style.backgroundImage="url(checkOn.JPG)"; o.checked = true; }}</script>意思就是，點擊的時候，顯示我們的圖片，并自動改寫checkbox控件屬性，達到實用目的。表單提交的時候，獲得cc就可以了。。
下面給出小demo，大家下載下來看看就可以了。。根據這個思路，可以自己做些動畫效果或什么的都可以，下來菜單用jQuery當然是更XX了。。呵呵。。
demo下載：http://www.cnblogs.com/Files/pengpengsay/myCheck.rar
全站熱搜
留言列表
