当前位置:  编程技术>WEB前端
本页文章导读:
    ▪刚刚写了一个评星的脚本插件，分享给大家      先上下自己的脚本文件： 1 $.fn.DyStar = function (option, callback) { 2 var defaults = { 3 count: 5, 4 url: 'images/star.gif' 5 }; 6 var opt = $.extend(defaults, option), 7 obj = $(this); 8 obj.css({ 9 .........
    ▪【转】jQuery旋转插件—rotate      网上发现一个很有意思的jQuery旋转插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现。调用和方法：rotate(angle)angle参数：[N.........
    ▪SSI框架整合实战成果       闲来无事，收集了各种SSI整合资料之后，比葫芦画瓢终于画出来一个。备份于此，以免遗忘。 一，准备工作 数据库建立 /* SQLyog Enterprise - MySQL GUI Host - 5.5.21 ********************************************.........

[1]刚刚写了一个评星的脚本插件，分享给大家
    来源:    发布时间: 2013-11-06

先上下自己的脚本文件：

1 $.fn.DyStar = function (option, callback) {
2 var defaults = {
3 count: 5,
4 url: 'images/star.gif'
5 };
6 var opt = $.extend(defaults, option),
7 obj = $(this);
8 obj.css({
9 width: 16 * opt.count,
10 height: 16
11 });
12 for (i = 0; i < opt.count; i++) {
13 $("<span></span>").css({
14 width: 16,
15 height: 16,
16 float: "left",
17 "background-image": "url("/blog_article/opt.url")"
18 }).appendTo($(this));
19 }
20
21
22 obj.each(function () {
23 if($(this).attr("data-value")){
24 $(this).children().not($(this).children("span:lt(" + $(this).attr("data-value") + ")").css("background-position", "0px 32px")).css("background-position", "0px 0px");
25 $(this).data("starcount",$(this).attr("data-value")-1);
26 }
27 });
28
29
30
31 obj.filter("[data-readonly!='true']").on({ //只读的 不添加这些事件
32 click: function () {
33 obj = $(this).parent();
34 var starindex = $(this).index() + 1;
35 obj.children().not($(this).prevAll().add($(this)).css("background-position", "0px 32px")).css("background-position", "0px 0px");
36 obj.data("starcount", $(this).index());
37 if (typeof option == 'function') {
38 option(starindex);
39 }
40 if (typeof callback == 'function') {
41 callback(starindex);
42 }
43 },
44 mouseover: function () {
45 obj = $(this).parent();
46 obj.children().not($(this).prevAll().add($(this)).css("background-position", "0px 16px")).css("background-position", "0px 0px");
47 },
48 mouseout: function () {
49 obj = $(this).parent();
50 obj.children().not(obj.children("span:lt(" + (obj.data("starcount") + 1) + ")").css("background-position", "0px 32px")).css("background-position", "0px 0px");
51 }
52 }, "span");
53 }

用法：

1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>豆芽评星</title>
6 <script src="/blog_article/jquery-1.8.3.min.js"></script>
7 <script src="/blog_article/DyStar.js"></script>
8 <style>
9 body {
10 font-size:12px
    
[2]【转】jQuery旋转插件—rotate
    来源:    发布时间: 2013-11-06

网上发现一个很有意思的jQuery旋转插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现。

调用和方法：
rotate(angle)

angle参数：[Number] – 默认为 0 – 根据给定的角度旋转图片

例如:

1$("#img").rotate(45);

rotate(parameters)

parameters参数：[Object] 包含旋转参数的对象。支持的属性:

  • angle属性：[Number] – default 0 – 旋转的角度数，并且立即执行
    例如:

     

    1$("#img").rotate({angle:45});
  • bind属性：[Object] 对象，包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样你可以在内部链式调用- $(this).rotate(…)。例如 (click on arrow):
    $("#img").rotate({bind:{

    click: function(){

    $(this).rotate({

    angle: 0,

    animateTo:180
    })
    }
    }
    });

     

  • animateTo属性：[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 （或给定的角度参数）例如: 结合上面的例子，请参阅使用。
  • duration属性：[Number] – 指定使用animateTo的动画执行持续时间例如 (click on arrow):
    $("#img").rotate({bind:{
    click: function(){
    $(this).rotate({
    duration:6000,
    angle: 0,
    animateTo:100
    })
    }
    }
    });

     

  • step属性：[Function] – 每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数
  • easing属性：[Function] – 默认 (see below) – Easing function used to make animation look more natural. It takes five parameters (x,t,b,c,d) to support easing from http://gsgd.co.uk/sandbox/jquery/easing/ (for more details please see documentation at their website). Remember to include easing plugin before using it in jQueryRotate!Default function:
     function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }

    Where:t: current time,
    b: begInnIng value,
    c: change In value,
    d: duration,
    x: unused
    No easing (linear easing):

     function(x, t, b, c, d) { return (t/d)*c ; }

    Example (click on arrow):

    $("#img").rotate({bind:{
    click: function(){
    $(this).rotate({
    angle: 0,
    animateTo:180,
    easing: $.easing.easeInOutElastic
    })
    }
    }
    });

     

  • callback属性：[Function] 动画完成时执行的回调函数例如 (click on arrow):
    $("#img").rotate({bind:{

    click: function(){
    $(this).rotate({
    angle: 0,
    animateTo:180,
    callback: function(){ alert(1) }
    })
    }
    }
    });

     

    • getRotateAngle

    这个函数只是简单地返回旋转对象当前的角度。

    例如:

    1 $("#img").rotate({
    2 angle: 45,
    3 bind: {
    4 click : function(){
    5 alert($(this).getRotateAngle());
    6 }
    7 }
    8 });

     

    stopRotate

    这个函数只是简单地停止正在进行的旋转动画。

    例如:

    1 $("#img").rotate({
    2 bind: {
    3 click: function(){
    4 $("#img").rotate({
    5 angle: 0,
    6 animateTo: 180,
    7 duration: 6000
    8 });
    9 setTimeout(function(){
    10 $("#img").stopRotate();
    11 }, 1000);
    12 }
    13 }
    14 });

     

    用这个可以实现很多关于旋转的网页特效，我用这个做了个抽奖大转盘，效果不错，就是没flash顺畅，基本能跑哈哈。

    jqueryrotate项目地址：http://code.google.com/p/jqueryrotate/

    代码示例：http://code.google.com/p/jqueryrotate/wiki/Examples

    本文链接


        
    [3]SSI框架整合实战成果
        来源: 互联网  发布时间: 2013-11-06

    闲来无事，收集了各种SSI整合资料之后，比葫芦画瓢终于画出来一个。备份于此，以免遗忘。 一，准备工作

    数据库建立

    /*
SQLyog Enterprise - MySQL GUI
Host - 5.5.21 
*********************************************************************
Server version : 5.5.21
*/
/*!40101 SET NAMES utf8 */;

CREATE TABLE `afl_user` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `username` char(20) NOT NULL,
  `password` char(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;


    JAR包请自行下载需要的。

    二，整体环境

    JDK：1.6

    struts：2.2.3

    spring：3.0.5

    ibatis：2.3.4

    Tomcat：7.0

    Eclipse Java EE IDE for Web Developers.

    Version: Indigo Service Release 1
    Build id: 20110916-0149

    源码目录结构

    三，实现细节 1，ACTION代码

    BaseDTO.java  目前为空，方便以后

     

    package com.afl.system.struts2.action.dto;

public class BaseDTO {

}


    BaseAction.java 

     

    /**
* 所有Action的基类，
* 继承自BaseAction的action都可以直接使用HttpServletRequest,HttpServletResponse和Session
*/
package com.afl.system.struts2.action; 

import java.util.Map; 

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; 

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;
import org.apache.struts2.interceptor.SessionAware;
import org.apache.struts2.util.ServletContextAware;
import org.springframework.context.ApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils; 

import com.afl.system.struts2.action.dto.BaseDTO;
import com.opensymphony.xwork2.ActionSupport; 
import com.opensymphony.xwork2.ModelDriven;

/**
* @author
* 
*/
public class BaseAction<DTO extends BaseDTO> extends ActionSupport implements SessionAware,
        ServletRequestAware, ServletResponseAware, ServletContextAware, ModelDriven<DTO> {

	private static final long serialVersionUID = 1L;

	protected Map<String, Object> session; 

    protected HttpServletRequest request; 

    protected HttpServletResponse response; 

    protected ServletContext context; 

    protected DTO dto;
    
    /*
     * (non-Javadoc)
     * 
     * @see org.apache.struts2.util.ServletContextAware#setServletContext(javax.servlet.ServletContext)
     */
    public void setServletContext(ServletContext context) {
        this.context = context;
    } 

    /*
     * (non-Javadoc)
     * 
     * @see org.apache.struts2.interceptor.ServletResponseAware#setServletResponse(javax.servlet.http.HttpServletResponse)
     */
    public void setServletResponse(HttpServletResponse response) {
        this.response = response;
    } 

    /*
     * (non-Javadoc)
     * 
     * @see org.apache.struts2.interceptor.ServletRequestAware#setServletRequest(javax.servlet.http.HttpServletRequest)
     */
    public void setServletRequest(HttpServletRequest request) {
        this.request = request;
    } 

    /*
     * (non-Javadoc)
     * 
     * @see org.apache.struts2.interceptor.SessionAware#setSession(java.util.Map)
     */
    public void setSession(Map<String, Object> session) {
        this.session = session;
    } 

	@Override
	public DTO getModel() {
		return dto;
	} 
    
    //<!-- 这个就是获得设备上下文的方法，和struts1一样吧^-^ --> 
    public ApplicationContext getApplicationContext() {
        return WebApplicationContextUtils.getWebApplicationContext(context);
    }
    
    //<!-- 作了个处理，以后需要调用spring的bean，直接调用此方法就可以了 --> 
    public Object getObject(String beanName) {
        return getApplicationContext().getBean(beanName);
    }
}


     UserDTO.java

     

    package com.afl.register.action.dto;

import com.afl.system.struts2.action.dto.BaseDTO;

public class UserDTO extends BaseDTO {

    private String username; 

    private String password;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}
}

    RegisterAction.java

    package com.afl.register.action;

import com.afl.register.action.dto.UserDTO;
import com.afl.register.service.IRegisterService;
import com.afl.system.struts2.action.BaseAction;

public class RegisterAction extends BaseAction<UserDTO> {

	private static final long serialVersionUID = 1L;

	private IRegisterService registerService;
	
	public RegisterAction(){
		dto = new UserDTO();
	}
	
	public String addUser(){
		registerService.addUser(dto.getUsername(), dto.getPassword());
		return "success";
	}

	public IRegisterService getRegisterService() {
		return registerService;
	}

	public void setRegisterService(IRegisterService registerService) {
		this.registerService = registerService;
	}
}
    2，service代码

    IRegisterService.java

    package com.afl.register.service;

public interface IRegisterService {

	public void addUser(String username, String password);
	
}


    RegisterServiceImpl.java

    package com.afl.register.service.impl;

import com.afl.register.service.IRegisterService;
import com.afl.register.service.dao.IRegisterDAO;
import com.afl.system.entity.User;

public class RegisterServiceImpl implements IRegisterService {
    
	private IRegisterDAO registerDAO;
	
	@Override
	public void addUser(String username, String password) {
		User user = new User(username, password);
		registerDAO.addUser(user);
	}

	public IRegisterDAO getRegisterDAO() {
		return registerDAO;
	}

	public void setRegisterDAO(IRegisterDAO registerDAO) {
		this.registerDAO = registerDAO;
	}

}


    IRegisterDAO.java

    package com.afl.register.service.dao;

import com.afl.system.entity.User;

public interface IRegisterDAO {

	public void addUser(User user);
	
}

    RegisterDAOImpl.java

    package com.afl.register.service.dao.impl;

import org.springframework.orm.ibatis.support.SqlMapClientDaoSupport;

import com.afl.register.service.dao.IRegisterDAO;
import com.afl.system.entity.User;

public class RegisterDAOImpl extends SqlMapClientDaoSupport implements IRegisterDAO {
	
	@Override
	public void addUser(User user) {
		getSqlMapClientTemplate().insert("insertUser", user);
	}
}
    3，entity及配置文件

    User.java

    package com.afl.system.entity;

public class User {
	// 主键 id
    private Long id; 

    // 用户名
    private String username; 

    // 密码
    private String password;

    public User(){

    }
    
    public User(String username, String password){
    	this.username = username;
    	this.password = password;
    }
    
	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

}

    User.xml

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE sqlMap PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"      
"http://ibatis.apache.org/dtd/sql-map-2.dtd">
<sqlMap>
    <typeAlias alias="User" type="com.afl.system.entity.User" />
    <!-- 保存注册信息 -->
    <insert id="insertUser" parameterClass="User">
        insert into
        AFL_User(username,password)values(#username#,#password#)
    </insert>
</sqlMap>


    struts.xml

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <!-- 这是一个重要的地方，很多人在使用<s:include>子页面后，发现子页面乱码，怎么改都不行，原因就在次，struts2的默认编码为UTF-8，乱码的同志请看看你的jsp页面上的编码是不是和这个不一致呢。只要把这里和jsp编码改一致就行了 -->
    <constant name="struts.i18n.encoding" value="UTF-8" />
	<!-- 告诉struts2，我要用spring装配工厂，其实默认就是这个了-_-!!! -->
    <constant name="struts.objectFactory" value="spring" />
	<!-- struts2的扩展名，比如struts1的时候，用的.do,struts2默认为.action，可以改成其它的，比如.dxd -->
    <constant name="struts.action.extension" value="action" />
	<!-- 资源文件 -->
    <constant name="struts.custom.i18n.resources"
        value="messageResource">
    </constant> 

    <!-- 用户注册类 -->
	<!-- abstract属性就说明了该action继承自自己定义的基础action，而class采用的registerAction是由spring产生的 -->
    <package name="register" extends="struts-default"      
    
      
      
        
    最新技术文章:
    ▪css white-space:nowrap属性用法（可以强制文字不...
    ▪IE里button设置border:none属性无效解决方法
    ▪border:none与border:0使用区别
    ▪html清除浮动的6种方法示例
    ▪三个不常见的 HTML5 实用新特性简介
    ▪css代码优化的12个技巧
    ▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
    ▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
    ▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
    ▪小技巧处理div内容溢出
    ▪html小技巧之td,div标签里内容不换行
    ▪纯CSS实现鼠标放上去改变文字内容
    ▪li中插入img图片间有空隙的解决方案
    ▪CSS3中Transition属性详解以及示例分享
    ▪父div高度不能自适应子div高度的解决方案
    ▪告别AJAX实现无刷新提交表单
    ▪从零学CSS系列之文本属性
    ▪HTML 标签
    ▪CSS3+Js实现响应式导航条
    ▪CSS3实例分享之多重背景的实现(Multiple background...
    ▪用css截取字符的几种方法详解（css排版隐藏溢...
    ▪页面遮罩层，并且阻止页面body滚动。bootstrap...
    ▪CSS可以做的几个令你叹为观止的实例分享
    ▪详细分析css float 属性以及position:absolute 的区...
    ▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
    ▪CSS小例子(只显示下划线的文本框，像文字一...
    ▪可以给img元素设置背景图
    ▪不通过JavaScript实现的自动滚动视差效果
    ▪div+CSS 兼容小摘
    ▪CSS的inherit与auto使用分析
     


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3