随笔：80 文章：2 评论：12 引用：0
博客园 首页 发新随笔
发新文章 联系 订阅订阅管理

2011年8月1日

tinymce 应用 二

原文地址：http://ssh-2009-126-com.javaeye.com/blog/599480

在源代码编辑器和所见即所得编辑器之间进行切换
Java代码
  1. <form method="post" action="somepage">   
  2.      <textarea name="content" style="width:100%">   
  3.      </textarea>   
  4.      <a href="#" onclick="tinyMCE.execCommand('mceToggleEditor',false,'content');">[Toggle WYSIWYG]</a>   
  5. </form>  


ToolBar enable and disable
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      theme : "advanced",   
  5.      mode : "textareas",   
  6.      plugins : "noneditable"  
  7. });   
  8. </script>   
  9.   
  10. <form method="post" action="somepage">   
  11.      <textarea name="content" style="width:100%">   
  12.          <p>Editable content.</p>   
  13.          <p class="mceNonEditable">Non editable content, can't be modified in IE or FF.</p>   
  14.          <p>Editable content.</p>   
  15.          <p class="mceNonEditable">Non editable content, can't be modified in IE or FF.</p>   
  16.      </textarea>   
  17. </form>  

编辑一个整个页面
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      theme : "advanced",   
  5.      mode : "textareas",   
  6.      plugins : "fullpage",   
  7.      theme_advanced_buttons3_add : "fullpage"  
  8. });   
  9. </script>   
  10.   
  11. <form method="post" action="somepage">   
  12.      <textarea name="content" style="width:100%">   
  13.      </textarea>   
  14. </form>  

Load on demand example
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. function setup() {   
  4.     tinyMCE.init({   
  5.        mode : "textareas",   
  6.        theme : "advanced",   
  7. }   
  8. </script>   
  9.   
  10. <form method="post" action="somepage">   
  11.      <textarea name="content" style="width:100%">   
  12.      </textarea>   
  13.      <a href="javascript:setup();">Load TinyMCE</a>   
  14. </form>  


启用GZIP的压缩进行加载
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce_gzip.js"></script>   
  2. <script type="text/javascript">   
  3. function setup() {   
  4.     tinyMCE_GZ.init({   
  5.        themes : "advanced",   
  6.          
  7.        languages : "en",   
  8.        disk_cache : true  
  9.     }, function() {   
  10.        tinyMCE.init({   
  11.           mode : "textareas",   
  12.           theme : "advanced",        
  13.        });   
  14.     });   
  15. }   
  16. </script>   
  17.   
  18. <form method="post" action="somepage">   
  19.      <textarea name="content" style="width:100%">   
  20.      </textarea>   
  21.      <a href="javascript:setup();">Load TinyMCE</a>   
  22. </form>  

Setup editor events example,单击时弹出警告窗
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "advanced",   
  6.      plugins : 'inlinepopups',   
  7.      setup : function(ed) {   
  8.         // Display an alert onclick   
  9.          ed.onClick.add(function(ed) {   
  10.              ed.windowManager.alert('User clicked the editor.');   
  11.          });   
  12.   
  13.         // Add a custom button   
  14.          ed.addButton('mybutton', {   
  15.              title : 'My button',   
  16.              image : 'img/example.gif',   
  17.              onclick : function() {   
  18.                  ed.selection.setContent('<STRONG>Hello world!</STRONG>');   
  19.              }   
  20.          });   
  21.      }   
  22. });   
  23. </script>   
  24.   
  25. <form method="post" action="somepage">   
  26.      <textarea name="content" style="width:100%">   
  27.      </textarea>   
  28. </form>  

多个实例共享一个漂浮的Toolbar
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "advanced",   
  6.   
  7.      theme_advanced_toolbar_location : "external",   
  8.   
  9. });   
  10. </script>   
  11.   
  12. <form method="post" action="somepage">   
  13.      <textarea name="content1" style="width:100%">   
  14.      </textarea>   
  15.   
  16.      <textarea name="content2" style="width:100%">   
  17.      </textarea>   
  18. </form> 
posted @ 2011-08-01 18:26 mustardpeanut 阅读(25) 评论(0) 编辑
 
tinymce 应用 三

原文地址：http://ssh-2009-126-com.javaeye.com/blog/599501

Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. // Creates a new plugin class and a custom listbox   
  4. tinymce.create('tinymce.plugins.ExamplePlugin', {   
  5.      createControl: function(n, cm) {   
  6.         switch (n) {   
  7.             case 'mylistbox':   
  8.                  var mlb = cm.createListBox('mylistbox', {   
  9.                       title : 'My list box',   
  10.                       onselect : function(v) {   
  11.                           tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);   
  12.                       }   
  13.                  });   
  14.   
  15.                 // Add some values to the list box   
  16.                  mlb.add('Some item 1', 'val1');   
  17.                  mlb.add('some item 2', 'val2');   
  18.                  mlb.add('some item 3', 'val3');   
  19.   
  20.                 // Return the new listbox instance   
  21.                 return mlb;   
  22.   
  23.             case 'mysplitbutton':   
  24.                  var c = cm.createSplitButton('mysplitbutton', {   
  25.                      title : 'My split button',   
  26.                      image : 'img/example.gif',   
  27.                      onclick : function() {   
  28.                          tinyMCE.activeEditor.windowManager.alert('Button was clicked.');   
  29.                      }   
  30.                  });   
  31.   
  32.                  c.onRenderMenu.add(function(c, m) {   
  33.                      m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);   
  34.   
  35.                      m.add({title : 'Some item 1', onclick : function() {   
  36.                          tinyMCE.activeEditor.windowManager.alert('Some   item 1 was clicked.');   
  37.                      }});   
  38.   
  39.                      m.add({title : 'Some item 2', onclick : function() {   
  40.                          tinyMCE.activeEditor.windowManager.alert('Some   item 2 was clicked.');   
  41.                      }});   
  42.                  });   
  43.   
  44.                 // Return the new splitbutton instance   
  45.                 return c;   
  46.          }   
  47.   
  48.         return null;   
  49.      }   
  50. });   
  51.   
  52. // Register plugin with a short name   
  53. tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);   
  54.   
  55. // Initialize TinyMCE with the new plugin and listbox   
  56. tinyMCE.init({   
  57.      plugins : '-example', // - tells TinyMCE to skip the loading of the plugin   
  58.      mode : "textareas",   
  59.      theme : "advanced",   
  60.        
  61. });   
  62. </script>   
  63.   
  64. <form method="post" action="somepage">   
  65.      <textarea name="content" style="width:100%">   
  66.      </textarea>   
  67. </form>  

Menu button example

JavaScipt代码

  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. // Creates a new plugin class and a custom listbox   
  4. tinymce.create('tinymce.plugins.ExamplePlugin', {   
  5.      createControl: function(n, cm) {   
  6.         switch (n) {   
  7.             case 'mymenubutton':   
  8.                  var c = cm.createMenuButton('mymenubutton', {   
  9.                      title : 'My menu button',   
  10.                      image : 'img/example.gif',   
  11.                      icons : false  
  12.                  });   
  13.   
  14.                  c.onRenderMenu.add(function(c, m) {   
  15.                      var sub;   
  16.   
  17.                      m.add({title : 'Some item 1', onclick : function() {   
  18.                          tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 1');   
  19.                      }});   
  20.   
  21.                      m.add({title : 'Some item 2', onclick : function() {   
  22.                          tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2');   
  23.                      }});   
  24.   
  25.                      sub = m.addMenu({title : 'Some item 3'});   
  26.   
  27.                      sub.add({title : 'Some item 3.1', onclick : function() {   
  28.                          tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.1');   
  29.                      }});   
  30.   
  31.                      sub.add({title : 'Some item 3.2', onclick : function() {   
  32.                          tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.2');   
  33.                      }});   
  34.                  });   
  35.   
  36.                 // Return the new menu button instance   
  37.                 return c;   
  38.          }   
  39.   
  40.         return null;   
  41.      }   
  42. });   
  43.   
  44. // Register plugin with a short name   
  45. tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);   
  46.   
  47. // Initialize TinyMCE with the new plugin and menu button   
  48. tinyMCE.init({   
  49.      plugins : '-example', // - tells TinyMCE to skip the loading of the plugin   
  50.      mode : "textareas",   
  51.      theme : "advanced",   
  52.      theme_advanced_buttons1 : "mymenubutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",   
  53.      theme_advanced_buttons2 : "",   
  54.      theme_advanced_buttons3 : "",   
  55.      theme_advanced_toolbar_location : "top",   
  56.      theme_advanced_toolbar_align : "left",   
  57.      theme_advanced_statusbar_location : "bottom"  
  58. });   
  59. </script>   
  60.   
  61. <form method="post" action="somepage">   
  62.      <textarea name="content" style="width:100%">   
  63.      </textarea>   
  64. </form> 
posted @ 2011-08-01 18:26 mustardpeanut 阅读(30) 评论(0) 编辑
 
tinymce 应用 一

tinymce 应用 一

原文地址：http://ssh-2009-126-com.javaeye.com/blog/599447

添加去除Tool Bar

Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "advanced"  
  6. });   
  7.   
  8. function toggleEditor(id) {   
  9.     if (!tinyMCE.get(id))   
  10.          tinyMCE.execCommand('mceAddControl', false, id);   
  11.     else  
  12.          tinyMCE.execCommand('mceRemoveControl', false, id);   
  13. }   
  14. </script>   
  15.   
  16. <form method="post" action="somepage">   
  17.      <textarea name="content" style="width:100%">   
  18.      </textarea>   
  19. </form>   
  20. <a href="javascript:toggleEditor('content');">Add/Remove editor</a>  


extended_valid_elements and invalid_elements
Java代码
  1. <script type="text/javascript">   
  2. tinyMCE.init({   
  3.      mode : "textareas",   
  4.      theme : "simple",   
  5.      extended_valid_elements : "img[class=myclass|!src|border:0|alt|title|width|height]",   
  6.      invalid_elements : "strong,b,em,i"  
  7. });   
  8. </script>  


editor_selector and editor_deselector
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "simple",   
  6.      editor_selector : "mceEditor",   
  7.      editor_deselector : "mceNoEditor"  
  8. });   
  9. </script>   
  10.   
  11. <form method="post" action="somepage">   
  12.      <textarea id="content1" name="content1" class="mceEditor" cols="85" rows="10">This will be a editor, since it has a selector class.</textarea>   
  13.      <textarea id="content2" name="content2" class="mceEditor" cols="85" rows="10">This will be a editor, since it has a selector class.</textarea>   
  14.      <textarea id="content3" name="content3" class="mceNoEditor" cols="85" rows="10">This is not a editor since it has a deselector class.</textarea>   
  15. </form>  


Ajax load/save
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "advanced"  
  6. });   
  7.   
  8. function ajaxLoad() {   
  9.      var ed = tinyMCE.get('content');   
  10.   
  11.     // Do you ajax call here, window.setTimeout fakes ajax call   
  12.      ed.setProgressState(1); // Show progress   
  13.      window.setTimeout(function() {   
  14.          ed.setProgressState(0); // Hide progress   
  15.          ed.setContent('HTML content that got passed from server.');   
  16.      }, 3000);   
  17. }   
  18.   
  19. function ajaxSave() {   
  20.      var ed = tinyMCE.get('content');   
  21.   
  22.     // Do you ajax call here, window.setTimeout fakes ajax call   
  23.      ed.setProgressState(1); // Show progress   
  24.      window.setTimeout(function() {   
  25.          ed.setProgressState(0); // Hide progress   
  26.          alert(ed.getContent());   
  27.      }, 3000);   
  28. }   
  29. </script>   
  30.   
  31. <form method="post" action="somepage">   
  32.      <textarea name="content" style="width:100%">   
  33.      </textarea>   
  34. </form>  

readonly
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "advanced",   
  6.      readonly : true  
  7. });   
  8. </script>   
  9.   
  10. <form method="post" action="somepage">   
  11.      <textarea name="content" style="width:100%">   
  12.      </textarea>   
  13. </form>  

URL config example
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "exact",   
  5.      elements : 'absurls',   
  6.      theme : "advanced",   
  7.      plugins : 'advlink,advimage',   
  8.      relative_urls : false  
  9. });   
  10.   
  11. tinyMCE.init({   
  12.      mode : "exact",   
  13.      elements : 'abshosturls',   
  14.      theme : "advanced",   
  15.      plugins : 'advlink,advimage',   
  16.      relative_urls : false,   
  17.      remove_script_host : false  
  18. });   
  19.   
  20. tinyMCE.init({   
  21.      mode : "exact",   
  22.      elements : 'relurls',   
  23.      theme : "advanced",   
  24.      plugins : 'advlink,advimage',   
  25.      relative_urls : true // Default value   
  26. });   
  27.   
  28. tinyMCE.init({   
  29.      mode : "exact",   
  30.      elements : 'relurlstopage',   
  31.      theme : "advanced",   
  32.      plugins : 'advlink,advimage',   
  33.      relative_urls : true, // Default value   
  34.      document_base_url : 'http://tinymce.moxiecode.com/'  
  35. });   
  36.   
  37. tinyMCE.init({   
  38.      mode : "exact",   
  39.      elements : 'nourlconvert',   
  40.      theme : "advanced",   
  41.      plugins : 'advlink,advimage',   
  42.      convert_urls : false  
  43. });   
  44. </script>   
  45.   
  46. <form method="post" action="somepage">   
  47.      <h2>TinyMCE with absolute URLs on links and images</h2>   
  48.      <textarea id="absurls" name="absurls" cols="85" rows="10"></textarea>   
  49.   
  50.      <h2>TinyMCE with absolute URLs and including domain on links and images</h2>   
  51.      <textarea id="abshosturls" name="abshosturls" cols="85" rows="10"></textarea>   
  52.   
  53.      <h2>TinyMCE with relative URLs on links and images</h2>   
  54.      <textarea id="relurls" name="relurls" cols="85" rows="10"></textarea>   
  55.   
  56.      <h2>TinyMCE with relative URLs on links and images to a specific page</h2>   
  57.      <textarea id="relurlstopage" name="relurlstopage" cols="85" rows="10"></textarea>   
  58.   
  59.      <h2>TinyMCE with no url convertion</h2>   
  60.      <textarea id="nourlconvert" name="nourlconvert" cols="85" rows="10"></textarea>   
  61. </form>  

SOME JQUERY API
Java代码
  1. <form method="post" action="somepage">   
  2.      <textarea id="content" name="content" class="tinymce" style="width:100%">   
  3.      </textarea>   
  4.   
  5.      <!-- Some integration calls -->   
  6.      <a href="javascript:;" onmousedown="$('#content').tinymce().show();">[Show]</a>   
  7.      <a href="javascript:;" onmousedown="$('#content').tinymce().hide();">[Hide]</a>   
  8.      <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('Bold');">[Bold]</a>   
  9.      <a href="javascript:;" onmousedown="alert($('#content').html());">[Get contents]</a>   
  10.      <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent());">[Get selected HTML]</a>   
  11.      <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a>   
  12.      <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getNode().nodeName);">[Get selected element]</a>   
  13.      <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>   
  14.      <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>   
  15. </form> 
posted @ 2011-08-01 18:25 mustardpeanut 阅读(45) 评论(0) 编辑
 

2011年7月7日

HTML标签的overflow处理
使用CSS来修饰滚动条  
1．overflow内容溢出时的设置  

overflow-x水平方向内容溢出时的设置  
overflow-y垂直方向内容溢出时的设置  
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。  

2．scrollbar-3d-light-color立体滚动条亮边的颜色  
scrollbar-arrow-color上下按钮上三角箭头的颜色  
scrollbar-base-color滚动条的基本颜色  
scrollbar-dark-shadow-color立体滚动条强阴影的颜色  
scrollbar-face-color立体滚动条凸出部分的颜色  
scrollbar-highlight-color滚动条空白部分的颜色  
scrollbar-shadow-color立体滚动条阴影的颜色  
以上七个属性设置的值都是颜色值，可以使用样式表定义的各种表达方式。  

使用以上的样式定义内容，我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式，第一组样式属性用于设定被设定对象是否显示滚动条，第二组样式属性则用于设置滚动条的颜色，要注意的本文涉及的样式属性都是ie才能支持的，第二组的样式属性只有ie5.5版本才能支持，所以请大家在调试的时候注意。  

我们通过几个实例来讲解上述的样式属性：  

1.让浏览器窗口永远都不出现滚动条  
没有水平滚动条  
<body   style= "overflow-x:hidden ">  
没有垂直滚动条  
<body   style= "overflow-y:hidden ">  
没有滚动条  
<body   style= "overflow-x:hidden;overflow-y:hidden "> 或 <body   style= "overflow:hidden ">  

2.设定多行文本框的滚动条  
没有水平滚动条  
<textarea   style= "overflow-x:hidden "> </textarea>  
没有垂直滚动条  
<textarea   style= "overflow-y:hidden "> </textarea>  
没有滚动条  
<textarea   style= "overflow-x:hidden;overflow-y:hidden "> </textarea>  
或 <textarea   style= "overflow:hidden "> </textarea>  

3.设定窗口滚动条的颜色  
设置窗口滚动条的颜色为红色 <body   style= "scrollbar-base-color:red ">  
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。  
加上一点特别的效果：  
<body   style= "scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon ">  

4.设定其他元素时，基本上一样，你最好是在样式表文件中定义好一个类，这样你就可以重复使用了。  
.coolscrollbar  
{  
scrollbar-arrow-color:yellow;  
scrollbar-base-color:lightsalmon;  
}  
将以上语句加入到样式表文件中或html头部的 <style> </style> 当中，然后使用  
<textarea   class= "coolscrollbar "> </textarea>
posted @ 2011-07-07 15:12 mustardpeanut 阅读(77) 评论(0) 编辑
 

2011年7月5日

用CSS控制IE下中英文字体显示对齐
原文地址
http://www.bitscn.com/school/HTMLCSS/200808/150107.html
这是一个不太引人注意的问题，在IE浏览器下面中英文字体混排的时候，常常会出现不对齐的情况。
 如图1所示，在IE下当一行文字同时有英文跟中文的时候，链接下划线就会发生折行，也就表示这个时候中英文是没有对齐的！（FIREFOX不受此问题影响）
那么疑惑又来了，是什么导致了中英文偏差呢？！解决办法又是什么呢？！于是经过我测试发现两种情况（当然有可能有更多导致的情况。你们可以自己去尝 试），当中英文对象的相邻元素拥有vertical-align属性设置（比如前面一张小图片，或者文本框，我们需要把他们垂直对齐，一般都会给图片，文 本框（其他任意内联块元素）设置vertical-align:middle;来实现）的时候，那么就会影响到中英文的不对齐。     还有一种情况就是父元素（表格除外）拥有vertical-align属性设置的时候，里面的子元素中英文也会对不齐。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>
<style type="text/css">
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
</style>
</head>
<body>
<div style="vertical-align:middle;">
<a href="">为什么我老是对不齐呢？why??</a>
</div>
</body>
</html>
怎么解决这个问题呢？！

先说第一种，就是临近元素的vertical-middle导致的无法对齐的偏差问题解决方案：

给中英文对象加一个zoom:1触发它的haslayout,通过研究发现一旦它有了haslayout之后，中英文就不会对不齐。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>
<style type="text/css">
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
</style>
</head>
<body>
<div>
<a href="" style="zoom:1;">为什么我老是对不齐呢？why??</a>
</div>
</body>
</html>

 第二种情况就是父元素的vertical-middle导致的无法对齐的偏差问题解决方案：     给中英文对象加句vertical-align:baseline就可以解决

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>
<style type="text/css">
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
</style>
</head>
<body>
<div style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">为什么我老是对不齐呢？why??</a>
</div>
</body>
</html>

 但是我们可以看到，下划线好像贴的过紧，这个时候我们依然还需要给它加句zoom:1;触发它的hasLayout来避免过紧贴合！

<a href="" style="zoom:1;"vertical-align:baseline;">为什么我老是对不齐呢？why??</a>

 

 如果您碰到其他情况的中英文对不齐的情况，那么也可以尝试使用上述两种方法来解决。当然最保险最有效的莫过于就是直接中英文都统一使用宋体

 

 

 

posted @ 2011-07-05 11:40 mustardpeanut 阅读(83) 评论(0) 编辑
 

2011年4月27日

网上遇到的两个php写的爬虫程序，感觉不错，收集进来，一块瞅瞅
网上遇到的两个php写的爬虫程序，感觉不错，收集进来，一块瞅瞅：
sphider：（http://www.sphider.eu/）
Sphider is a popular open-source web spider and search engine. It includes an automated crawler, which can follow links found on a site, and an indexer which builds an index of all the search terms found in the pages. It is written in PHP and uses MySQL as its back end database (requires version 4 or above for both).
phpdig：（http://www.phpdig.net/）
PhpDig is a web spider and search engine written in PHP, using a MySQL database and flat file support. PhpDig builds a glossary with words found in indexed pages. On a search query, it displays a result page containing the search keys, ranked by occurrence.
posted @ 2011-04-27 11:44 mustardpeanut 阅读(345) 评论(0) 编辑
 

2011年4月14日

jCryption – Javascript HTML-Form Encryption Plugin
http://www.webappers.com/category/security/
posted @ 2011-04-14 14:20 mustardpeanut 阅读(21) 评论(0) 编辑
 

2011年4月12日

php DES
摘要: 数据加密标准（DES，Data Encryption Standard）是一种使用密钥加密的块密码，1976年被美国联邦政府的国家标准局确定为联邦资料处理标准（FIPS），随后在国际上广泛流传开来。它基于使用56位密钥的对称算法。这个算法因为包含一些机密设计元素，相对短的密钥长度以及被怀疑内含美国国家安全局（NSA）的后门而在开始时是有争议的，因此DES因此受到了强烈的学院派式的审查，并以此推动了现代的块密码及其密码分析的发展。DES现在已经不被视为一种安全的加密算法，主要因为它使用的56位密钥过短。1999年1月，distributed.net与电子前哨基金会合作，在22小时15分钟内即公开阅读全文
posted @ 2011-04-12 10:24 mustardpeanut 阅读(61) 评论(0) 编辑
 

2011年4月7日

复制功能
摘要: <html><head><scripttype="text/javascript">functioncopyCode(id){vartestCode=document.getElementById(id).value;if(copy2Clipboard(testCode)!=false){alert("生成的代码已经复制到粘贴板，你可以使用Ctrl+V贴到需要的地方去了哦！");}}copy2Clipboard=function(txt){if(window.clipboardData){window.clipboar阅读全文
posted @ 2011-04-07 10:23 mustardpeanut 阅读(25) 评论(0) 编辑
 

2011年2月25日

JQuery UI Layout
摘要: 原文地址http://idream.javaeye.com/blog/770887 做一个美观点的后台页面，考虑使用EXTJs。可考虑到协议的问题，最终还是放弃了，继续使用jQuery吧。传统的后台页面布 局是表格套表格，加上freamset已经ifream，当然也可以做到美观，可那是一个乱啊。下面介绍一个jQuery的插件，目前除了官方的英文文 档，还没有发现可用的中文说明。用我极差的文笔在这里发表一下，希望大家不要介意。只是把自己的收获与大家分享一下。废话不多说，上正题！ 首先，这个插件叫做：jQuery UI.Layout Plug-in 官方站点：http://layout.jquer阅读全文
posted @ 2011-02-25 14:19 mustardpeanut 阅读(723) 评论(1) 编辑
 
仅列出标题  下一页
CALENDER
<2012年2月>
日一二三四五六
2930311234
567891011
12131415161718
19202122232425
26272829123
45678910

公告

昵称：mustardpeanut
园龄：3年
粉丝：0
关注：0

搜索

 
 

常用链接

我的标签

随笔分类

随笔档案

文章分类

colleagues' blog

最新评论

阅读排行榜

评论排行榜

推荐排行榜


Powered By: 博客园
模板提供：沪江博客