<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:v = "urn:schemas-microsoft-com:vml">
<head>
<link rel="stylesheet" type="text/css" href="../../jquery.toolkit.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.js" type="text/javascript"></script>
<script src="../../jquery.toolkit.storage.js" type="text/javascript"></script>
<script src="jquery.tk.xcss.js" type="text/javascript"></script>
<style>
body{ font-size:12px;}
#test-container{ width: 550px; background:#333; float:left;}
div{ padding:1em;margin:0.5em;}
.bg{ background:#ffd640; border:solid #FF9600 10px;}
.bg2{ background:#ffffff url(tram.gif); border:solid #FF9600 2px;}
.w{ width:150px;}
</style>
</head>
<body>
<h1>Demonstrating xcss plugin</h1>
<div class="tk-inlineStack" id="test-container">
<div class="tk-xcss-bradius15 bg" >Testing border radius</div>
<div class="tk-xcss-bradius20 bg" >Testing border radius<br />sddsff</div>
<div class="tk-xcss-opacity65 bg w" >Testing opacity</div>
<div class="tk-xcss-bradius15 bg w" style="height:150px;border-width:2px">Testing border radius<br />sddsff</div>
<div class="bg w" style="border:solid red 1px;">Testing opacity</div>
<div class="tk-xcss-borderRadius5 bg2" >Testing border radius</div>
</div>
<script>
jQuery(function(){
var c = $('#test-container').clone().appendTo('body');
c.find('div').addClass('clone').xcss();
/*$('#test2').get(0).outerHTML = '<div class="" style="background: transparent; border: none; padding: 0; margin: 0; width: 250px; height: 250px;">\
<v:roundrect arcsize="0.05" strokecolor="#ff0000" strokeweight="#00FF00" style="behavior: url(#default#VML);display: inline-block; width: 99%; height: 99%; antialias: true; padding: 0px;">\
<v:fill color="#0000FF" src="" type="tile" style="behavior: url(#default#VML);" /> this.outerHTML </v:roundrect></div>\
';*/
});
</script>
</body>
</html>
|
Download
