`

javascript modle模式的多种方式应用

    博客分类:
  • js
阅读更多
// jquery-eq.js
一、
var YAHOO = (function($, my){
   	my.privateAddTopic = function (data) {
       	$('ul > li').live('mousedown', function() {
			console.log($(this).html() + " down");
		})
		$('ul > li').live('mouseup', function() {
			console.log($(this).html() + " up");
		});
		alert(data);
   	};
   	my.Name = function (privateName) {
   		return privateName;
   	};
   	my.privateV = 'private';
   	return my;
})(jQuery, YAHOO || {});

二、
var YAHOO = (function($, YAHOO){
	return {
    	privateAddTopic: function (data) {
	       	$('ul > li').live('mousedown', function() {
				console.log($(this).html() + " down");
			})
			$('ul > li').live('mouseup', function() {
				console.log($(this).html() + " up");
			});
			alert(data);
    	},
    	Name: function (privateName) {
    		return privateName;
    	},
    	privateV: 'private'
   }
})(jQuery, YAHOO);

三、
var YAHOO = (function($, YAHOO){
	var my = {}, privateName = "博客园";

    function privateAddTopic(data) {
       	$('ul > li').live('mousedown', function() {
			console.log($(this).html() + " down");
		})
		$('ul > li').live('mouseup', function() {
			console.log($(this).html() + " up");
		});
		
		$('ul > li').live('click', function() {
			var ts = $(this);
			var index = ts.index();
			var html = ts.html();
			if (0 == index) {
				ts.addClass('ts')
			} else if (1 == index) {
				ts.addClass('ts')
			} else if (2 == index) {
				ts.addClass('ts')
			} else if (3 == index) {
				ts.addClass('ts')
			}
		});
		$('ul > li').live('mouseout', function() {
			var ts = $(this);
			var index = ts.index();
			var html = ts.html();
			if (0 == index) {
				ts.removeClass('ts')
			} else if (1 == index) {
				ts.removeClass('ts')
			} else if (2 == index) {
				ts.removeClass('ts')
			} else if (3 == index) {
				ts.removeClass('ts')
			}
		});
    }

    my.Name = privateName;
    my.AddTopic = function (data) {
        privateAddTopic(data);
    };

    return my;
})(jQuery, YAHOO);

 

<%@ 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>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'jquery-eq.jsp' starting page</title>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		ul > li {
		    background-color: #FCFEFC;
		    border: 1px solid #F5F5F5;
		    float: left;
		    list-style: none outside none;
		    margin: 10px;
		    padding: 5px;
		}
		ul > li:hover {
		    border: 1px solid gray;
		    border-radius: 5px;
		}
		
		.ts {
		 	-moz-transform: rotate(45deg);
		    -webkit-transform: rotate(45deg);
		    -o-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		    transform: rotate(45deg);
		 }
	
	</style>
	<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-eq.js"></script>
	<script type="text/javascript">
		YAHOO.privateAddTopic(YAHOO.Name('private verial'));
		alert(YAHOO.privateV);
	</script>
  </head>
  <body>
    <ul>
    	<li>basketball</li>
    	<li>football</li>
    	<li>one</li>
    	<li>two</li>
    </ul>
    <div id="eee"></div>
  </body>
</html>

 <div class="iteye-blog-content-contain" style="font-size: 14px"></div>

 

分享到:
评论

相关推荐

    Html_modle后台精美模板16套.rar

    它们也可能包含多种页面类型,如管理员登录、用户管理、数据分析、设置选项等,以便在实际项目中直接应用或作为参考。 使用这些模版的优势在于,它们可以显著节省开发时间,让开发者可以更专注于后端逻辑和业务功能...

    java-modle.rar_ java modle_java modle

    本压缩包文件“java-modle.rar”包含了23种不同的Java设计模式,每一种都是解决特定编程挑战的有效工具。 首先,我们有创建型模式,包括单例(Singleton)、工厂方法(Factory Method)、抽象工厂(Abstract ...

    PaddleOCR modle.zip

    PaddleOCR是由百度开发的深度学习OCR系统,它支持多种语言文字识别,并提供了丰富的预训练模型,包括轻量级模型和高性能模型。轻量级模型如MobileNetV3和Distillation模型,适用于资源有限的设备;高性能模型如DB...

    JavaScript学习心得之概述

    一、JavaScript是一种专为与网页交互而设计的脚本语言,它的的组成 ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.1ECMAScript  ECMA-262定义的ECMAScrip与Web浏览器没有依赖关系,ECMA-262...

    mvc的一个modle

    总结,这个“mvc的一个modle”项目是使用Java和Spring MVC实现的MVC模式示例,展示了如何在Web应用中分离数据处理、业务逻辑和用户界面,从而提高代码的可维护性和可扩展性。通过对模型、视图和控制器的深入理解,...

    MVP开发的modle

    一键生成 app Module 如果您想构建一个全新的项目,直接将整个项目 clone (或者下载) 下来,再将 demo 作为主 Module (建议将 arms Module 删除,并使用 Gradle 远程依赖 本框架,便于更新,删除前请务必先查看 这里...

    程序员简历模板modle

    - 联系方式:包括电话和电子邮件,确保这些联系方式是随时可用的。 - 个人主页(可选):如果你有个人网站或GitHub仓库,可以展示你的项目和作品。 2. **技能清单**: - 编程语言:列出你熟练掌握的语言,如Java...

    演示文稿modle6.ppt

    演示文稿modle6.ppt

    利用model模式开发登陆系统

    "利用Model1模式开发登陆系统"的实践可以帮助我们理解这种早期的Web开发方式,以及如何构建一个简单的用户登录功能。 首先,我们需要理解Model1模式的基本组成: 1. **模型(Model)**:这是应用程序的核心部分,...

    ar_duanshipingwen.rar_AR_ar modle_肌肉疲劳

    在这个特定的案例中,“ar_duanshipingwen.rar_AR_ar modle_肌肉疲劳”项目似乎关注的是利用AR模型来研究和评估肌肉疲劳的程度。 AR模型的基本思想是通过当前值与过去若干个时刻的值的线性组合来预测未来值。在肌肉...

    策略模式(strategy model)小实例一个

    策略模式是一种行为设计模式,它使你能在运行时改变对象的行为。...在"策略模式(strategy model)小实例一个"中,我们将看到如何通过策略模式实现不同排序算法的切换,从而更好地理解和应用这种模式。

    pred modle new(1).R

    pred modle new(1).R

    Camera Modle

    齐次坐标提供了一种表示空间中点的新方法,这种表示方式广泛应用于计算机视觉领域,并且是处理除了最简单的相机模型之外所有模型的基础。在欧几里得坐标系中,一个点通过一个n维向量表示,该向量编码了如何利用标准...

    QT中QTableView加载自定义Modle和自定义委托Delegate

    QT自定义模型Modle的实现实例和自定义委托Delegate的实现实例以及在QTableView中加载使用的实现

    43449912intelligent_control_modle_geneticpid_badlyl2u_智能控制_

    标题“43449912intelligent_control_modle_geneticpid_badlyl2u_智能控制_”提及的“智能控制模型”可能是一个融合了多种技术的控制系统,其中“geneticpid”和“badlyl2u”可能是特定的算法或控制策略的缩写。...

    servlet+jsp+modle+sqlser雷人项目

    在实现过程中,开发者可能使用了MVC(Model-View-Controller)设计模式,将应用程序划分为三个主要部分:处理用户请求的Controller(Servlet),处理数据的Model,以及展示结果的View(JSP)。通过这种方式,代码...

    performance-test-modle.rar_site:www.pudn.com

    总的来说,"performance-test-modle.rar"中的内容可能涵盖了性能测试的全过程,对于理解如何在复杂环境中构建和应用性能测试模型具有重要的实践指导意义。无论是软件开发者、测试工程师还是系统管理员,都可以从中...

    Example_Modle_Filter.rar_filter_hydraulic_液压_液压 matlab

    标题中的“Example_Modle_Filter.rar_filter_hydraulic_液压_液压_matlab”表明这是一个关于液压系统滤波模型的MATLAB程序。这个模型可能包含了使用扩展卡尔曼滤波(Extended Kalman Filter, EKF)技术来处理和分析...

Global site tag (gtag.js) - Google Analytics