使用jQuery來建立Silverlight

iDotNetSpace發表於2009-03-13
jQuery

jQuery已經成為了VS2010內建支援的JavaScript指令碼框架了，小巧實用。這裡看看怎麼用jQuery來在頁面中建立一個Silverlight。（ 呵呵，有一種swfobject的感覺了 ）


jquery.silverlight.js

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gtjQuery.fn.extend({
    silverlight: function(opts) {
        _opts = jQuery.extend({
            background: 'white',
            minRuntimeVersion: '2.0.31005.0',
            autoUpgrade: true,
            windowless: false,
            width: '100%',
            height: '100%'

        }, opts);

        if (!_opts.source || _opts.source == '') throw new error('「source」屬性不能為空 ');

        var obj = $('').attr({
            data: 'data:application/x-silverlight-2,',
            type: 'application/x-silverlight-2',
            width: _opts.width,
            height: _opts.height
        });
        jQuery.each(_opts, function(name, value) {
            if (name == 'width' || name == 'height') return;

            obj.append(
                $('').attr({
                    name: name,
                    value: value
                })
            );
        });
        obj.append(
            $('').attr('href', 'http://go.microsoft.com/fwlink/?LinkID=124807').css('text-decoration', 'none').append(
                $("使用jQuery來建立Silverlight").attr({
                    src: 'http://go.microsoft.com/fwlink/?LinkId=108181',
                    alt: '立刻安裝 Microsoft Silverlight'
                }).css('border-style', 'none')
            )
        );
        $(this).append(obj);
    }
});

使用方法

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gtDOCTYPE 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>jQuery with Silverlighttitle>
    <script type="text/javascript" src="jquery-1.3.1.min.js">script>
    <script type="text/javascript" src="jquery.silverlight.js">script>   
    <script type="text/javascript">
           $(document).ready(function() {
            $("#silverlightControlHost").silverlight({
                source: 'SilverlightApplication.xap'
            });
        });
    script>   
    <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost {
        height: 100%;
    }
    style>  
head>

<body>
    <div id="silverlightControlHost">
    div>
body>
html>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-567168/，如需轉載，請註明出處，否則將追究法律責任。

相關文章