保存VML和CSS標記

我正在使用DD_roundies在Internet Explorer中生成圓角。具有圓形元素的頁面會經常加載，並且roundies腳本必須多次運行才能繞過角落並修復png。這花費了很多時間。該腳本生成一些放置在目標元素中的VML元素，以及一些注入到塊中的CSS。保存VML和CSS標記

我想保存VML和CSS以便在頁面加載時重用，這樣我就不必每次都運行腳本。目標元素已被保存在數據庫中，並在加載時通過java重新插入到DOM中。

我做了一個測試頁，在roundies腳本運行後，我獲取了包括VML，XML名稱空間和CSS在內的元素的html。我在IE中遇到了一些麻煩，但是我可以使用IE開發工具來獲得它，所以我可以測試它。在獲得各個部分之後，我將它們放在一個單獨的HTML文件中，以查看它們是否可以正確呈現。我的測試不起作用。

這是第一個測試頁面：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script type="text/javascript"> 
$(function(){ 
    DD_roundies.addRule('#block_1', '20px 20px 0 0', true); 
    DD_roundies.addRule('#block_2', '0 20px 20px 0', true); 
    DD_roundies.addRule('#block_3', '0 0 20px 20px', true); 
    DD_roundies.addRule('#block_4', '20px 0 0 20px', true); 
    $('#getContent').click(function(){ 
     var allHTML = $('#allContent').html(); 
     $('#captureContent').text(allHTML).val(allHTML); 
    }); 
    $('#getStyles').click(function(){ 
     var allStyles = $('#allStyles').html(); 
     $('#captureStyles').text(allStyles).val(allStyles); 
    }); 
}); 
</script> 
<div id="allContent"> 
<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script> 
<style id="allStyles" type="text/css"> 
    .blocks{ 
     width: 150px; 
     height: 100px; 
     margin: 5px; 
     border: 3px solid #999; 
    } 
</style> 
<div id="block_1" class="blocks"></div> 
<div id="block_2" class="blocks"></div> 
<div id="block_3" class="blocks"></div> 
<div id="block_4" class="blocks"></div> 
</div> 
<button id="getStyles">Get Styles</button> 
<textarea id="captureStyles"></textarea> 
<br /> 
<button id="getContent">Get Content</button> 
<textarea id="captureContent"></textarea>

任何幫助將不勝感激，謝謝！

來源

2010-08-10 UpHelix

你有一個活生生的例子嗎？ – Kyle 2010-09-28 08:16:15

第一個問題是您將獲得不同的CSS，具體取決於您使用的瀏覽器（這可能對您很明顯！）。 CSS3圓角標準尚未穩定，所需的CSS在Firefox，基於Webkit的瀏覽器（Safari，Chrome）和Opera上會有所不同。因此，您需要使用不同的開發人員工具來獲取CSS/VML。

在Firefox使用螢火蟲，你可以AQUIRE此：

#block_1 { 
    -moz-border-radius:20px 20px 0 0; 
}

使用Chrome的開發者工具，你可以取得這樣的：如果我簡化你的榜樣，以使其僅

#block_1 { 
    border-bottom-left-radius: 0px 0px; 
    border-bottom-right-radius: 0px 0px; 
    border-top-left-radius: 20px 20px; 
    border-top-right-radius: 20px 20px; 
}

：

<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script> 
<style id="allStyles" type="text/css"> 
    .blocks{ 
     width: 150px; 
     height: 100px; 
     margin: 5px; 
     border: 3px solid #999; 
    } 
</style> 
<div id="block_1" class="blocks"></div> 
<script type="text/javascript"> 
DD_roundies.addRule('#block_1', '20px 20px 0 0', true); 
</script>

然後IE8開發工具給我：

<HTML XMLNS:DD_roundies = "urn:schemas-microsoft-com:vml"><HEAD> 
<STYLE>DD_roundies\:* { 
    BEHAVIOR: url(#default#VML) 
} 
#block_1 { 
    ; BEHAVIOR: expression(DD_roundies.roundify.call(this, [20,20,0,0])) 
} 
</STYLE> 

<STYLE id=allStyles type=text/css>.blocks { 
    BORDER-BOTTOM: #999 3px solid; BORDER-LEFT: #999 3px solid; MARGIN: 5px; WIDTH: 150px; HEIGHT: 100px; BORDER-TOP: #999 3px solid; BORDER-RIGHT: #999 3px solid 
} 
</STYLE> 
</HEAD> 
<BODY style="POSITION: relative; ZOOM: 100%"> 
<ignore style="Z-INDEX: 0; WIDTH: 150px; HEIGHT: 100px; TOP: 15px; LEFT: 15px"> 
<DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "300,200" coordorigin = "1,1" filled = "f" fillcolor = "black" stroked = "f" path = " m6,40 l6,194 qy6,194 l294,194 qx294,194 l294,40 qy260,6 l40,6 qx6,40 e"><DD_roundies:fill></DD_roundies:fill></DD_roundies:shape><DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "150,100" coordorigin = "1,1" filled = "f" fillcolor = "none" stroked = "f" path = " m3,20 qy20,3 l131,3 qx148,20 l148,98 qy148,98 l3,98 qx3,98 l3,20 e"><DD_roundies:fill type = "tile"></DD_roundies:fill></DD_roundies:shape><DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "300,200" coordorigin = "1,1" fillcolor = "#999" stroked = "f" path = " m0,40 qy40,0 l260,0 qx300,40 l300,200 qy300,200 l0,200 qx0,200 l0,40 m6,40 l6,194 qy6,194 l294,194 qx294,194 l294,40 qy260,6 l40,6 qx6,40 e"><DD_roundies:fill></DD_roundies:fill></DD_roundies:shape></ignore> 
<DIV style="POSITION: relative; ZOOM: 1; BEHAVIOR: none" id=block_1 class=blocks isImg="false"></DIV> 
</BODY> 
</HTML>

現在的工作是將所有各種CSS/VML開發工具轉儲重新組合成單個HTML文件，希望不再需要DD_roundies！或者，你可以信任DD_roundies來完成它的工作。就個人而言，當簡單的人能更好地完成這項工作時，我總是處於嘗試更具挑戰性任務的危險之中！

來源

2010-10-01 08:25:42

http://jquery.malsup.com/corner/也不錯！ – 2010-10-01 08:28:21

保存VML和CSS標記

回答

相關問題