稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚

  [索引页]
[源码下载]

稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js,Silverlight.supportedUserAgent.js,自定义启动界面,响应鼠标滚轮事件

作者： webabcd
介绍
Silverlight 2.0 提示和技巧系列

• Silverlight.js - 一些 js 帮助函数，用于嵌为入 Silverlight 插件以及自定义安装体验等提供帮助
• Silverlight.supportedUserAgent.js - 就一个函数，用于判断 Silverlight 是否支持用户的浏览器
• 自定义启动界面 - 三个参数的综合应用：splashScreenSource,onSourceDownloadProgressChanged,onSourceDownloadComplete 
• 响应鼠标滚轮事件 - 响应并处理鼠标的滚轮事件

在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html  
示例
1、Silverlight.js 和 Silverlight.supportedUserAgent.js 的常用函数的演示和说明
SilverlightDotJsDemo.html

<!--

详解 Silverlight.js 

Silverlight.js - 一些 js 帮助函数，用于嵌为入 Silverlight 插件以及自定义安装体验等提供帮助，其最新版本在如下地址下载

http://code.msdn.microsoft.com/silverlightjs

Silverlight.supportedUserAgent.js - 就一个函数，用于判断 Silverlight 是否支持用户的浏览器，其最新版本在如下地址下载

http://code.msdn.microsoft.com/SLsupportedUA

-->

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >

< head >

     < title > Silverlight.js </ title >

     < script  type ="text/javascript"  src ="../Silverlight.js" ></ script >

     < script  src ="../Silverlight.supportedUserAgent.js"  type ="text/javascript" ></ script >

</ head >

< body >

     < div  id ="container" >

         < a  href ="http://go.microsoft.com/fwlink/?LinkID=124807"  style ="text-decoration: none;" >

             < img  src ="http://go.microsoft.com/fwlink/?LinkId=108181"  alt ="Get Microsoft Silverlight"

                style ="border-style: none"   />

         </ a >

     </ div >

     < script  type ="text/javascript" >

        // Silverlight.createObject() - 生成一个嵌入了 Silverlight 插件的 object 元素

        Silverlight.createObject(

            "../ClientBin/Silverlight20.xap,  .xap 的地址            document.getElementById('container),245)"> 包含此 object 元素的父元素            slPlugin object 元素的 id

            {

                width: 100%

                height: 

                minRuntimeVersion: 2.0.31005.0

            } Silverlight 插件的属性数组

{

                onLoad: onslload,

                onError: onSLError,

                onSourceDownloadComplete: onSourceDownloadComplete

            } Silverlight 插件的事件处理程序数组key1=value1,key2=value2 为 Silverlight 程序传递初始化参数(key=value的形式)。用“,”分隔myContext  上下文信息，可以在插件的 onLoad 事件中获取        );

        function onslload(plugin, userContext, sender) {

            alert(plugin.id +  -  userContext  sender.toString());

        }

         onSLError(sender, args) {

             args - Sys.UI.Silverlight.ErrorEventArgs 类型             ErrorEventArgs.errorType - 错误类型 ErrorEventArgs.errorMessage - 错误信息 ErrorEventArgs.errorCode - 错误代码

             程序 throw 出的异常可以在此处捕获到            alert(args.errorType \n args.errorMessage  args.errorCode);

        }

         onSourceDownloadComplete(sender,245)">{

            alert(SourceDownloadComplete);

        }

         Silverlight.createObjectEx(params) - 将所有参数放入一个数组中传入，其内部会解析这个数组中的参数，然后调用 Silverlight.createObject()

         Silverlight.default_error_handler = function (sender, args){} - onError 事件的默认处理程序，不需要的话可以将其置为 null            

     </ script >

     < script  type ="text/javascript" >

        window.onload = () {

             getSilverlight() - 尝试下载指定的版本，如果指定空字符串 "" 则为尝试下载最新版本 Silverlight.getSilverlight("2.0.31005.0"); isInstalled() - 判断是否安装了指定的 Silverlight 版本            alert(Silverlight.isInstalled());

             Silverlight.onSilverlightInstalled - 使用 Silverlight.js 时，如果客户端没有安装 Silverlight 插件，则会自动安装，然后调用此方法以刷新浏览器，可以重写此方法以自定义行为（比如在此通过 createObject() 来使新安装的插件生效，而无需刷新）。注意：如果是 Silverlight 升级，则不会调用此方法，必须重启浏览器（只刷新是不行的） supportedUserAgent(version, userAgent) - 判断 Silverlight 是否支持用户的浏览器，省略 userAgent 则为当前浏览器            alert(Silverlight.supportedUserAgent(2.0));

        }

    

     </ script >

</ body >

</ html >

2、自定义 Silverlight 程序的启动界面，并显示加载进度
启动界面的 xaml 文件
SplashScreen.xaml

< Grid  xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  

      xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

      Background ="Bisque"

>

     < StackPanel  Orientation ="Horizontal"  HorizontalAlignment ="Center"  VerticalAlignment ="Center" >

         < TextBlock  Text ="Loading

"  Margin ="3"   />

         < TextBlock  x:Name ="percent"  Text ="0%"  Margin ="3"   />

     </ StackPanel >

</ Grid >

Silverlight 程序全部加载完成前，显示启动界面并显示加载进度
SplashScreen.html

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >

< head >

     < title > SplashScreen </ title >

     < style  type ="text/css" >

        html, body

        {

            height: 100%;

            overflow auto

        }

        body

        

            padding 0

            margin

        #silverlightControlHost

        

     </ style >

</ head >

< body >

     < div  id ="silverlightControlHost" >

         < object  id ="xaml1"  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"

            width ="100%"  height ="100%" >

             < param  name ="source"  value ="../ClientBin/Silverlight20.xap"   />

            

             <!-- 下载 source 指定的 xap 的过程中所显示的 xaml 的地址 -->

             < param  name ="splashScreenSource"  value ="SplashScreen.xaml"   />

            

             <!-- 下载 source 指定的 xap 的过程中所持续调用的事件 -->

             < param  name ="onSourceDownloadProgressChanged"  value ="onSourceDownloadProgressChanged"   />

            

             <!-- souce 指定的 xap 被完全下载后所触发的事件 -->

             < param  name ="onSourceDownloadComplete"  value ="onSourceDownloadComplete"   />

         </ object >

         < iframe  style ='visibility:  hidden; height: 0; width: 0; border: 0px' ></ iframe >

     </ div >

     < script  type ="text/javascript" >

    

         onSourceDownloadProgressChanged(sender,245)"> progress 属性 - 下载进度（0 - 1 之间）            sender.findName(percent).Text  Math.round(args.progress *10000) /100%;            

        }

        {

            sender.findName(;

        }

     </ script >

</ body >

</ html >