【发布时间】：2013-02-28 12:53:15
【问题描述】：
我正在尝试将我的两个脚本基本上合并在一起，但遇到了麻烦。
我想要的是让用户开始搜索 youtube 视频，并在输入框下方弹出搜索建议。然后用户点击其中一个建议，视频就会发布到页面上。
问题是我有一个脚本执行第一部分，另一个脚本执行第二部分。我正在尝试将脚本合并为一个工作，无论我多么努力，我似乎都无法做到。请帮忙！！
这是两个文件（按顺序）：
索引.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Youtube Instant Search Jquery Plugin - by Karthikeyan K</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#y_search").keyup(function() {
var s_text = $.trim($("#y_search").val());
$('#video_loader').YoutubeVideo({
feedurl:'http://gdata.youtube.com/feeds/api/videos?q='+s_text+'&v=2&format=5&alt=jsonc', // your rss feed url here...
count:'5', // total no of videos
height:'0', //video height
width:'0', //video width
loadingtext:'fetching videos from youtube' //loading text...
});
});
});
(function( $ ) {
$.fn.YoutubeVideo = function (pars) {
var feeddiv = $(this);
var pubdt;
$(this).html("<center>"+pars.loadingtext+"</center>");
$.ajax({type:"GET",url:pars.feedurl+"&max-results="+pars.count,dataType:"jsonp",success:function(yt_data){
feeddiv.html('');
$.each(yt_data.data.items,function(i,entry){
var video_id=entry.id;
var video_frame="<iframe width='"+pars.width+"' height='"+pars.height+"' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
pubdt=new Date(entry.updated);
feeddiv.append('<div class="frame">');
feeddiv.append('<div class="ItemTitle">'+entry.title+' - <span class="ItemDate">'+pubdt.toLocaleDateString()+'</span></div>');
feeddiv.append('<div class="video">'+video_frame+'</div>');
feeddiv.append('</div>');
}) }
});
}})( jQuery );// JavaScript Document
function watermark(inputId,text){
var inputBox = document.getElementById(inputId);
if (inputBox.value.length > 0){
if (inputBox.value == text)
inputBox.value = '';
}
else
inputBox.value = text;
}
</script>
<style>
body { background:#336699; height:800px; }
div.frame { margin-bottom:20px; padding-bottom:10px; }
.video { padding:2px; text-align:center;}
span.ItemDate { font-size:11px; color:#ccc; }
.ItemTitle { font-size:18px; font-weight:bold; margin-bottom:4px; border-bottom:1px solid #ccc; }
#y_search { width:98%; height:40px; padding:1px; font-size:18px; }
</style>
</head>
<body>
<div style="margin:0 auto; width:700px; background:#fafafa; min-height:500px; padding:10px; border:2px solid #f1f1f1;">
<h3>Youtube Search</h3>
<center><input type="text" id="y_search" value="type here" onfocus="watermark('y_search','type here');" onblur="watermark('y_search','type here');" />
</center>
<div id="video_loader"> </div>
</div>
</body>
</html>
布局.html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Demo by BinaryMuse</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
body {
padding: 10px;
font-family: Arial, sans-serif;
font-size: 10pt;
}
.container {
background-color: #F7F7F7;
border: 1px solid rgba(0, 0, 0, .05);
padding: 3px;
}
.preview {
position: relative;
cursor: pointer;
float: left;
padding-right: 5px;
}
.play {
position: absolute;
left: 10px;
bottom: 10px;
}
.info-small {
text-size: 8pt;
color: gray;
}
a {
color: #3B5998;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var youtube_video_id = "Cgovv8jWETM";
var video_url = "http://youtube.com/watch?v=" + youtube_video_id;
var thumbnail_url = "http://img.youtube.com/vi/" + youtube_video_id + "/1.jpg";
var iframe_url = "http://www.youtube.com/embed/" + youtube_video_id + "?autoplay=1";
var api_url = "https://gdata.youtube.com/feeds/api/videos/" + youtube_video_id + "?v=2&alt=json-in-script&callback=?";
$(function() {
// Get video information and set the title.
$.getJSON(api_url, function(data) {
$(".info").html("<b><a href='" + video_url + "' target='_blank'>" + data.entry.title.$t + "</a></b>");
});
// Set the thumbnail image for the video.
$(".preview img.thumb").attr("src", thumbnail_url);
// Switch to the iframe when the image is clicked.
$(".preview").click(function() {
$(this).html("<iframe width='400' height='250' src='" + iframe_url + "' frameborder='0' allowfullscreen></iframe>");
$(this).css("float", "none");
});
});
});//]]>
</script>
</head>
<body>
<div class="container">
<div class="preview">
<img class="thumb">
<img class="play" src="https://s-static.ak.fbcdn.net/rsrc.php/v2/yG/r/Gj2ad6O09TZ.png">
</div>
<div class="info">
</div>
<div class="info-small">
www.youtube.com
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
再次感谢！！
【问题讨论】：
-
在此处发布相关代码和标记，人们将能够更好地帮助您。
-
我想发布 100 行代码而不在每行前面放置 4 个空格？
-
您的代码根本没有缩进？
-
刚刚修好了。是的，我是个菜鸟，谢谢你为我指明了正确的方向