The framework code for the plugin:
;(function ($) {
$.fn.extend ({//$.fn.extend means to create an object-level plug- in
"Border": function (value) {
Write the plugin code here
}
});
}) (jquery)Html:
<! DOCTYPEHtml>
<Html>
<Head>
<Metacharset="Utf-8"/>
<ScriptSrc="Js/jquery-2.2.2.min.js" ></Script>
<ScriptSrc="Jquery.border.js" ></Script>
<ScriptType="Text/javascript" >
$(function () {
$("#test").Border ({
Width:"5px",
"Line":"Dotted",
Color:"Blue"
}).css"Background","Green");
});
</Script>
<StyleType="Text/css" >
Body {
Margin20px
}
#test {
Font-size:9Pt
Width300px
Height50PX;
line-height: 50px ;
font-weight: bold;
color: snow;
padding-left: 20PX;
}
</STYLE>
</HEAD>
<< Span style= "color: #e3e3ff;" >body>
<div id= "test" > This example demonstrates how to use a custom object-level plug-in </DIV>
</BODY>
</HTML>
Jquery.border.js:
;(function ($) {
$.fn.Extend ({
//Add an instance-level border plugin for jquery
"Border": Function (options) {
//Set Properties
Options= $.Extend ({
width: "1px",
Line: "SOLID",
Color: "#090"
}, options);
This .CSS ("Border",Options.width+ "'+ options.line Span style= "color: #f92672;" >+ " options.color);
//set style
return this;
"
< Span style= "color: #e6db74;" >< Span style= "color: #f92672;" >< Span style= "color: #75715e;" >
Result
Object-level plug-in development
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
