美高梅网址jQuery多媒体插件jQuery,RowExpander无法触
分类:关于美高梅

美高梅网址 1

   我们这里可以改进一下,就是让上面的代码能够设置能够扩展。这样当使用这个插件的用户能够使用最少的代码重载我们的option。这也就是我们开始使用function对象的好处。

Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法,rowexpander

Ext4.2+ Ext.grid.plugin.RowExpander存在bug,添加的collapsebody,expandbody无法触发,查看了下 Ext.grid.plugin.RowExpander对应的源代码,没有添加collapsebody,expandbody事件,即使按照网上的方 法重写Ext.grid.plugin.RowExpander的init和toggleRow方法也无法触发 collapsebody,expandbody事件。

解决办法:给grid对象添加collapsebody,expandbody事件,然后给grid配置这2个事件,同时重写Ext.grid.plugin.RowExpander的toggleRow方法,触发grid添加的这2个事件即可。

测试源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext4.2+ Ext.grid.plugin.RowExpander无法触发collapsebody,expandbody事件解决办法</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" rel="external nofollow" />
<script type="text/javascript" src="../../ext-all-debug.js"> </script>
<script>
Ext.override(Ext.grid.plugin.RowExpander, { // Override to fire collapsebody & expandbody
 init: function(grid) {
  this.callParent(arguments);
//  grid.getView().addEvents('collapsebody', 'expandbody');//ext论坛找到的解决办法,这样也无法添加事件
//存储grid对象
this.grid=grid
  this.grid.addEvents('collapsebody', 'expandbody');//给grid对象添加事件
 },
 toggleRow: function(rowIdx, record) {
  var me = this,
   view = me.view,
   rowNode = view.getNode(rowIdx),
   row = Ext.fly(rowNode, '_rowExpander'),
   nextBd = row.down(me.rowBodyTrSelector, true),
   isCollapsed = row.hasCls(me.rowCollapsedCls),
   addOrRemoveCls = isCollapsed ? 'removeCls' : 'addCls',
   ownerLock, rowHeight, fireView;


  // Suspend layouts because of possible TWO views having their height change
  Ext.suspendLayouts();
  row[addOrRemoveCls](me.rowCollapsedCls);
  Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);
  me.recordsExpanded[record.internalId] = isCollapsed;
  view.refreshSize();


  // Sync the height and class of the row on the locked side
  if (me.grid.ownerLockable) {
   ownerLock = me.grid.ownerLockable;
//   fireView = ownerLock.getView();
   view = ownerLock.lockedGrid.view;
   fireView=ownerLock.lockedGrid.view;
   rowHeight = row.getHeight();
   // EXTJSIV-9848: in Firefox the offsetHeight of a row may not match
   // it is actual rendered height due to sub-pixel rounding errors. To ensure
   // the rows heights on both sides of the grid are the same, we have to set
   // them both.
   row.setHeight(isCollapsed ? rowHeight : '');
   row = Ext.fly(view.getNode(rowIdx), '_rowExpander');
   row.setHeight(isCollapsed ? rowHeight : '');
   row[addOrRemoveCls](me.rowCollapsedCls);
   view.refreshSize();
  } else {
   fireView = view;
  }
//通过grid触发事件,而不是view
this.grid.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
//下面为ext论坛的解决办法,无效
//fireView.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
  // Coalesce laying out due to view size changes
  Ext.resumeLayouts(true);
 },
});
//Ext.loader.setConfig({enabled:true});
Ext.onReady(function() {
 Ext.QuickTips.init();
 var store = new Ext.data.Store({

  fields:[
   {name:'fileName',type:'string'},
   {name:'room',type:'string'},
   {name:'recordDate',type:'string'},

  ],
  data:[
   {fileName:'文件1',room:'会议室1',recordDate:'2014-07-03'},
   {fileName:'文件2',room:'会议室2',recordDate:'2014-07-03'},
   {fileName:'文件3',room:'会议室3',recordDate:'2014-07-03'}
  ],
  autoLoad:true
 });
 var expander = new Ext.grid.plugin.RowExpander({
  rowBodyTpl:new Ext.XTemplate('<div class="detailData">pp</div>'),
  listeners:{
   expandbody:function(){//无法触发这个是事件
    console.log('Ext.grid.plugin.RowExpander');
   }
  }
 });
  Ext.create('Ext.grid.Panel',{
  xtype: 'row-expander-grid',
  store: store,
  listeners:{
   expandbody:function(){//OK,可以触发
    console.log('fired from grid');
   }
  },
  renderTo:Ext.getBody(),
  columns: [
   {text: "文件名称", flex: 1, dataIndex: 'fileName'},
   {text: "会议室", dataIndex: 'room'},
   {text: "录制日期", renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'recordDate'}
  ],
  width: 600,
  height: 300,
  plugins:expander,
  collapsible: true,
  animCollapse: false,
  title: 'Expander Rows in a Collapsible Grid',
  iconCls: 'icon-grid'
 });
});
</script>
</head>
<body id="docbody">
</body>
</html>

美高梅网址 2

直接下载jquery.media.js文件,或者在Github上下载历史版本

解决办法:给grid对象添加collapsebody,expandbody事件,然后给grid配置这2个事件,同时重写Ext.grid.plugin.RowExpander的toggleRow方法,触发grid添加的这2个事件即可。

   公开plugin的一些Option能够被自定义当然是个非常强大的功能。但是你需要考虑哪部分应该被公开,哪部分不应该通过外部访问,否则会破会你已经封装好的结果。

对于GridView的问题,不可以触发GridView1_RowCommand里的事件

...好吧 同学,这里我说代码你肯定也看不太懂了,那么我给你图文并教吧,如果还不懂,留你QQ。
首先打开你的开发工具,然后点一下你的GridView控件,然后点‘属性’按钮。接下来在属性页面点上方的‘闪电图形的符号’,然后再双击RowCommand项,然后页面和cs文件都保存,这时候你再后台cs文件就能看到你的rowcommand方法了,然后就是你表演的时刻了。

美高梅网址 3  

Ext4.2+ Ext.grid.plugin.RowExpander存在bug,添加的collapsebody,expandbody无法触发,查看...

$('.media').media( { width: 400, height: 300, autoplay: true } );

您可能感兴趣的文章:

  • mysql自动停止 Plugin FEDERATED is disabled 的完美解决方法
  • jQuery多媒体插件jQuery Media Plugin使用详解
  • jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
  • JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
  • MySql报错Table mysql.plugin doesn’t exist的解决方法
  • DIY jquery plugin - tabs标签切换实现代码
  • 制作高质量的JQuery Plugin 插件的方法
  • LazyForm jQuery plugin 定制您的CheckBox Radio和Select
  • 一步一步教你写一个jQuery的插件教程(Plugin)
  • Maven的几个常用plugin

美高梅网址 4

L36H锛屾渶杩戜袱澶╁湪閫氱煡鏍忛噷瀹樻柟鍗囩骇浜?42锛屽彉寰楃壒鍒崱锛屾墦瀛楅兘鍗°€傚悗鍙板緢婊★紝鏃犳硶鍏抽棴銆傛眰瑙e喅鍔炴硶

播放器和格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext4.2+ Ext.grid.plugin.RowExpander无法触发collapsebody,expandbody事件解决办法</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" rel="external nofollow" />
<script type="text/javascript" src="../../ext-all-debug.js"> </script>
<script>
Ext.override(Ext.grid.plugin.RowExpander, { // Override to fire collapsebody & expandbody
 init: function(grid) {
  this.callParent(arguments);
//  grid.getView().addEvents('collapsebody', 'expandbody');//ext论坛找到的解决办法,这样也无法添加事件
//存储grid对象
this.grid=grid
  this.grid.addEvents('collapsebody', 'expandbody');//给grid对象添加事件
 },
 toggleRow: function(rowIdx, record) {
  var me = this,
   view = me.view,
   rowNode = view.getNode(rowIdx),
   row = Ext.fly(rowNode, '_rowExpander'),
   nextBd = row.down(me.rowBodyTrSelector, true),
   isCollapsed = row.hasCls(me.rowCollapsedCls),
   addOrRemoveCls = isCollapsed ? 'removeCls' : 'addCls',
   ownerLock, rowHeight, fireView;


  // Suspend layouts because of possible TWO views having their height change
  Ext.suspendLayouts();
  row[addOrRemoveCls](me.rowCollapsedCls);
  Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);
  me.recordsExpanded[record.internalId] = isCollapsed;
  view.refreshSize();


  // Sync the height and class of the row on the locked side
  if (me.grid.ownerLockable) {
   ownerLock = me.grid.ownerLockable;
//   fireView = ownerLock.getView();
   view = ownerLock.lockedGrid.view;
   fireView=ownerLock.lockedGrid.view;
   rowHeight = row.getHeight();
   // EXTJSIV-9848: in Firefox the offsetHeight of a row may not match
   // it is actual rendered height due to sub-pixel rounding errors. To ensure
   // the rows heights on both sides of the grid are the same, we have to set
   // them both.
   row.setHeight(isCollapsed ? rowHeight : '');
   row = Ext.fly(view.getNode(rowIdx), '_rowExpander');
   row.setHeight(isCollapsed ? rowHeight : '');
   row[addOrRemoveCls](me.rowCollapsedCls);
   view.refreshSize();
  } else {
   fireView = view;
  }
//通过grid触发事件,而不是view
this.grid.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
//下面为ext论坛的解决办法,无效
//fireView.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
  // Coalesce laying out due to view size changes
  Ext.resumeLayouts(true);
 },
});
//Ext.loader.setConfig({enabled:true});
Ext.onReady(function() {
 Ext.QuickTips.init();
 var store = new Ext.data.Store({

  fields:[
   {name:'fileName',type:'string'},
   {name:'room',type:'string'},
   {name:'recordDate',type:'string'},

  ],
  data:[
   {fileName:'文件1',room:'会议室1',recordDate:'2014-07-03'},
   {fileName:'文件2',room:'会议室2',recordDate:'2014-07-03'},
   {fileName:'文件3',room:'会议室3',recordDate:'2014-07-03'}
  ],
  autoLoad:true
 });
 var expander = new Ext.grid.plugin.RowExpander({
  rowBodyTpl:new Ext.XTemplate('<div class="detailData">pp</div>'),
  listeners:{
   expandbody:function(){//无法触发这个是事件
    console.log('Ext.grid.plugin.RowExpander');
   }
  }
 });
  Ext.create('Ext.grid.Panel',{
  xtype: 'row-expander-grid',
  store: store,
  listeners:{
   expandbody:function(){//OK,可以触发
    console.log('fired from grid');
   }
  },
  renderTo:Ext.getBody(),
  columns: [
   {text: "文件名称", flex: 1, dataIndex: 'fileName'},
   {text: "会议室", dataIndex: 'room'},
   {text: "录制日期", renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'recordDate'}
  ],
  width: 600,
  height: 300,
  plugins:expander,
  collapsible: true,
  animCollapse: false,
  title: 'Expander Rows in a Collapsible Grid',
  iconCls: 'icon-grid'
 });
});
</script>
</head>
<body id="docbody">
</body>
</html>
  1. 为默认的plugin设定提供公共的访问权限。

默认情况下,PDF和HTML格式被映射到了iframe。它们将显示在iframe中而非object/embed标记中。

测试源代码如下:

jQuery 的plugin开发需要注意的事情,

此插件会把<a>转化为<div> 从而嵌套多媒体内容。此插件像其它的Jquery插件一样 简单易用。

Ext4.2+ Ext.grid.plugin.RowExpander存在bug,添加的collapsebody,expandbody无法触发,查看了下 Ext.grid.plugin.RowExpander对应的源代码,没有添加collapsebody,expandbody事件,即使按照网上的方 法重写Ext.grid.plugin.RowExpander的init和toggleRow方法也无法触发 collapsebody,expandbody事件。

美高梅网址 5

全局默认值:

美高梅网址 6

$('.media').media({
  width: 450,
  height: 250,
  autoplay: true,
  src: 'myBetterMovie.mov',
  attrs: { attr1: 'attrValue1', attr2: 'attrValue2' }, // object/embed attrs
  params: { param1: 'paramValue1', param2: 'paramValue2' }, // object params/embed attrs
  caption: false // supress caption text
});

   这个条款和上面的相仿,能很有趣的让你的Plugin有扩展功能。例如:在lilight的plugin中我们能够定义一个function是format,可以定义hilight的text的形式。我们的plugin代码将会显示如下:

添加或者修改格式关联

现在用户可以在他们的script中使用一行代码来设置foreground属性:

这个脚本很常见,用来将Flash内容嵌入到网页中,你不用考虑不同平台的Flash嵌入方式。但这个文件并非必需。如果它加载了,jQuery Media Plugin将使用它,反之jQuery Media Plugin将按自己的默认方式生成object/embed标记。更多信息可以参考:

这里我们可以很容易支持另外的一个option对象来通过一个callback 函数来重载默认的formatting。那将会是另外一个不错的支持自定义的方式。

iframe Player

美高梅网址 7

您可能感兴趣的文章:

  • mysql自动停止 Plugin FEDERATED is disabled 的完美解决方法
  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
  • jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
  • JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
  • MySql报错Table mysql.plugin doesn’t exist的解决方法
  • DIY jquery plugin - tabs标签切换实现代码
  • 制作高质量的JQuery Plugin 插件的方法
  • LazyForm jQuery plugin 定制您的CheckBox Radio和Select
  • 一步一步教你写一个jQuery的插件教程(Plugin)
  • Maven的几个常用plugin

  如果metadata plugin能够成功的封装到我们的插件,那么可以通过下面的标记来使用这个lilight插件。

播放器

文件格式

Quicktime

aif,aiff,aac,au,bmp,gsm,mov,mid, midi,mpg,mpeg,mp4,m4a,psd,qt,qtif, qif,qti,snd,tif,tiff,wav,3g2,3pg

Flash

flv, mp3, swf

Windows Media Player

asx, asf, avi, wma, wmv

Real Player

ra, ram, rm, rpm, rv, smi, smil

Silverlight

xaml

iframe

html, pdf

2.明白options参数来控制plugin的行为。

src选项指定了媒体文件的地址。它没有全局的默认值。如果未显示指定src选项的值,jQuery Media Plugin将使用href或者src属性的值来代替。

美高梅网址 8

初始化脚本:

6.支持metadata plugin。

上表说明了,mp3格式被自动对应到了flash播放器。全局配置中的$.fn.media.defaults.mp3Player指定MP3媒体由 mediaplayer.swf文件播放。该swf文件是一个小型的mp3和flash视频播放器,可以从这里下载:

  1. 私有的函数绝对是私有访问

复制代码 代码如下:

  这里debug方法不能从外部访问,因为他在plugin的展现中属于私有的方法。

$.fn.media.mapFormat('mp3','quicktime');
可用的播放器有:uicktime, flash, realplayer, winmedia, silverlight和iframe,确保播放器能够播放关联到它的文件格式。

美高梅网址 9

我们也可以在执行初始化脚本的时候传入一些option参数进去,如下代码:

有了上面的代码我们就可以把某个DOM控件的foregrounf颜色设定为blue了。

注意:

现在插件能够设定如下的属性:

下载

美高梅网址 10

具体使用方法

您可能感兴趣的文章:

  • mysql自动停止 Plugin FEDERATED is disabled 的完美解决方法
  • jQuery多媒体插件jQuery Media Plugin使用详解
  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
  • jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
  • JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
  • MySql报错Table mysql.plugin doesn’t exist的解决方法
  • DIY jquery plugin - tabs标签切换实现代码
  • 制作高质量的JQuery Plugin 插件的方法
  • LazyForm jQuery plugin 定制您的CheckBox Radio和Select
  • Maven的几个常用plugin

可以通过脚本对象或者jQuery Metadata Plugin来配置参数。

  使用Metadata Plugin需要看你的plugin是什么类型,可能它会使你的插件功能更加强大。个人来说,我比较喜欢metadata plugin是因为它能偶让我的plguin的option通过标记重载。

<a class="media" href="sample.mov">My Quicktime Movie</a>
<a class="media" href="sample.swf">My Flash Movie</a>
<a class="media" href="sample.wma">My Audio File</a>

  1. 为子函数提供公共的访问权限

再如代码:

为什么jQuery的plugin只有一个命名空间?可能是设计的要求,或者是这样的话可读性更强,亦或是为了面向对象的设计模式。

复制代码 代码如下:

  让我们先为我们的hilight插件明确一下foreground和background的颜色。我们应该能够允许这两个option作为option对象传递给plugin的主函数。例如:

$.fn.media.defaults = {
preferMeta: 1, // 如果为true, 则标记的meta值优先于脚本对象
autoplay: 0, // 标准化的跨播放器设置
bgColor: '#ffffff', // 背景颜色
params: {}, // 作为param元素添加到object标记中;作为属性添加到embed标记中
attrs: {}, // 作为属性添加到object以及embed中
flashvars: {}, // 作为flashvars参数或属性添加到flash中
flashVersion: '7', // 需要的最低flash版本
// 默认的flash视频和mp3播放器 // @see:
flvPlayer: 'mediaplayer.swf',
mp3Player: 'mediaplayer.swf',
// Silverlight选项 // @see
silverlight: {
  inplaceInstallPrompt: 'true', // 在适当的位置显示安装提示
  isWindowless: 'true', // 无窗口模式
  framerate: '24', // 最大帧速率
  version: '0.9', // Silverlight版本 onError: null, // onError回调函数
  onLoad: null, // onLoad回调函数
  initParams: null, // 对象初始化参数
  userContext: null // 传到load回调函数的参数
  }
};

在我们的例子里,我们将会命名这个插件名字为hilight,

复制代码 代码如下:

美高梅网址 11

 <div class="media">
    <object width="450" height="250" attr1="attrValue1" attr2="attrValue2"
        codebase=""
        classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
        <param name="src"      value="myBetterMovie.mov">
        <param name="autoplay" value="true">
        <param name="param1"   value="paramValue1">
        <param name="param2"   value="paramValue2">
        <embed width="450" height="250" src="myBetterMovie.mov" autoplay="true"
            attr1="attrValue1" attr2="attrValue2" param1="paramValue1" param2="paramValue2"
            pluginspage="" > </embed>
    </object>
</div>

复制代码 代码如下:

复制代码 代码如下:

美高梅网址 12

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本配置,自动将a标签替换成div,并生成object, embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容性方面非常出色。下面这段代码是jQuery Media生成后的结果:

//
// create closure
//
(function($) {
//
// plugin definition
//
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
//
// private function for debugging
//
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
//
// define and expose our format function
//
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
//
// end of closure
//
})(jQuery);

jQuery Media Plugin默认为播放器和格式如下表所示:

  1.       明确jQuery的命名空间只有一个。
    2.       明白options参数用来控制plugin的行为。
    3.       为默认的plugin设定提供公共的访问权限。
    4.       为子函数提供公共的访问权限。
    5.       私有的函数绝对是私有访问
    6.       支持metadata plugin。
    我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。

  2. 明确jQuery的命名空间只有一个

复制代码 代码如下:

 最终代码如下:

选项

美高梅网址 13

SWFObject

也就是我们的plugin可以通过下面的方法来使用:

$('.media').media();

美高梅网址 14

'src'选项

html标记代码

这个操作可以由插件的mapFormat方法实现,如

复制代码 代码如下:

本文由美高梅网址发布于关于美高梅,转载请注明出处:美高梅网址jQuery多媒体插件jQuery,RowExpander无法触

上一篇:js函数详解,js中使用计时器定时执行函数详解 下一篇:没有了
猜你喜欢
热门排行
精彩图文