当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

Jquery 文章关键字添加代码

发表于: 2014-01-04   作者:alleni123   来源:转载   浏览次数:
摘要: 放这里以后做参考。 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.get
放这里以后做参考。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<!-- 视频62_文章管理_11 文章添加的关键字的简易实现 -->
<head>
<base href="<%=basePath%>">
<script type="text/javascript"
	src="<%=path%>/resources/js/jquery-1.9.0.js"></script>

<title>My JSP 'add.jsp' starting page</title>

<style type="text/css">
#keyword-container {
	border: 1px solid #bbb;
	width: 700px;
}

#keyword-input {
	border: none;
	width: 300px;
	color: #aaa;
	height: 28px;
}

div .keyword-in {
	float: left;
	font-size: 12px;
	margin: 0 3px;
	background: #3fa7cb;
	padding: 3px;
	color: #fff;
}

a.keyword-shut:link,a.keyword-shut:visited {
	color: #fff;
	text-decoration: none;
}

a.keyword-shut:hover {
	color: #ff0;
}
</style>

<script type="text/javascript">
	$(function() {
		
		var num=5;
		
		
		$("#keyword-input").focus(function() {
			$(this).val("");
		});

		$("#keyword-input").blur(function() {
			console.log($(this).val().length);
			if ($(this).val().length == 0) {
				$(this).val("请输入关键字,通过逗号或者回车确认");
			}
		});

		$("#keyword-input").keyup(function(event) {
			var code = event.keyCode;
			var add=true;
			if (code == 188 || code == 13) {
				//c是要添加的关键字
				var c = $(this).val();

				if (c != "") {
					if ($(".keyword-in").length >= num) {
						alert("最多只能添加" + num + "个关键字");
						event.preventDefault();
						return;
					}
					
					 var addedkeys=$("input[name='added_keywords']");
					 console.log(addedkeys);
				/*	$("input[name='added_keywords']").each(function(){
						console.log($(this).val());
						if($(this).val()==c){
							alert("关键字已经存在");
							event.preventDefault();
							
						}else{
							add=true;
						}
					});*/
					var aks=$("input[name='added_keywords']");
					for(var i=0;i<aks.length;i++){
						console.log(aks[i]);
						if(aks[i].value==c){
							alert("关键字已经存在");
							add=false;
							return false;
						}
					}
					 
					 
					 
					if(add){
					var ki = createKeyword(c);
					$("#keywords-wrap").append(ki);
					$(this).val("");}
				}
			}
		});

		//36分钟
		$("#keywords-wrap").on("click", "a.keyword-shut", function() {
			$(this).parent(".keyword-in").remove();
			event.preventDefault();
		});

		$(".keyword-shut").click(function() {

		});

	});

	//创建关键字
	function createKeyword(val) {
		return "<div class='keyword-in'><span>"
				+ val
				+ "</span><a href='add.jsp#' class='keyword-shut'>&nbsp;X</a>"
				+"<input type='hidden' name='added_keywords' value='"+val+"'/></div>";
	}
</script>

</head>

<body>
	<div id="keyword-container">

		<div id="keywords-wrap">
			<div class="keyword-in">
				<span>我的电脑</span> <a href="add.jsp#" class="keyword-shut">X</a>
				<input type='hidden' name='added_keywords' value='我的电脑'/>
			</div>

			<div class="keyword-in">
				<span>我的电脑</span> <a href="add.jsp#" class="keyword-shut">X</a>
				<input type='hidden' name='added_keywords' value='我的电脑'/>
			</div>

		</div>

		<input type="text" id="keyword-input" value="请输入关键字,通过逗号或者回车确认"/>
	</div>
</body>
</html>

Jquery 文章关键字添加代码

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
不知道为什么,WordPress博客居然没有添加关键字keywords和描述description的设置...因为我之前也有
不知道为什么,WordPress博客居然没有添加关键字keywords和描述description的设置...因为我之前也有
不知道为什么,WordPress博客居然没有添加关键字keywords和描述description的设置...因为我之前也有
不知道为什么,WordPress博客居然没有添加关键字keywords和描述description的设置...因为我之前也有
不知道为什么,WordPress博客居然没有添加关键字keywords和描述description的设置...因为我之前也有
这些天将原来在网上找的jQuery插件进行了下整理,特此将代码分享出来给大家。 见下图结构。 对目录
作者:zccst 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 : ht
1、修改article.php,查询数据 //相关文章 $sql_where = " where is_open=1 and article_id != '" .
1、在Eclipse中配置jQuery 在jsp或html页面编写时,无法出现提示信息,比如 打$ 就会出现提示信息;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head&g
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号