易栈网-膘叔（Neatstudio.COM）

易栈网-膘叔

扩展JQuery Ajax请求错误机制

js控制网页播放器MEDIA PLAYER的相关知识

很妖的实现：以JSon来实现TextBox可选择可输入

FCK常用操作

jQuery简单开发

扩展JQuery Ajax请求错误机制

js控制网页播放器MEDIA PLAYER的相关知识

很妖的实现：以JSon来实现TextBox可选择可输入

FCK常用操作

jQuery简单开发

日志分类

热门标签

日志归档

搜索文章

最新评论

博客信息

友情链接

浏览模式: 标准 | 列表分类:Javascript

Submitted by gouki on 2009, May 1, 7:54 AM

如何对ajax的错误进行更好的处理？本文给出了一个简单的解决方案。想当于类的扩展和继承一样。有新意，一直以来，对于框架我们要么是扩展，要么是写新方法，就从来没有想过要继承这些方法。所以，作者这个给了我很多启发。

原文：http://www.cnblogs.com/lyk831216/archive/2009/04/24/1442791.html

JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，但时间久了，也让我们离不开他。比如简单的Jquery Ajax请求的封装让我们忘却了最原始的XmlHttpRequest对象和他的属性,方法，也让我们远离事情的真相。

在Ajax项目中，经常遇到需要服务器端返回错误的消息提示，或者消息码之类的数据。查过一些帮助，解决方案，很多网站是返回错误的消息JSON数据或者脚本，这种方式当我们用JQuery.ajax()的时候出现了问题，jquery.ajax()回调函数success(data)的data参数可能是 xmlDoc, jsonObj, html, text, 等等...这取决于我们dataType设置和MIME.很多时候我们的错误处理都是统一的处理，不管你请求的是XML,JSON...。不光不好统一，还容易出现解析错误等等情况。

参考了Prototyp框架的做法，做了一个Jquery的错误扩展。

原理：Prototype思路是把服务器处理结果状态信息写在Header里面，这种方式既保证了reponse body的干净，同时适应XML,JSON，HTML,Text的返回情况。

　　　服务器端只需要 Response.AddHeader("Error-Json", "{code:2001,msg:'User settings is null!',script:''}");

实现：为了不影响原有的Jquery.ajax方法，同时不破坏jquery库源文件，做了如下扩展，代码很简单都能看懂：

JavaScript代码

;(function($){
var ajax=$.ajax;
$.ajax=function(s){
var old=s.error;
var errHeader=s.errorHeader||"Error-Json";
s.error=function(xhr,status,err){
var errMsg = window["eval"]("(" + xhr.getResponseHeader(errHeader) + ")");
old(xhr,status,errMsg||err);
}
ajax(s);
}
})(jQuery);

使用方法：

　　服务器端：我们是对错误进行扩展，如果要让jquery.ajax破获［膘叔：应该为捕获］错误，必须要服务器端返回非200的错误码，由于Opera浏览器下面对 400以上的错误码，都无法获得请求的Header，建议如果要支持Opera，最好返回30*错误，这是Opera能接受Header的错误范围。没有做包装，可以再单独把Catch内容出来。

C#代码

try {
context.Response.Write(GetJson(context));
throw new Exception("msg");
}
catch {
context.Response.ClearContent();
context.Response.StatusCode = 300;
context.Response.AddHeader("Error-Json", "{code:2001,msg:'User settings is null!',script:''}");
context.Response.End();
}

　客户端：

JavaScript代码

$.ajax({
url: this.ajaxUrl,
type: "POST",
success: callback,
error: function(xhr,status,errMsg){
alert(errMsg.code+"<br/>"+errMsg.msg);
}
});

也许不是最好的，但觉得用起来很方便，忘了个写新增参数errorHeader:"Error-Json",这个header头key根据你后台设定配置。

Tags: jquery, 扩展

Javascript | 评论:0 | 阅读:27632

Submitted by gouki on 2009, April 21, 9:31 AM

没想过要用这个东西，但群里有人问，这个地址也是群里的朋友贴出来的，仔细想想这个东西也有应用的场景，比如歌词的控制。能够得到播放时间，就能够控制歌词的显示了。估计那些用JS做的播放器大致都是这样的吧？猜测而已

内容如下：http://roln.cn/archives/80

<!–播放器开始–>
<object id=”Exobud” style=”width: 273px; height: 64px” type=”application/x-oleobject”
  classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″>
  <param name=”URL” value=”"/>
  <param name=”rate” value=”1″/>
  <param name=”balance” value=”0″/>
  <param name=”currentPosition” value=”0″/>
  <param name=”defaultFrame” value=”"/>
  <param name=”playCount” value=”1″/>
  <param name=”autoStart” value=”-1″/>
  <param name=”currentMarker” value=”0″/>
  <param name=”invokeURLs” value=”-1″/>
  <param name=”baseURL” value=”"/>
  <param name=”volume” value=”80″/>
  <param name=”mute” value=”0″/>
  <param name=”uiMode” value=”full”/>
  <param name=”stretchToFit” value=”-1″/>
  <param name=”windowlessVideo” value=”0″/>
  <param name=”enabled” value=”-1″/>
  <param name=”enableContextMenu” value=”0″/>
  <param name=”fullScreen” value=”0″/>
  <param name=”SAMIStyle” value=”"/>
  <param name=”SAMILang” value=”"/>
  <param name=”SAMIFilename” value=”"/>
  <param name=”captioningID” value=”"/>
  <param name=”enableErrorDialogs” value=”0″/>
  <param name=”_cx” value=”7223″/>
  <param name=”_cy” value=”1693″/>
</object> <!–播放器结束–>
1 单项播放很简单,这里粗略的说一下
通过网页传参在后台cs页面绑定一个变量
html
<param name=”URL” value=”<% = Url%>”/>
cs
public string Url;
Url = 从数据库中读取

2 让播放器播放多首歌曲并循环播放呢
思路就是建一个播放列表,然后通过js来控件.

第一种方法 (此方法最终行不通)
建立一个数组相当于播放列表alist(假设这是用户选择歌曲后的结果)

js
var num = 0
function Onload(){
var Exobud = document.getElementById(”Exobud”);
Exobud.URL = alist[num];
Exobud.controls.play();
num ++;
}
通过PlayStateChange监听播放状态 ,8表示播放结束
<script for=”Exobud” EVENT=”PlayStateChange(stats)”>
if(stats == 8 )
Exobud.URL = alist[num];
Exobud.controls.play();
//alert(Exobud.URL);
num ++
</script>
到此播放正常,当播放下一首歌的时候就定住了.非要手动去点播放.不知道是何原因?
在网上查,有一仁兄弟好像解决过这问题,说是放第二首歌的时候,仍然是在第一首歌的播放状态下,所以就一直是停的.
解决办法,就是每首歌只播放一次,但不知道改那里.播放器参数中每首歌是设的播放一次.
另一种办法就是加一个alert(Exobud.URL);这样就可以自动播放,但总弄个弹窗不好吧.
到现在还没弄明白是么回事.如有人知道请留言跟贴,帮我解决一哈.

第二种方法.现已解决.能正常使用. 思路就是用setTimeout()不停的循环,然后控件播放列表的索引得到值来改变URL

先建立一个播放列表
假设用户所选的歌曲参数已传过来
播放列表如下
<select name=”SongList” size=”5″ >
        OnDblClick=”player();”>
            <option value=”songs/001.mp3″>001</option>
            <option value=”songs/002.wma”>002</option>
            <option value=”songs/003.WMV”>003</option>
            <option value=”songs/004.mp3″>004</option>
            <option value=”songs/005.wma”>005</option>
</select>
同时设置几个按钮
<a href=”#” onclick=”javascript:play();”>on</a>
<a href=”#” onclick=”javascript:Last_OneOK();”>last</a>
<a href=”#” onclick=”javascript:Next_OneOK();”>next</a>

js
<script language=”JavaScript”>
        //var server=’http://localhost/music/’;
        var SongList = document.getElementById(”SongList”);
        var Exobud = document.getElementById(”Exobud”);
        var TotalSongs = SongList.options.length;
        function play()
        {
        SongList.options[0].selected=true;
        player();
        }
        function player(){
      if(SongList.selectedIndex < 0) alert(’系统错误，请选择您要播放的曲目！’);
      else{
      var url;
      url = SongList.options[SongList.selectedIndex].value;
      Exobud.URL=url;
      //alert(TotalSongs);
      Exobud.controls.play();
      showTLab();
      return;
      }
        }

        function showTLab(){
      if(Exobud.playState == 1)
      Next_OneOK();
      setTimeout(”showTLab()”, 1000);
        }

        function Next_OneOK(){
      if(SongList.selectedIndex >= 0){
      if(SongList.selectedIndex < TotalSongs-1){
       SongList.options[SongList.selectedIndex + 1].selected = true;
      player();
      }else{
       SongList.options[0].selected = true;
      player();
      }
       }
         }
         function Last_OneOK(){
      if((SongList.selectedIndex > 0) && (SongList.selectedIndex < TotalSongs)){
      SongList.options[SongList.selectedIndex - 1].selected = true;
      player();
         }
         }
    </script>

这样问题就解决了.
注音乐文件都是我本地的

附上media player的一些控制方法

player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暂停
player.controls.currentPosition 返回播放文件的当前时间位置（以秒为单位）
player.controls.currentPositionString 时间格式的字符串 “0:32″
player.currentMedia.duration 返回播放文件的总长度（以秒为单位）
player.currentMedia.durationString 时间格式的字符串 “4:34″
player.settings.volume 音量（0-100）
player.settings.balance 声道,通过它应该可以进行立体声、左声道、右声道的控制。但对应的取值尚不清楚。
player.settings.mute = s 静音（s取值为true和false）
player.closedCaption.CaptioningID 网页中出现字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器状态（ 3：正在播放,2：暂停1：已停止）

Tags: 播放器

Javascript | 评论:6 | 阅读:32158

Submitted by gouki on 2009, April 18, 12:16 PM

这个实现方式有点妖。
原文是用asp.net实现的。我也没有改，因为，json数据的获取在PHP中真是太简单了。拿到数据后json_encode一下就全有了。。

想看的就做个参考吧。我还是觉得妖
这里只是把主要的代码贴出来，不再进行过多的说明，重要的地方以注释的方式进行说明。

XML/HTML代码

<div id="pubDiv" style="background-position: #9999FF; font-size:12px; display:none; z-index:0; overflow:auto; position:absolute; border:#EDEDED 0px solid;background:#EDEDED;"></div>
<script type="text/javascript" language="javascript">
// 注意下面的等号右面，不能是“<%=BuildJson() %>”，因为JSon整体不能是字符串，同时最后也不能加分号：“;”
var strJson = <%=BuildJson() %>
function ShowBdzDiv() {
var dept = document.getElementById("<%=ddlDeptEdit.ClientID %>").value;
// 构建要下拉选择的内容
var strHtml = "<table border=0px cellpadding=0 cellspacing=0 width=120px><tr>";
for (var key in strJson[dept]) {
strHtml += "<tr><td onclick=SetBdz()>" + key + "</td></tr>";
}
strHtml += "</table>";
var oBdz = document.getElementById("<%=txtBdz.ClientID %>");
var oDiv = document.getElementById("pubDiv");
oDiv.innerHTML = strHtml;
// 设置显示的位置，并显示
oDiv.style.top = "99px";
oDiv.style.left = "100px";
oDiv.style.display = "block";
}
// 当点击选择一个内容时
function SetBdz() {
var oBdz = document.getElementById("<%=txtBdz.ClientID %>");
// 把选择内容设置到TextBox上，并隐藏下拉选择项
oBdz.value = event.srcElement.innerText;
HiddenDiv();
}
// 隐藏下拉选择项
function HiddenDiv() {
var oDiv = document.getElementById("pubDiv");
oDiv.style.display = "none";
}
</script>
。。。
<asp:TextBox ID="txtBdz" AutoCompleteType="Disabled" onfocus="ShowBdzDiv()" runat="server"></asp:TextBox>

这里要说明的是，这里只实现了下拉选择项的点击选择，不能使用键盘操作。

Tags: json

Javascript | 评论:0 | 阅读:17837

Submitted by gouki on 2009, April 17, 10:00 AM

JavaScript代码

1、获取编辑器中HTML内容
function getEditorHTMLContents(EditorName)
{
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.GetXHTML(true));
}
2、获取编辑器中文字内容（无html代码）
function getEditorTextContents(EditorName)
{
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.EditorDocument.body.innerText);
}
3、设置编辑器中内容
function SetEditorContents(EditorName, ContentStr)
{
var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
oEditor.SetHTML(ContentStr) ;
}

Yhustc说道：

function InsertHTML(html) {
var oEditor = FCKeditorAPI.GetInstance("editor") ;
if (oEditor.EditMode == FCK_EDITMODE_WYSIWYG ) {
oEditor.InsertHtml(html) ;
}else
alert( "FCK必须处于WYSIWYG模式!" ) ;
}

Tags: fck

Javascript | 评论:2 | 阅读:18935

Submitted by gouki on 2009, April 13, 1:19 PM

jQuery这种轻量级的框架大家使用的都比较多，1.3后效率据说又上升了不少，因此，开发基于jQuery的插件也就显得那么理所当然了。
一般来说，jQuery有两种插件模式，一种是：$.extends({}) ，另一种是：$.fn.extends({})
个人理解：前一种是属于全局性的调用，后一种是针对某个元件的绑定调用。这当然是简单的理解。但事实上，也基本上就是这么做的。

官方的例子也比较简单：

JavaScript代码

$.extend({
max: function(a, b) {
return a > b ? a : b;
},
min: function(a, b) {
return a > b ? b : a;
},
avg: function(a, b) {
return a / b;
}
});

看上去是不是容易？然后就可以直接调用了。 $.min(2,3) 返回2
一般情况下，为了在扩展中使用$，却又担心的页面使用了jQuery.noConflict()而取消了$指向jQuery的引用，则需要这样写

JavaScript代码

( function($){
$.fn.extend({
//....code in here
});
})(jQuery);

这样写不仅能够将$显式指向jQuery，而且将产生的变量封在function的作用范围内，不会污染window全局。
而基于$.fn.extends({})的扩展又如何开发呢？

在这里我引用Roby的译文：http://www.robysky.com/archives/171
英文原文：http://www.learningjquery.com/2007/10/a-plugin-development-pattern

我认为以下插件开发模式是必须应该掌握的：
1.在JQuery命名空间内声明一个特定的命名；
2.接收参数来控制插件的行为；
3.提供公有方法访问插件的配置项值；
4.提供公有方法来访问插件中其他的方法（如果可能的话）；
5.保证私有方法是私有的；
6.支持元数据插件；

下面，我将逐一讲述上面的内容，并在同时给出相关的简单插件开发代码。
1.在JQuery命名空间内声明一个特定的命名

这意味着开发的是一个单一命名的插件脚本，如果你的脚本包含多个插件或者有补充性质的插件，比如$.fn.doSomething() 和$.fn.undoSomething()，那你得声明多个命名了。但是总体来说，当开发一个插件时，我们应该努力做到用一个单一的命名来搞定整个插件。

在例子中，我们将声明一个名为“hilight”的插件。

JavaScript代码

$.fn.hilight = function() {
// Our plugin implementation code goes here.
};

我们可以这样调用：
$(’#myDiv’).hilight();
但是假如我们需要打破这种单一的命名和调用方式呢？有很多理由支持我们这么做：设计上的需要；更加简单和可读的配置；而且那样将更加符合OO的要求。

在没有给命名空间来到麻烦的前提下，将插件的部署打破成为多个函数的形式将是十分繁琐的。我们通过认识并利用JavaScript中 functions是最高层的对象，和其他对象一样，functions可以被赋予属性，前面我们已经将hilight命名声明在了JQuery的原型对象上，那么，其实，其他的我们想扩展的属性或对象都能够在hilight上进行声明。稍后将详细讲述此点。
2.接收参数来控制插件的行为；

来为我们的hilight插件添加指定前景和背景色的功能，我们需要在函数中允许一个object类型的选项设置。如下所展示的那样：

JavaScript代码

$.fn.hilight = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
};

现在，我们的插件可以这样来调用：

$(’#myDiv’).hilight({
foreground: ‘blue’
});
3.提供公有方法访问插件的配置项值；

上面的代码我们可以做一下改进，使得插件的默认值可以在插件之外被设置。这无疑是十分重要的，因为它使得插件用户可以使用最少的代码来修改插件配置，这其实是我们利用函数对象的开始。

JavaScript代码

// plugin definition
$.fn.hilight = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.hilight.defaults, options);
// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};

4.提供公有方法来访问插件中其他的方法（如果可能的话）

这里要讲的方法和前面的讲解一脉相承，用此方法来扩展你的插件（而且能够让其他人进行扩展）是件很有意思的事情。例如，在扩展hilight插件时，我们可以定义一个format方法用来格式化高亮显示的文本，原来的hilight插件和扩展了format方法的插件代码如下：

JavaScript代码

$.fn.hilight = function(options) {
// iterate and reformat each matched element
return this.each(function() {
var $this = $(this);
...
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// define our format function
$.fn.hilight.format = function(txt) {'
return '<strong>' + txt + '</strong>';
};

如前面所述，我们已经很容易的通过设置options对象的属性来允许一个回调函数来覆写默认的格式设置。在这里有另外一个非常棒的方法来个性化你的插件，上面展示的方法实际上就是通过暴露format方法，使其可以被重新定义。这种做法使得其他人可以采用他们自己的习惯和方式来重写你的插件，这意味着他们可以为你的插件写额外的扩展插件。
仔细考量一下前面我们用到的插件例子程序，你可能会想“我们究竟应该在什么时候使用这种插件方式来实现需求”的问题。一个来自现实应用中的插件便是“ Cycle Plugin”，它是一个支持多种滑动显示特效的插件，特效包括滚动、滑动和渐变等等。但是，实际上，并没有办法来定义每一个可能会用在滑动变幻上的特效。这就是这种扩展方式的有用之处。“ Cycle Plugin”插件暴露了”transitions”对象，这使得用户只需要按照如下方式便可以添加自己的变幻定义：
$.fn.cycle.transitions = {
…
};
这种技巧使得用户可以定义或者采用自己习惯的方式来扩展“ Cycle Plugin”。
5.保证私有方法是私有的；

上面提到的暴露插件中的公有方法的技巧使得插件能够被覆写，这将使插件变得十分灵活而强大，但至于哪一部分，那些属性和方法应该被暴露出来，你得小心了。一旦使其能够被外界访问到，你就得注意到任何调用参数和语义化的变动都可能使其丧失向前的兼容性。作为一般准则，如果不确定是否应该暴露某个属性或对象的话，那就最好别那样做。
那么我们应该怎样来定义多个方法而不至于使命名空间混乱并且保证不被暴露再外呢？这就是闭包的工作，为了便于演示，我们给插件加入了一个叫做 “debug”的功能，它用来记录firebug控制台所选择的网页元素数目。为了创建一个闭包，我们将整个功能的定义放入在一个function中了（有关这方面的知识，可参见JQuery手册）。

JavaScript代码

// create closure
(function($) {
// plugin definition
$.fn.hilight = function(options) {
debug(this);
...
};
// private function for debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
...
// end of closure
})(jQuery);

debug方法在这里是无法被在插件以外访问到的，因此，我们称之为它是插件私有的。
6.支持元数据插件；

根据你所写的插件的类型，为你的插件加入元数据插件的支持将使其变得更强大。就我个人来说，喜欢采用元数据插件的重要原因便是它可以让你使用定义之外的标签来覆写你的插件属性设置（这在创建demo和例子时十分有用），而且支持它十分的简单。
更新：这部分内容可以在本文的评论中展开讨论（既然有争议的话）

JavaScript代码

// plugin definition
$.fn.hilight = function(options) {
...
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() {
var $this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
...

改动部分的代码会做如下的事情：
*测试metadata插件是否可用
*如果可以，将用metadata扩展options对象
这被加入到jQuery.extend，作为其最后一个参数，所以它可以覆写任何其他参数设置。现在我们可以通过下面的方式控制其行为：

XML/HTML代码

<div class="hilight { background: 'red', foreground: 'white' }">Have a nice day!</div>
<div class="hilight { foreground: 'orange' }">Have a nice day!</div>
<div class="hilight { background: 'green' }">Have a nice day!</div>

而在调用方面，我们通过一行简单的代码就可以实现预期的效果：
$(’.hilight’).hilight();

将上面所述内容涉及到的代码放在一起，完整的例子程序代码如下：

JavaScript代码

//
// 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的插件开发加深了一定的了解了呢？
顺便提一下，yhustc在自己的博客上写了一个基于jQuery的软键盘插件，你是不是又可以根据上面的教程来写一个基于$.fn.extends的扩展呢？让yhustc的插件可以绑定在某个元件上？

Tags: jquery, 开发, 插件, yhustc

Javascript | 评论:2 | 阅读:24986

Records:305«‹43 44 45 46 474849 50 51 52 ›»

« 2024年11月 »