ソースファイルを表示
win/sample/winicon.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>アイコン一覧</title>
<link rel="stylesheet" charset="UTF-8" href="win.css" />
<script type="text/javascript" charset="UTF-8" src="win.js"></script>
<style>
body {
background: #e7f7e7;
}
</style>
</head>
<body>
<h1>アイコン一覧（win.css）</h1>
<h2>w-iconタグによるアイコン表示</h2>
<p>w-icon:hover
<w-btn><w-icon></w-icon></w-btn>
</p>
<p>w-icon.str1
<w-btn><w-icon class="str1" icon-str="あ" /></w-btn>
</p>
<p>w-icon.str2
<w-btn><w-icon class="str2" icon-str="ああ" /></w-btn>
</p>
<p>w-icon.str3
<w-btn><w-icon class="str3" icon-str="あああ" /></w-btn>
</p>
<p>w-icon.str2w
<w-btn><w-icon class="str2w" icon-str1="ああ" icon-str2="いい" /></w-btn>
</p>
<p>w-icon.str3w
<w-btn><w-icon class="str3w" icon-str1="あああ" icon-str2="いいい" /></w-btn>
</p>
<p>w-icon.menu
<w-btn><w-icon class="menu"></w-icon></w-btn>
</p>
<p>w-icon.maru
<w-btn><w-icon class="maru"></w-icon></w-btn>
</p>
<p>w-icon.camera
<w-btn><w-icon class="camera"></w-icon></w-btn>
</p>
<p>w-icon.pen
<w-btn><w-icon class="pen"></w-icon></w-btn>
</p>
<p>w-icon.navi
<w-btn><w-icon class="navi"></w-icon></w-btn>
</p>
<p>w-icon.addr
<w-btn><w-icon class="addr"></w-icon></w-btn>
</p>
<p>w-icon.gps
<w-btn><w-icon class="gps"></w-icon></w-btn>
</p>
<p>w-icon.layer
<w-btn><w-icon class="layer"></w-icon></w-btn>
</p>
<p>w-icon.cross
<w-btn><w-icon class="cross"></w-icon></w-btn>
</p>
<h2>win.jsのAPIによるアイコン表示</h2>
<div id="root"></div>
<style type="text/css">
#root { /* ルート要素 */
position: relative;
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript" charset="UTF-8">
let wMain = W.mainWin('wMain', 'root');
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'str1',
str: 'あ',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'str2',
str: 'ああ',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'str3',
str: 'あああ',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'str2w',
str1: 'ああ',
str2: 'いい',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'str3w',
str1: 'あああ',
str2: 'いいい',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'menu',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'maru',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'camera',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'pen',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'navi',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'addr',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'gps',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'layer',
func: function(e) {}
});
wMain.addBtn({ // ツールボックスメニュー処理
icon: 'cross',
func: function(e) {}
});
</script>
</body>
</html>