新的按钮widget与原来自己做的按钮

好久没做前端的东西，这两天又开始搞前端，然后要加个按钮，一边把原来拼好的html按钮复制过来，一边抱怨，jquery的icon真难用，当时 拼了半天才让图标和文字和按钮的大小协调起来，还好可以copy复用

然后就想到了好久没去看jqueryUI的官网了，去看看有什么新东 西，然后就看到了新的button...

 

jquery提供的方式

$("button").button({
            icons: {
                primary: 'ui-icon-gear',
            },
        });

<button>Button with icon on the left</button>

 

生成的html

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon" role="button" aria-disabled="false">
  <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
  <span class="ui-button-text">Button with icon on the left</span>
</button>

 然后应该还绑定了mouseover和mouseout事件

 

 

以前自己写html按钮

<div id="fromPlmConfirm" style="float:left;margin:0px 0px 0px 220px;width:80px;height:20px;cursor:pointer;display:inline" class="ui-state-default ui-corner-all" onmousemove="$(this).addClass('ui-state-hover');" onmouseout="$(this).removeClass('ui-state-hover');">
  <div class="ui-icon ui-icon-check" style="float:left;margin-top:2px;margin-left:8px;display:inline"></div>
  <div style="float:left;margin-top:3px"><strong>Confrim</strong></div>
</div>

 

比了比，我的html水平似乎还是不行啊...不过怎么说我的也是即贴即用，算是有点优势啦，哈哈

有空仿着jquery的button改进一下，还是自己的东西好用~毕竟可以少一些js运算开销