YUI button submitボタンの使い方

YUIのbuttonコンポーネントを使って、少しオシャレなsubmitボタンを簡単に作れます。

読み込みjsとcss

下記のcssとjsが必要です。

<!-- Core + Skin CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/button/assets/skins/sam/button.css">
<!-- OPTIONAL: Menu Stylesheet (required for creating buttons of type "menu" and "split") -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js"></script>

<!-- OPTIONAL: Menu and Container Core (required for creating buttons of type "menu" and "split") -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>

<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/button/button-beta-min.js"></script>


<!--aggregate file path for YUI Sam Skin CSS for UI controls-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/assets/skins/sam/skin.css">

htmlのタグ
サブミットボタンのhtmlを書きます。

<div id="submitbuttonsfrommarkup">
	<input type="submit" id="submitbutton1" name="submit" value="submit" />
</div>

bodyタグに yui-skin-sam を指定すること。

<body class="yui-skin-sam">

javascript

<script type="text/javascript">
YAHOO.example.init = function () {
	// "contentready" event handler for the "submitbuttonsfrommarkup" <fieldset>
	YAHOO.util.Event.onContentReady("submitbuttonsfrommarkup", function () {
	    // Create a Button using an existing <input> element as a data source
	    var oSubmitButton1 = new YAHOO.widget.Button("submitbutton1", { value: "submitbutton1value" });
	    });
}();
</script>

デモ
http://paranoid.dip.jp/dev/yahoo/yui/submit_button.html

参考
http://developer.yahoo.com/yui/button/

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12