下載安裝完之後
點選 commands ==> install bundle
找到jQuery 確定
這樣就完成了adsense
|
|
|
2012-06-13
2012-06-11
Problems during content assist
problems during content assist
the 'org eclipse wst.jsdt ui java no type completionproposalcomputer' proposal computer from
the 'org eclipse wstjsdt. ui' plug-in did not complete normally.the extension has thrown a runtime exception
to avoid this message disable the 'org.eclipse wst jsdt ui plug in or disable the other javascript
proposals category on the content assist preference page
怎麼修復這個錯誤?
how to fix it
當我們點下連結
when we click the link
會出現這個畫面
will show this picture
接下來，請將other java script proposals 勾勾拿掉
now，please canceled other java script proposals
2012-06-07
jquery 第二章練習
一開始
點擊圖片後
按下確定後
來看程式碼
jump for joy.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test2.css" rel="stylesheet">
<title>jump for joy</title>
</head>
<body>
<div id="header">
<h2>Jump for Sale</h2>
</div>
<div id="main">
<div class="guess_box"><img src="images/jump1.jpg"/></div>
<div class="guess_box"><img src="images/jump2.jpg"/></div>
<div class="guess_box"><img src="images/jump3.jpg"/></div>
<div class="guess_box"><img src="images/jump4.jpg"/></div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$(".guess_box").click(function(){
$(".guess_box p").remove();
var discount=Math.floor((Math.random()*5)+5);
var discount_msg="<p> Your Discount is " + discount + "%</p>";
alert(discount_msg);
$(this).append(discount_msg);
}); //end click
}); //end ready
</script>
</body>
</html>
test2.css
div{
float:left;
height:254px;
text-align:left;
border:solid#000 3px;
}
#header{
width:100%;
border:0px;
height:50px;
}
#main{
background-color:gray;
height:500px;
}
.guess_box{
height 254px;
}
完成範例
2012-06-06
2012-06-04
jquery 滑動圖片
點擊 文字之前
點擊後 載入圖片
my_style.css
#clickMe{
background: #d8b36b;
padding: 20px;
text-align: center;
width: 205px;
display: block;
border: 2px solid #000;
}
#picframe{
background: #d8b36f;
padding: 20px;
width: 205px;
display: none; //隱藏圖片
border: 2px solid #000;
}
test1.html
<html>
<head>
<title>test1</title>
<link rel="stylesheet" type="text/css" href="my_style.css">
</head>
<body>
<div id="clickMe">show me the picture</div>
<div id="picframe">
<img src="1669071126.jpg" />
</div>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#clickMe").click(function(){
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
</body>
</html>
完成範例
2012-05-29
jquery 練習
前置作業 請到
滑鼠指到 minified 右鍵另存新檔
檔名: jqueryfirst.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
a.test { font-weight:bold; font-size:5em; } <!--當執行a時放大五倍-->
</style>
</head>
<body>
<a href="http://ffej1022.blogspot.com/">三明治筆記本</a>
</body>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquerytest.js"></script>
</html>
新開一個筆記本
檔名: jquerytest.js
$(document).ready(function(){
$("a").click(function(event){
alert("hello word");
$("a").addClass("test"); //當執行a時放大五倍
$(this).hide("slow"); //慢慢的隱藏
event.preventDefault(); //停止超連結預設的動作，也就是不要前往另一個網頁
});
訂閱：
文章 (Atom)