Admin: 1 версия

2010-05-26T08:24:24Z

1 версия

в 18:52, 25 мая 2010

2010-05-25T18:52:56Z

Новая страница

== Add icon to button==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.addOnLoad(function( ) {
var bold = function( ) {alert("bold");}
var italic= function( ) {alert("italic");}
var underline = function( ) {alert("underline");}
var superscript = function( ) {alert("superscript");}
var subscript = function( ) {alert("subscript");}
dojo.query(".dijitEditorIcon").forEach(function(x) {
if (dojo.hasClass(x, "dijitEditorIconBold"))
dojo.connect(x.parentNode, "onclick", bold);
else if (dojo.hasClass(x, "dijitEditorIconItalic"))
dojo.connect(x.parentNode, "onclick", italic);
else if (dojo.hasClass(x, "dijitEditorIconUnderline"))
dojo.connect(x.parentNode, "onclick", underline);
else if (dojo.hasClass(x, "dijitEditorIconSubscript"))
dojo.connect(x.parentNode, "onclick", superscript);
else if (dojo.hasClass(x, "dijitEditorIconSuperscript"))
dojo.connect(x.parentNode, "onclick", subscript);
});
});
</script>
</head>
<body class="tundra">
<div dojoType="dijit.Toolbar" style="width:300px">
<button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconBold" ></button>
<button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconItalic" ></button>
<button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconUnderline" ></button>
<span dojoType="dijit.ToolbarSeparator"></span>
<button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconSubscript"></button>
<button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconSuperscript"></button>
</div>
</body>
</html></source>

== Cut, copy and paste icons==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.Toolbar">
<div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="true">Cut</div>
<div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="true">Copy</div>
<div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">Paste</div>
<span dojoType="dijit.ToolbarSeparator"></span>
<div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div>
</div>
</body>
</html></source>

== Italic icon==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");

function italic() { alert("Italic"); }
dojo.addOnLoad(function() {
dojo.connect(dojo.byId("toolbar1.italic"),"onclick",italic);
});
</script>
</head>
<body class="tundra">
<div id="toolbar1" dojoType="dijit.Toolbar">
<div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" iconClass="dijitEditorIcon dijitEditorIconItalic" showLabel="false">Italic</div>
<span dojoType="dijit.ToolbarSeparator"></span>
</div>
</body>
</html></source>

== Set icon class==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");

function createProgrammatically() {
var myDijit = new dijit.Toolbar({});
dojo.byId("my").appendChild(myDijit.domNode);
myDijit.addChild(new dijit.form.Button({
iconClass : "dijitEditorIcon dijitEditorIconCut",
showLabel : "true", label : "Cut"
}));
myDijit.addChild(new dijit.ToolbarSeparator({}));
myDijit.addChild(new dijit.form.ToggleButton({
iconClass : "dijitEditorIcon dijitEditorIconBold"
}));
myDijit.startup();
}
</script>
</head>
<body class="tundra" onLoad="createProgrammatically();">
<div id="my"> </div>
</body>
</html></source>

← Предыдущая	Версия 08:24, 26 мая 2010
(нет различий)

JavaScript Tutorial/Dojo toolkit/Icon - История изменений

Admin: 1 версия

в 18:52, 25 мая 2010