jQuery编辑表视图样式-插件特效-星河码客

首先我们准备HTML和CSS,按钮和风格样式的对象。italicstrongunderlinespan { display: inline-block; width: 23px; height: 23px; text-indent: -9999%; cursor: pointer} span:hover { background-position: bottom left;} .trigger-strong { background: url('images/bold.png') top left;} .trigger-italic { background: url('images/italic.png') top left;} .trigger-underline { background: url('images/underline.png') top left;} .trigger-background-selected{ background: url('images/background.png') top left;} .trigger-italic-selected { background: url('images/italic.png') top left;} .trigger-center-selected { background: url('images/center.png') top left;}上面的脚本将创建一个按钮,一些样式(*风格)我们将添加或删除的对象。现在我们添加一个功能按钮。$('.trigger-italic, .trigger-strong, .trigger-underline').toggle(function() { className = $(this).attr('class')+'-style'; $('td').addClass(className); $(this).addClass('selected'); },function() { $(this).removeClass('selected'); className = $(this).attr('class')+'-style'; $('td').removeClass(className); });首先,我们添加一个按钮切换函数,这将使一个按钮可以选择,没有选择。如果按钮被选中,我们将创建一个基于按钮类的类名(我们只添加“风格”文本类名)。所以,如果按钮类的名字“trigger-italic”脚本将生成一个新的类名“trigger-italic-style”。我们这类名称添加到每一个“td”我们(这代表“所有内容”),然后选中的类添加到按钮让它看起来选中。$('.trigger-background-2, .trigger-right-2, .trigger-center-2').toggle(function() { className = $(this).attr('class')+'-style'; $('tr td:nth-child(2)').addClass(className); $(this).addClass('selected'); },function() { $(this).removeClass('selected'); className = $(this).attr('class')+'-style'; $('tr td:nth-child(2)').removeClass(className); }); $('.trigger-background-23, .trigger-small-23, .trigger-big-23').toggle(function() { className = $(this).attr('class')+'-style'; $('tr:nth-child(4)').children('td').addClass(className); $(this).addClass('selected'); },function() { $(this).removeClass('selected'); className = $(this).attr('class')+'-style'; $('tr:nth-child(4)').children('td').removeClass(className); });最后是阅读用户定义的选择对象。$('td').click(function() { thisIndex = $(this).index() + 1; parentIndex = $(this).parents('tr').index() + 1; $.cookie('thisIndex', thisIndex); $.cookie('parentIndex', parentIndex); $(this).append('

Content Was Selected

'); $('.td-selected').fadeOut(1000); });该脚本将定位对象通过阅读它的指数及其母公司指数在饼干,然后保存它告诉用户,他们有选择一个对象。我们将添加一个功能按钮,它可以找到所选对象。$('.trigger-background-selected, .trigger-italic-selected, .trigger-center-selected').toggle(function() { className = $(this).attr('class')+'-style'; cookieTR = $.cookie('parentIndex'); cookieTD = $.cookie('thisIndex'); if(cookieTD != null && cookieTR != null) { $('tr:nth-child('+cookieTR+')').children('td:nth-child('+cookieTD+')').addClass(className); $(this).addClass('selected'); } else { alert('Choose a content on a table first'); } },function() { $(this).removeClass('selected'); className = $(this).attr('class')+'-style'; cookieTR = $.cookie('parentIndex'); cookieTD = $.cookie('thisIndex'); $('tr:nth-child('+cookieTR+')').children('td:nth-child('+cookieTD+')').removeClass(className); });

jQuery编辑表视图样式

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»