2015-01-19 2 views
0

Я новичок в dojo, и я пытаюсь создать кнопку с изображением, но изображение не отображается, кроме того, когда один нажимает кнопку, он правильно показывает «привет», оповещения.очень простой dojo: кнопка не отображается значок

изображение «zoom_in.png» находится в том же каталоге с html. И firebug не показывает никаких ошибок или предупреждений.

Обновление. благодаря ред, я сумел получить его работу с помощью декларативного подхода

<!DOCTYPE html> 
<html > 
<head> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css"> 
    <script>dojoConfig = {parseOnLoad: true}</script> 
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>  
    <script>require(["dojo/parser", "dijit/form/Button"]);</script> 

    <style> 
    .zoom_in_icon { 
    background-image: url('zoom_in.png'); 
    height: 25px; 
    width: 25px; 
    text-align: center; 
    background-repeat: no-repeat; 
    } 
    </style>  
</head> 

<body class="claro"> 
    <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button"> 
    <script type="dojo/on" data-dojo-event="click" data-dojo-args="evt"> 
     require(["dojo/dom"], function(dom){ 
      alert("Thank you! "); 
     }); 
    </script> 
</button> 
<div id="result2"></div> 
</body> 
</html> 

Однако программно, проблема сохраняется

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Button</title> 

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script> 

<style> 
.zoom_in_icon { 
    background-image: url('zoom_in.png'); 
    height: 250px; 
    width: 250px; 
    text-align: center; 
    background-repeat: no-repeat; 
} 
</style> 

<script> 
require([ 
"dijit/form/Button", 
"dojo/domReady!" 
], 
function(Button) {  
    new Button({ 
    title: 'Zoom in', iconClass:'zoom_in_icon', 
    onClick: function() { alert("hi"); }}, "zoom_in").startup(); 
}); 
</script> 
</head> 

<body> 
    <button id="zoom_in" type="button"></button> 
</body> 
</html> 

благодаря

+0

Попробуйте добавить до того <\div> –

+0

код не имеют див, я полагаю, вы имеете в виду, не работает. спасибо в любом случае –

+0

в jsfiddle после <\button> есть <\div>. Я имею в виду между ними –

ответ

1

Если вы хотите создать кнопку программно вам нужно для вызова startup() на новой кнопке, и вам не нужен тип data-dojo-type = «dijit/form/Button» или синтаксический разбор в html, если вы хотите его декларативно создать, вам не нужно новая кнопка, но вам нужно установить значок в html. Смотрите Programatic примера здесь: http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html

+0

спасибо за подсказку, но это не сработало. –

+0

Правильно ли указан URL? Вы видите, что zoom_in.png загружается? И в каком направлении вы хотите идти программным или декларативным? – edchat

+0

Вот jsfiddle для программного: http://jsfiddle.net/edchat/dox42qye/2/ – edchat