基于jQuery的简单九宫格实现代码

代码如下:

<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/><br>
<input type="button" value="4"/>
<input type="button" value="5"/>
<input type="button" value="6"/><br>
<input type="button" value="7"/>
<input type="button" value="8"/>
<input type="button" value="9"/><br>
<input type="text" value=""/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var items="";
jQuery(function(){
$("input:button").each(function(index){
$(this).mouseover(function(){
if(items.indexOf($('input').eq(index).val())==-1){
items+=$('input').eq(index).val();
$('input:text').val(items)
}
})
})
})
</script>

赞 (0)

相关推荐

  • Android实现九宫格（GridView中各项平分空间）的方法

    Android实现九宫格（GridView中各项平分空间）的方法

    本文实例讲述了Android实现九宫格(GridView中各项平分空间)的方法.分享给大家供大家参考.具体如下: 项目需要做一个九宫格(也不一定是9的,4宫格.16宫格.4x3宫格...),封了 一个宫格,它能够根据为它分配的空间来自动的调节宫中各项的尺寸. 从TableLayout集成来的,因此如果你直接在设计器上使用该封装的话需要把它自动加进去的那几个TableRow删除一下. 类名为AdvancedGridView,代码如下: import android.content.Context;

  • Java实现解出世界最难九宫格问题

    芬兰数学家因卡拉花费3个月设计出了世界上迄今难度最大的数独游戏,而且它只有一个答案.因卡拉说只有思考能力最快.头脑最聪明的人才能破解这个游戏. 今日,一则腾讯的新闻称中国老头三天破解世界最难九宫格,虽然最后老人是改了一个数字,但是引起本人一时兴趣,想通过计算机程序求解该问题,于是在宿舍呆了一下午,终于成功求解,程序源码如下. 复制代码 代码如下: package numberGame; public class Point {     private int col;// 行号     priv

  • 九宫格的含义 横竖斜三个数相加都等于15

    九宫格的含义 横竖斜三个数相加都等于15

     因这类大家在编辑器中容易出错特,打包下载http://xiazai.jb51.net/200906/yuanma/jiugongge_bat.rar

  • 用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

    用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

    screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.blu

  • Android 九宫格的实现方法

    Android 九宫格的实现方法

    1.xml代码: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"       android:orientation="vertical"      android:layout_width="fill

  • Android开发之实现GridView支付宝九宫格

    Android开发之实现GridView支付宝九宫格

    先给大家展示下关于仿支付宝钱包首页中带有分割线的gridview,俗称九宫格 的效果图,怎么样是不是和你想象的一样啊.在你的预料之中就继续访问以下代码内容吧. 我们都知道ListView设置分割线是非常容易的,设置ListView的分割线颜色和宽度,只需要在布局中定义android:divider和android:dividerHeight属性即可.而GridView并没有这样的属性和方法,那我们改如何来做呢? 我们小编在做这个效果之前,也参考了其他的一些方案,比如说定义一个自定义的GridVi

  • android 九宫格滑动解锁开机实例源码学习

    效果图由于网站占时不能上传,以后补上. NinePointLineView.java 复制代码 代码如下: package org.demo.custon_view; import org.demo.utils.MLog; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; imp

  • js实现九宫格图片半透明渐显特效的方法

    本文实例讲述了js实现九宫格图片半透明渐显特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible {  FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- f

  • 基于jQuery的简单九宫格实现代码

    复制代码 代码如下: <input type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/><br> <input type="button" value="4"/>

  • 基于jQuery实现返回顶部实例代码

    基于jQuery实现返回顶部实例代码

    效果图展示如下所示: 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http:

  • 基于JQuery的多标签实现代码

    今天要分享的是基于JQuery实现的多标签的切换,JQuery就不用过多介绍了,网上一搜一大堆资料,当然这样的小示例也有很多,这里只是发表一些自己的想法. 下面是本次示例所使用的HTML页面: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://ww

  • 基于JQuery的密码强度验证代码

    基于JQuery的密码强度验证代码

       因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码 代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.f

  • passwordStrength 基于jquery的密码强度检测代码使用介绍

    查看示例:DEMO  打包下载 使用很简单. 复制代码 代码如下: $('#pass').passwordStrength(); XHTML 复制代码 代码如下: <p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthD

  • 基于JQuery的Pager分页器实现代码

    基于JQuery的Pager分页器实现代码

    实例效果图如下 使用说明 需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1) 素材准备 分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css 复制代码 代码如下: #pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list

  • 基于jquery实现简单的分页控件

    基于jquery实现简单的分页控件

    前台分页控件有很多,这里分享我的分页控件 pagination.js 1.0版本,该控件基于jquery. 先来看一下预览效果: 默认情况下,点击页码会像博客园一样,在url后面加上"#p页码". 控件有2个参数需要注意: 1. beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象.这个时候我们可以在呈现前做一些处理,例如增加自己的属性等.默认情况下,点击页码,会在url后面加上"#p页码",这样的url并不会刷新页面.如果我们需要刷

  • 基于jquery实现简单的手风琴特效

    基于jquery实现简单的手风琴特效

    手风琴效果是项目中使用频率较高的一种效果,本文实例J就为大家讲述了jquery实现简单的手风琴特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: css样式 /* CSS Document */ body { margin: 0 auto; padding: 0 auto; font-size: 9pt; font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif; } .accordion { paddi

  • 基于jQuery实现简单的折叠菜单效果

    基于jQuery实现简单的折叠菜单效果

    本文实例讲述了JQuery实现简单的折叠菜单效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: Html代码如下: <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a>

  • 基于jquery的loading效果实现代码

    在代码<head></head>里加入以下代码: <script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(window).load(function(){$("#loading").hide();})</script> 在里<bo

随机推荐