Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <title>press s</title>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
​
</head>
<body>
  <div id='search' data-content-container='#text'>
    <li class='spacer'></li>
    <input class='content' type="text">
    <div class='items'>
    <li class='spacer'></li>
      <button class='start item'>start</button>
      <button class='next item'>next</button>
      <button class='prev item'>prev</button>
      <button class='clear item'>x</button>
    </div>
  </div>
  <p id='text'> Opera Turbo 是個免費的服務，它能讓你在較慢速度下的網路環境中，還能保有高速的瀏覽經驗。在理想情況下，它能讓撥接上網時的瀏覽速度近似於寬頻上網。在網路速度不穩，或是你不確定網路環境是哪一種的時候，選擇「自動」能讓 Opera 自己決定要不要開啟 Opera Turbo。
請參考介紹影片 Speed up slow connections with Opera Turbo （以 Opera Turbo 為較慢的網路連線加速）。
我該如何啟動 Opera Turbo？
​
要使用 Opera Turbo，請在左下角找到 Opera Turbo 的圖示 （它位於狀態列的左側）。將滑鼠游標移到圖示上，你會看到 "Opera Turbo 是關閉的"，在圖示上按一下就可以啟動 Opera Turbo（圖示會變成綠色的 ）。每次頁面載入時，關於加速的資訊就會出現在這裡。
我該如何關閉 Opera Turbo？
​
要關閉 Opera Turbo，請在左下角找到 Opera Turbo 圖示，並在圖示上按一下就可以關閉 Opera Turbo。如果你不想一直把它開開關關，你可以把 設定 改成 "自動"。
我該如何更改設定？
​
要設定 Opera Turbo，請在圖示右邊的小三角形上按一下，以開啟選單，並選 "設定 Opera Turbo"，這邊會出現三個選項： </p>
</body>
</html>
 
.highlight {
  background:yellow;
}
.highlight:focus {
  background:red;
}
#search *{
  vertical-align:middle;
}
#search {
  background:#f0f0f0;
  position:fixed;
  left:0px;
  right:0px;
  bottom:0px;
  height:2em;
  line-height:0em;
  font-size:1em;
  white-space:nowrap;
  
  border-top:2px #aaaaaa solid;
  
  padding:0px 5px 0px 5px;
}
​
#search .spacer {
  height:100%;
  display:inline-block;
  width:0px;
}
​
#search .content {
  height:2em;
  background:transparent;
  border:0px;
  
  width:100%;
}
​
#search .items {
    display: block;
    position: absolute;
    right: 5px;
    top: 0px;
    height: 2em;
    line-height: 0px;
}
​
#search .item {
  display:inline-block;
  height:1em;
  line-height:1em;
  font-size:1em;
  text-align:center;
  
  border:0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius:5px;
  background: #dddddd;
}
​
#search .start{
  width:3em;
  height:1.2em;
}
#search .next{
  width:3em;
  height:1.2em;
}
#search .prev{
  width:3em;
  height:1.2em;
}
#search .clear{
  width:1em;
  height:1em;
}
 
​
function escapeRegex(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
​
$('#search .content').keyup(function(){
  $(this).parent().find('.start').trigger('click');
});
​
$('#search .start').click(function(){
  var container = $($(this).parent().parent().attr('data-content-container'));
  var target = $(this).parent().parent().find('.content').val();
  //alert(target);
  
  if (target === '') {
    $(this).parent().find('.clear').trigger('click');
    return;
  }
  
  if (container.hasClass('linked')){
    if (target !== container.attr('data-linked-target')) {
      container.find('.highlight').contents().unwrap();
      container.removeClass('linked');
      window.location.hash = '';
    }
  }
  
  if (!container.hasClass('linked')) {
    //console.log(container);
    //console.log(container.html());
    //console.log(target);
    container.html(
      container.html().replace(new RegExp(escapeRegex(target), "g"), "<a class='highlight' href='javascript:void(0);'>" + target + "</a>")
    );
    container.addClass('linked');
    container.attr('data-linked-target', target);
    window.location.hash = encodeURIComponent(target);
  }
});
​
$('#search .clear').click(function(){
  var container = $($(this).parent().parent().attr('data-content-container'));
  var target = $(this).parent().parent().find('.content').val();
  //alert(target);
  container.find('.highlight').contents().unwrap();
  container.removeClass('linked');
      window.location.hash = '';
});
​
if (window.location.hash && window.location.hash !== '#') {
  var text = decodeURIComponent(window.location.hash).slice(1);
  $('#search .content').val(text);
  $('#search .start').trigger('click');
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mmis1000pro
0viewers